CSS3 selector attribute selector

The previous section mainly introduced the first part of CSS3 selector in "CSS3 Selector - Basic Selector". This section mainly introduces the second part of CSS3 selector - attribute selector with everyone. Attribute selectors were introduced as early as CSS2, and their main function is to set styles for HTML elements with specified attributes. Using CSS3 attribute selectors, you can specify only an attribute of an element, or you can specify both an attribute of an element and its corresponding attribute value. From the CSS3 selector chart shown in the previous section, we can know that CSS3 attribute selectors mainly include the following types:

E[attr]
• : Only the attribute name is used, but no attribute value is determined;
E[attr="value"]
• : Specify the attribute name and specify the attribute value of the attribute;
E[attr~="value"]
• : Specify the attribute name and have an attribute value. This attribute value is a word list separated by spaces, where the word list contains a value word, and The "~" in front of the equal sign cannot be omitted;
E[attr^="value"]
• : The attribute name is specified and there is an attribute value. The attribute value starts with value;
E[attr$="value"]
• : The attribute name is specified, and there is an attribute value, and the attribute value ends with value;
E[attr*="value"]
• : The attribute name is specified, and there is an attribute value, and the attribute value contains value;
E[attr|="value"]
• : The attribute name is specified, and the attribute value is value or a value starting with "value-" (for example, zh-cn); In order to better explain the use of CSS3 attribute selectors, we replace the demo in the first section with another structure, as shown below:

<div class="demo clearfix">
    <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1a>
    <a href="" class="links active item" title="test website" target="_blank" lang="zh">2a>
    <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3a>
    <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4a>
    <a href="sites/file/image.jpg" class="links item" title="zh-cn">5a>
    <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6a>
    <a href="" class="links item" title="open the website" lang="cn">7a>
    <a href="" class="links item" title="close the website" lang="en-zh">8a>
    <a href="" class="links item" title="http://www.sina.com">9a>
    <a href="" class="links item last" id="last">10a>
div>

.demo {
    width: 300px;
    border: 1px solid #ccc;
    padding: 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;
}

Let’s start with a detailed analysis of how to use each of the attribute selectors listed above.

E[attr] attribute selector is the simplest one among CSS3 attribute selectors. If you want to select elements with a certain attribute, regardless of the attribute value, you can use this attribute selector, such as:

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

The above is the use of a single attribute. You can also use multiple attributes to select elements, such as E[attr1][attr2], so that all elements with both attributes will be selected:

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

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

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

7

.demo a[class="links"]{color:red};/*这是一种写法不能和上面的html所匹配*/

.demo a[class="links item"]{color:red};/*这样才是匹配的，记得中间的空格不能少的哟*/

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

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

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

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

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

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