CSS Property Selector

After the CSS base selector, this section summarizes the use of CSS property selectors.

The role of the property selector: sets the style for the HTML element with the specified property . Using the CSS3 property selector, you can specify only one property of an element, or you can specify both an attribute and its corresponding property value for the element.

Words don't say much: Still on the code.

. demo {margin:50px auto;                width:300px;                border:1px solid #ccc;            padding:10px; }. over-flow{Overflow:hidden; } li {float: Left;                height:20px; Line-height:20px;                width:20px; -moz-border-radius:10px; -webkit-border-radius:10px; Border-radius:10px; Text-Align:center;                Background:aqua;                Color:green; Margin-right:5px; List-Style:none; }

  <div class= "Demo" >                <ul class= "Over-flow" >                    <li id= "First" class= "first" >1</li>                    <li class= "active important" >2</li>                    <li class= "Important items" >3</li>                    <li class = "Important" >4</li>                    <li class= "items" >5</li>                    <li>6</li>                    <li> 7</li>                    <li>8</li>                    <li>9</li>                    <li id= "Last" class= "last" >10< /li>                </ul>            </div>

Get the following effect

1, e[attr]: Only use the property name, but not determine any property values;

li[id]{            background:red;           }

Select the element under the LI tag with the id attribute, and this property value is okay

You can also use multiple attributes to select elements, such as E[ATTR1][ATTR2], so that as long as the elements with both attributes are selected

   li[id][class]{            background:red;           }

2,e[attr= "value"]

E[ATTR] Just chooses to have the corresponding attribute, does not explicitly refer to its corresponding attribute value "value", and e[attr= "value" is the attribute value "value" is specified, thus narrowing the selection around, more accurate selection of the elements you need.

  Li[id= "Four"][class= "important"]{            background:red;           }

E[attr= the "value" property selector can also be multiple properties and write, further narrowing the selection:

This feature is easy to mistake: property and property values must match exactly, especially if the property values are in multiple forms, the property values must all be listed.

For example, the following code:

Li[id= "][class=" "Important"]{            background:red;           }

There's no effect.

Only all property values can be listed, and the order of property values cannot be wrong.

Li[id= "][class=" "active important"]{            background:red;           }

3. E[attr~= "Value"]: Unlike e[attr= "value", the difference between them is that there is a "?" Number, one without "?" e[attr= "value") is a property value that requires an exact match to be selected, and

e[attr~= "value") is a property value that can be selected whenever there is a value match.

  Li[class~= "Important"]{            background:red;           }

4. E[attr^= "value" refers to all elements that select the attr attribute value that begins with "value".

  Li[class^= "Active"]{            background:red;           }

5, e[attr$= "value" if you understand the fourth attribute selector, then this selector is just the opposite.

This is used to give you some special links to add background image is very convenient, such as to Pdf,png,doc and other different files with different icon.

To better illustrate, we insert two a connections in the structure

                     <li>8</li>                    <li>9</li>                    <li id= "Last" class= "last" >10</li>                    <li > <a href= "sites/file/test.jpg" class= "Links item" title= "This is a link" lang= "ZH-CN" >11</a></li>                    <li><a href= "sites/file/test.png" class= "Links item" target= "_balnk" lang= "ZH-TW" >12</a>< /li>

Li a[href$= "jpg"]{            background:red;           }

A link is a little ugly, but it still shows the problem.

6, e[attr*= "value" means to select all the elements of the attr attribute value that contain the substring "value",

and e[attr~= "value") have the same feeling.

Li[class*= "Important"]{            background:red;           }

7, e[attr|= "value"] specific property selector, first attr followed by a vertical bar "|" Instead of L, this selector selects Attr property value equal to value or all elements beginning with value-.

  Li a[lang|= "zh"]{            background:red;           }

At this point, about the CSS Property Selector section is basically so much, to illustrate that the property selector in addition to IE6 is not supported, other browsers can support,

e[attr= "value" and e[attr*= "value" in seven property selectors are most useful, where e[attr= "value" can help us locate different types of elements, especially the form element, such as input[type= "Text"],input[type= "checkbox"] and so on, and e[attr*= "value" can help us to match different types of files on the website, for example, the links of different file types on your website need to use different icon icons, To help your site improve the user experience, just like in the previous instance, you can configure different icon icons for ". Doc", ". pdf", ". png", ". ppt" from this property.

In the next section, we summarize the third part of the CSS selector. Pseudo-class selectors.

CSS Property Selector