CSS attribute Selector

In addition to the common "type selector (E), wildcard selector (*), include selector (E1 E2), and Id selector (# ID), selector grouping (E1, E2, E3), class selector (E. class), pseudo class, and pseudo object selector (E: P), and "attribute selector (E [ATTR])" and "adjacent selector (E1 + e2) ", tried the attribute selector, it feels very good, if used in the page, it will make CSS definition more powerful, but unfortunately now IE does not support this selector.

Attribute delimiters can be divided into the following types:

Attribute selectors
E [ATTR] attribute selector.
Select e with the ATTR attribute.

Attribute selectors
E [ATTR = value] attribute selector.
Select e with the ATTR attribute and the attribute value is equal to the value.

Attribute selectors
E [ATTR ~ = Value] attribute selector.
Select a word list with the ATTR attribute and the attribute value is separated by spaces. One of the words is equal to the value of E.

Attribute selectors
E [ATTR | = value] attribute selector.
Select a word list that has the ATTR attribute and the attribute value is separated by a hyphen. e starts with value.

The following is an example:

-------------------- HTML code ----------------------
<Div class = "Demo"> E [ATTR = value] attribute selector </div>
<Div Title = "attribute selectors"> E [ATTR] attribute selector </div>
<H1 class = "dem Demo"> E [ATTR ~ = Value] attribute selector <H2 class = "demo-demo2"> E [ATTR | = value] attribute selector </H2>
------------------------------------------------------------

------------------ CSS code -----------------------
Body {Line-Height: 1.3em; color: #000000 ;}
. Demo-demo2 {background-color: # ffa500 ;}
Div [title] {color: # ffffff; Background-color: # 0000ff ;}
Div [class = demo] {color: # ff0000 ;}
H1 [class ~ = Demo] {color: # 0000ff ;}
H2 [class | = demo] {color: #008000 ;}
-----------------------------------------------------------