A detailed introduction to the newly added features of the property selector in CSS3

0. Overview

CSS2 supported property selectors with an expression [{Property | Property {= | |= | ~=} value}]
1.[class= "A"] can only match elements of class= "a"
2.[class~= "A"] can match elements of class= "a", class= "a B"
3.[lang|=en] can match lang= "en", lang= "en-us" elements.

CSS3 new *=, ^=, $= three ways to match [{Properties | Property {*= | ^= | $=}]:
1.*= indicates fuzzy matching, [href= "163"] can match href= "163.com", href= "mail.163.com" and other elements;
2.^= means beginning with the specified character, [href^= "/"] matches elements of href= "/a/a.htm", href= "/b"
3.$= indicates the end of the specified character, [scr$= ". png"] matches all PNG images, such as src= "Logo.png"

The CSS3 property selector mainly includes the following types of properties:
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);

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

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

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:

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

Note: IE6 does not support this selector.

second, e[attr= "value"]: Specified property value "value"

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

Note: Attribute and property values must match exactly, especially if the property value is in the form of a word list, such as:
Test

. Demo a[class= "links"]{color:red};   . Demo a[class= "Links item"]{color:red};

IE6 does not support this selector.

e[attr~= "value"]: If you want to select an element based on a word from the list of words in the attribute value, then you need to use this property selector: e[attr~= "value", which is the property value is one or more word lists, If it is a list, they need to be separated by a space, as long as there is a value in the attribute to match the element can be selected, the previous e[attr= "value" is the attribute value needs to be fully matched to be selected, they are the difference between a "?" Number, one without "?" No.

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

Note: When there is a wave (?) in the property selector, the property value matches when there is value, and no Wave (?) is matched when the property value is exactly value. IE6 does not support the e[attr~= "value" property selector.

iv. e[attr^= "value"]: Select all the elements of the Attr property value that begin with "value", in other words, the property that you select starts with "value" with the corresponding property value.

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

Note: 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 ending with value, this use to give you some special link plus background picture is very convenient, for example, to Pdf,png,doc and other files with different icon, we can use this property to implement.

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

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

e[attr*= "value"]: Select all elements of the Attr property value that contain the substring "value". That is, the value of this "value" in the property value will be selected as long as you select the property.

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

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

vii. e[attr|= "value"]: called as a specific property selector. This selector selects all elements that have the Attr property value equal to value or start with value-.

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

Note: The commonly used place is used to match the language, IE6 does not support the e[attr|= "value" selector.

Comments:
1. The property selector is supported by other browsers except IE6.
2.e[attr= "value"] and e[attr*= "value" are the most practical, where e[attr= "value" can help us locate different types of elements, especially the form element of the operation, 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, different file types on your website need to use different icon icons to help your site improve the user experience, As in the previous example, you can configure different icon icons for ". Doc", ". pdf", ". png", ". ppt" Through this property.