CSS3 Property Selector Detailed

The previous chaptermainly introduces the first part of the CSS3 selector in the CSS3 basic selector, this section is mainly to learn the second part of the CSS3 selector-the attribute selector. The attribute selector was introduced early in the CSS2, and its main function is to style the HTML element with the specified attribute . 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.

From the diagram of the CSS3 selector shown in the previous section, we can see that the CSS3 property selector mainly includes the following:

1. E[attr]: Use only attribute names, but no attribute values are determined;
2. e[attr= "value"]: Specifies the property name and specifies the property value of the property;
3. e[attr~= "value"]: Specifies the property name, and has a property value, which is a list of words, separated by a space, where the word list contains a value word, and the "?" in front of the equal sign. can not not write;
4. e[attr^= "value"]: The property name is specified, and there is a property value, and the value of the property begins with value;
5. e[attr$= "value"]: The property name is specified, and the attribute value is terminated with value;
6. e[attr*= "value"]: The property name is specified, and there is a property value, and the value contains value;
7. e[attr|= "value"]: The property name is specified, and the value of the property is either value or values beginning with "value-" (for example, ZH-CN);

To better illustrate the use of the CSS3 property selector, we have replaced the first section of the demo with another structure, as follows:

<div class= "Demo Clearfix" ><a href= "http://www.itdriver.cn" target= "_blank" class= "links Item First" id= " First "title=" actual combat internet ">1</a><a href=" "class=" Links Active item "title=" test website "target=" _blank "lang=" ZH ">2</a><a href=" sites/file/test.html "class=" Links item "title=" This is a link "lang=" ZH-CN ">3</a ><a href= "Sites/file/test.png" class= "Links item" target= "_balnk" lang= "ZH-TW" >4</a><a href= "sites /file/image.jpg "class=" Links item "title=" ZH-CN ">5</a><a href=" mailto:[email protected]"Class=" Links item "title=" website link "lang=" zh ">6</a><a href=" "class=" Links item "title=" Open the Websit E "Lang=" cn ">7</a><a href=" "class=" Links item "title=" Close the website "lang=" En-zh ">8</a><a Href= "class=" Links item "title=" http://www.sina.com ">9</a><a href=" "class=" links Item Last "id=" last " >10</a> </div>

First beautify the above code

     . demo {width:300px;border:1px solid #ccc;p adding:10px;     }     . Demo a {float:left;display:block;height:20px;line-height:20px;width:20px;-moz-border-radius:10px;- Webkit-border-radius:10px;border-radius:10px;text-align:center;background: #f36; color:green;margin-right:5px; Text-decoration:none;      }

The initial effect is as follows:

The following is a detailed analysis of how to use each of the property selectors listed above.

A, e[attr]

The E[attr] Property selector is the simplest of the CSS3 property selectors. If you want to select an element that has a property, regardless of the attribute value, you can use this property selector, such as:

     . Demo A[id] {background:blue; color:yellow;font-weight:bold;}

As the above code indicates, Select the Div.demo all with the id attribute of a element, and on this element using the background color for the blue color, the foreground color is yellow, the font bold style, compared to the above HTML, we can not find that only the first and last link used the id attribute, so the selection of the two a element, the effect is as follows:

Above is the use of a single attribute, you can also use multiple attributes to select elements, such as E[ATTR1][ATTR2], so long as it is both attributes of the elements will be selected:

      . Demo A[href][title] {background:yellow; color:green;}

No, I don't have to say, the code above knows what it means, and he represents a element that chooses Div.demo with a href,title two attributes, and applies the corresponding style as follows:

IE6 does not support this selector.

Second, e[attr= "value"]

E[attr= "value"] selector and e[attr] Selector, literally can be clearly understood, e[attr= "value"] is specified property value "value", and e[attr] just chose to have the corresponding property, and does not explicitly refer to its corresponding property value " Value ", which is where the largest area of the two selectors is. Thus narrowing the selection around, more accurate selection of the elements of their own, on the basis of the previous example, we will make a simple modification:

       . Demo a[id= "First"] {background:blue; color:yellow;font-weight:bold;}

In comparison with the preceding code, the corresponding value value is specified as "first" on the basis of the id attribute, so we select the A element in Div.demo, and this element has a "id=" first "property value, see below:

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

     . Demo a[href= "Http://www.w3cplus.com"][title] {background:yellow; color:green;}

The effect is as follows:

One thing to note about this property value selector for e[attr= "value" is that the property and property values must match exactly, especially if the property value is in the form of a word list, such as:

      <a href= "" class= "Links item" title= "Open the website" >7</a>

For example the above code, if you write:

     . Demo a[class= "Links"]{color:red};/* this is a notation that cannot be matched with the HTML above.

The above property selectors do not match the HTML above because their attributes and property values do not match exactly and need to be changed to the code shown below in order to correctly match:

     . Demo a[class= "Links item"]{color:red};/* This is the match, remember the middle of the space can not be less yo * * *

IE6 browsers do not support this selector.

Third, e[attr~= "value"]

If you want to select an element based on a word from the list of words in the attribute value, you need to use this property selector: e[attr~= "value"], the property selector is the attribute value is one or more word lists, if it is a list, they need to be separated by a space, The element can be selected as long as there is a value in the property value, and the e[attr= "value" we mentioned earlier is that the attribute value needs an exact match to be selected, and the difference between them is a "?" Number, one without "?" No. Let's look at an example of this:

     . Demo a[title~= "website"]{background:orange;color:green;}

The above code indicates that the title property of the A element under Div.demo, as long as its attribute value contains the word "website" will be selected, looking back at our HTML, it is not difficult to find all the elements of the "2,6,7,8" in the title of the four a element contains, So be selected, see the effect:

If we were in the code above, put that "?" No, look at their differences:

    . Demo a[title= "website"]{background:orange;color:green;}

This will not select any of the elements, because the exact match "title= ' website '" cannot be found in all a elements, in other words, no element is selected, the effect is as follows:

This example proves again the difference between e[attr= "value" and e[attr~= "value", and where "?" The effect, I summed up a sentence: The property selector has a wave (?) when the property value is matched when there is value, there is no wave (?) when the property value is exactly value to match.

IE6 does not support the e[attr~= "value" property selector.

Iv. e[attr^= "value"]

e[attr^= the "value" property selector, which refers to the selection of all elements of the Attr property value starting with "value", in other words, the selected property starts with the corresponding property value as "value", and takes a look at an instance:

       . Demo a[href^= "/http"]{background:orange;color:green;}       . Demo a[href^= "mailto:"]{background:green;color:orange;}

The above code indicates that all the a elements of a property that have been selected with the HREF attribute and start with "http://" and "mailto." are replaced by a simpler one? As long as the value of the href attribute in the A element is the "a" element that begins with "http:/" or "mailto.", then let's look at the above HTML and below to see if that's the case:

IE6 does not support the e[attr^= "value" selector.

V. e[attr$= "VALUE"]

e[attr$= the "value" property selector is just the opposite of the e[attr^= "value" selector, e[attr$= "value" means all elements that select the end of the Attr property value with "value", in other words, the element attr attribute is selected, And his attribute value is end with value, this use in give you some special link add background picture very convenient, for example to pdf,png,doc different files and so on different icon, we can use this property to implement, such as:

      . Demo a[href$= "PNG"]{background:orange;color:green;}

The above code indicates that the element a is selected in Div.demo with an href attribute and ends with a PNG value. (as mentioned above, only the background color of the change element is used here), the effect is as follows:

IE6 does not support the e[attr$= "value" property selector.

Vi. e[attr*= "value"]

The e[attr*= "Value" Property selector represents all elements that select the Attr property value that contains the substring "value". That is, as long as you select the attribute, the value of this "value" in its attribute value will be selected, such as:

      . Demo a[title*= "Site"]{background:black;color:white;}

The above code indicates that the a element in Div.demo is selected, and the title property of the A element matches the selection criteria as long as there is "site". The effect is as follows:

IE6 does not support the e[attr*= "value" selector.

Vii. e[attr|= "value"]

E[attr|= "Value" is the last one in the property selector, before saying that the selector is used to remind everyone that the attr behind is a vertical bar "|" instead of L, beware of mistaken. E[attr|= "Value" is referred to as a specific property selector. This selector selects all elements whose Attr property value equals value or starts with value-, let's take a look at an example:

. Demo a[lang|= "zh"]{background:gray;color:yellow;}

The above code will select all the a elements in Div.demo that have the lang attribute equal to zh or start with zh-, and you can compare to the previous HTML surrogate, where "2,3,4,6" is selected because they all have a lang attribute and their attribute values conform to "zh" or "zh-" The starting element. The specific results are as follows:

So this property selector is used to match the "female value-1", "value-2" property is very convenient, for example, you have a lot of pictures on the page, the image file name is "Figure-1", "figure-2" the way to name, It is convenient to use this selector to select the image, so you can try it locally, which is most commonly used as the example above to match the language.

IE6 does not support the e[attr|= "value" selector.

With regard to the property selector above, the property selector is supported in addition to IE6, so that if you use the property selector on your page and you need to deal with IE6 compatibility issues, Then you need to make sure that IE6 is implemented in another way or you should make sure that IE6 users will be able to get a usable page. 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.

Here, CSS3 's property selector is finished, the next section will mainly introduce CSS3 pseudo-class selector, especially the Nth-child selector, which will be the most attractive part of the CSS3 selector, if you are interested, please note this site update it. Let us look forward to the infinite power of CSS3.

Thank W3cplus for the wonderful text.

Welcome everyone to join the Internet Technology Exchange Group:62329335