Detailed introduction to the new features of attribute selectors in CSS3

Zero, Overview

The attribute selector supported by CSS2 uses an expression [{attribute | attribute {= | |= | ~=} value}]
1.[class="a"] can only match elements with class="a"
2.[class~="a"] can match elements with class="a" and class="a b"
3.[lang|=en] can match the elements of lang="en" and lang="en-us".

CSS3 adds three new matching methods of *=, ^= and $= [{attribute | attribute {*= | ^= | $=} value}]:
1.*= indicates fuzzy matching , [href="163"] can match href="163.com", href="mail.163.com" and other elements;
2.^= means starting with the specified character, [href^="/" ] matches href="/a/a.htm", href="/b" elements
3.$= means ending with the specified character, [scr$=".png"] matches all png images, For example, src="logo.png"

CSS3 attribute selectors mainly include the following types:
1.E[attr]: only uses the attribute name, but does not determine any attribute value;
2.E[attr="value"]: Specify the attribute name, and specify the attribute value of the attribute;
3.E[attr~="value"]: Specify the attribute name, and have the attribute value. This attribute The value is a word list separated by spaces. The word list contains a value word, and the "?" in front of the equal sign must be written;
4.E[attr^="value"]: Specify The attribute name is specified, and there is an attribute value, and the attribute value starts with value;
5.E[attr$="value"]: The attribute name is specified, and there is an attribute value, and the attribute value ends with value. ;
6.E[attr*="value"]: The attribute name is specified, and there is an attribute value, and the attribute value contains value;
7.E[attr|="value"]: Specified The attribute name is specified, and the attribute value is value or a value starting with "value-" (for example, zh-cn);

1. E[attr]:The attribute selector is CSS3 The simplest type of attribute selector. If you want to select elements with a certain attribute, regardless of what the attribute value is, you can use this attribute selector:

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

You can also use multiple attributes to select elements, For example, E[attr1][attr2], so that all elements with both attributes will be selected:

.demo a[href][title] {background: yellow; color:green;}

Note: IE6 does not support this selector.

2. E[attr="value"]: Specifies the attribute value "value"

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

Note: The attribute and attribute value must be Exact match, especially when the attribute 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.

3. E[attr~="value"]: If you want to select elements based on a word in the word list in the attribute value, then you need to use this attribute selection Selector: E[attr~="value"], this kind of attribute selector is that the attribute value is a list of one or more words. If it is a list, they need to be separated by spaces, as long as one of the attribute values ​​matches. The element can be selected. The E[attr="value"] mentioned earlier means that the attribute value needs to match completely before it can be selected. The difference between them is that one has a "?" sign and the other does not have a "?" sign.

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

Note: When there is a wave (?) in the attribute selector, the attribute value will be matched. When there is no wave (?), the attribute value will be matched only when it is completely value. IE6 does not support the E[attr~="value"] attribute selector.

4. E[attr^="value"]: Select all elements whose attr attribute value starts with "value". In other words, the selected attribute has the corresponding attribute value. It starts with "value".

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

Note: IE6 does not support the E[attr^="value"] selector.

5. E[attr$="value"]: E[attr$="value"] attribute selector is just the opposite of E[attr^="value"] selector , E[attr$="value"] means to select all elements whose attr attribute value ends with "value". In other words, it selects the attr attribute of the element, and its attribute value ends with value. This application is used for It is very convenient for you to add background images to some special links. For example, to add different icons to different files such as pdf, png, doc, etc., we can use this attribute to achieve it.

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

Note: IE6 does not support the E[attr$="value"] attribute selector.

6. E[attr*="value"]: Select all elements whose attr attribute value contains the substring "value". That is to say, as long as the attribute you select has this "value" value in its attribute value, it will be selected.

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

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

7. E[attr|="value"]: is called a specific attribute selector. This selector will select all elements whose attr attribute value is equal to value or starts with value-.

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

Note: It is often used to match languages. IE6 does not support the E[attr|="value"] selector.

Note:
1. Except for IE6, which does not support the attribute selector, other browsers can support it.
2.E[attr="value"] and E[attr*="value"] are the most practical, among which E[attr="value"] can help us locate different types of elements, especially forms. Element operations, such as input[type="text"], input[type="checkbox"], etc., and E[attr*="value"] can help us match different types of files in the website, such as your Links to different file types on your website need to use different icons to help your website improve user experience. Just like the previous example, you can use this attribute to ".doc", ".pdf", ".png" ",".ppt" configure different icons.

For more detailed introductions to the newly added features of attribute selectors in CSS3, please pay attention to the PHP Chinese website for related articles!