Detailed explanation of CSS3 attribute selector and practical development of Shuangseqiu_html/css_WEB-ITnose

In the previous chapters, we learned that you can use inline styles, ID selectors, class selectors, and tag selectors to apply styles to an element.

If we want to apply styles to elements that all define a certain attribute, what should we do at this time?

In this section, I will use Double Color Ball Case and Document Type Tip Icon Case to introduce and apply attribute selectors.

Double-color ball case:

As we all know, there are 7 balls in double-color ball, 6 red balls and 1 blue ball. First, we define 7 span tags on the page:

01020304050607

< ;head>

.balls span{

margin-left:0.8em;

}

0102< /span>03050607

When we run the page at this time, we find that all the numbers are connected together: Then we adjust it in the external style sheet through the tag selector Distance between number balls:

.balls span{ margin-left:0.8em; }

But we know that each ball has a circle background. How to achieve this? In CSS2, we only It can be done through a background image, but with CSS3, we only need to set the radius of the label's corners to achieve it. If you don’t understand the code below, it doesn’t matter. There will be a dedicated article to explain it later. Now everyone just needs to remember that the following CSS3 style code is used to set rounded corners. Let’s improve the above style code ( red font is the newly added style):

.balls span{ margin-left:0.8em; /*Set the distance between the digital balls to 0.8em*/ display:block; /*Set the span of the digital balls to block for easy width adjustment and height*/ float:left; /*Make the number ball float to the left and display it in one line*/ width:1.4em; /*Set the width and height of the number ball span* / height:1.4em; border:1px solid red;/*Set the digital ball border to red. This is to make it easier to see whether the set style has taken effect*/ -webkit-border-radius:0.7em;/*Set the span fillet radius. If the radius is half the total length, a circle will be formed*/ -moz-border-radius:0.7em; border-radius:0.7em; text-align:center; /*Make the words in the number ball appear horizontally centered*/ line-height:1.4em ; /*Make the words in the number ball appear vertically centered*/ }

Run the Demo at this time, and the prototype of the sphere has come out:

Some people will ask, why are your styles written in the same span tag selector Okay, why haven’t we mentioned the attribute selector yet?

Don’t worry, the above styles are attribute styles common to all spheres, so they are all written in the same tag. We know that the first six balls are red balls and the last one is blue balls. So how to deal with this?

Let’s take a look at the knowledge points first. Attribute selectors were introduced from CSS2. The following are the attribute selectors defined in CSS2:

E[attr]	选择匹配定义了attr属性的E类型元素。注意，E类型可以省略，直接写[attr]，这就意味着匹配所有定义了attr属性的元素。
E[attr="value"]	选择匹配那些attr属性值设为value的E类型元素。注意，E类型可以省略，直接写[attr="value"]，这就意味着匹配所有attr=”value”的元素。
E[attr~="value"]	选择匹配那些attr属性值是列表形式的，且各个值是以空格分开的，且有一个值为value的所有E类型元素。注意E可以省略。
E[attr|="value"]	选择匹配那些attr属性值是value或是以value- 开头的E类型元素。注意，E类型可以省略。
E[attr^="value"]	选择匹配那些attr属性值是以value开头的E类型元素。注意，E标签选择符可以省略。
E[attr$="value"]	选择匹配那些attr属性值是以value为后缀的E类型元素。注意，E标签选择符可以省略。
E[attr*="value"]	选择匹配那些attr属性值包含value的E类型元素。注意E标签选择符可以省略。

E [attr]

Selects elements of type E that match the attr attribute. Note that the E type can be omitted and directly write [attr], which means matching all elements with the attr attribute defined.

E[attr="value"]

Select matching E-type elements whose attr attribute value is set to value. Note that the E type can be omitted and directly written [attr="value"], which means matching all elements with attr="value".

E[attr~="value"]

Select matching attr attribute values ​​in list form, and each value All elements of type E that are separated by spaces and have a value of value. Note that E can be omitted.

E[attr|="value"]

.balls span{

margin-left:0.8em; /*设置数字球之间的距离为0.8em*/

display:block; /*将数字球span设为块，便于调整宽和高*/

float:left; /*使数字球向左浮动，连在一行显示*/

width:1.4em; /*设置数字球span的宽高*/

height:1.4em;

 border:1px solid red;/*设置数字球边框为红色，这个是为了便于查看设置的样式是否已经生效*/

-webkit-border-radius:0.7em;/*设置span圆角半径，如果半径为总长度一半，则就形成了圆*/

-moz-border-radius:0.7em;

border-radius:0.7em;

text-align:center; /*使数字球中的字水平居中显示*/

line-height:1.4em; /*使数字球中的字垂直居中显示*/

color:#FFFFFF; /*设置span中字体颜色*/

box-shadow:0.15em 0.15em #999; /*给ball应用阴影效果，增加立体感*/

}

 

/*给所有的ball应用样式*/

.balls span[title]{ /*给设置了title属性的span 应用样式*/

 background-color:#FF0000;

}

/*给class以blueball为结尾的span元素应用样式*/

.balls span[class$="blueball"]{

 background-color:#0033CC;

}

Select to match those attr attribute values ​​that are value or start with value- E type element. Note that the E type can be omitted.

E[attr^="value"]

Select to match those E-type elements whose attr attribute value starts with value . Note that the E tag selector can be omitted.

E[attr$="value"]

Select to match those E types whose attr attribute values ​​are suffixed by value element. Note that the E tag selector can be omitted.

E[attr*="value"]

Select matching E-type elements whose attr attribute value contains value. Note that the E tag selector can be omitted.

In fact, from the above table, we can see that the attribute selector actually adds attributes to the tag selector Limitation, it is a further refinement of the tag selector. Okay, after we understand the basic knowledge of attribute selectors, we can add a background color to the two-color ball:

.balls span{ margin-left:0.8em; /*Set the distance between the digital balls to 0.8em*/ display:block; /*Set the span of the digital balls to block for easy adjustment of width and Height*/ float:left; /*Make the number ball float to the left and display it in one line*/ width:1.4em; /*Set the width and height of the number ball span*/ height:1.4em; border:1px solid red;/*Set the digital ball border to red. This is to make it easier to see whether the set style has taken effect*/ -webkit-border-radius:0.7em;/*Set the span fillet radius. If the radius is half the total length, a circle is formed*/ -moz-border-radius:0.7em; border-radius:0.7em; text-align:center; /*Make the words in the number ball appear horizontally centered*/ line-height:1.4em; /*Make the words in the number ball appear vertically centered*/ color:#FFFFFF; /*Set the font color in span*/ box-shadow:0.15em 0.15em #999; /*Apply shadow effects to balls to increase the three-dimensional effect*/ } /*Apply styles to all balls*/ .balls span[title]{ /*Apply style to span with title attribute set*/ background-color:#FF0000; } /*Give class blueball Apply styles to the ending span element*/ .balls span[class$="blueball"]{ background-color:#0033CC; }

Run our Demo at this time, and the double color ball renderings will come out.

Careful netizens may have noticed that in the first ball, we also set the blueball style, but it still has a red background, which proves that E[attr $="value"] does add styles to those E elements whose attr attribute values ​​end with value.

Next, we continue to explain the document type prompt icon case:

First create the page:

    

       

       

   

   

    实战互联网

    

        

            

文档推荐列表

               

                

                    

• CSS3案例开发

                       

• CSS3教程分享计划

                       

• CSS3相关博文

                       

• 作者个人主页

                   

               

           

       

   

< ;!DOCTYPE html>

 

.prefer_docs dd{ /*清除dd 到 dl 边框的距离*/

margin-left:0px;

}

.prefer_docs ul{/*重新设置ul样式*/

list-style-type:none;

padding-left:0px;

margin-left:0px;

}

.prefer_docs li{/*调整推荐文档的上下距离*/

margin-bottom:2px;

}

.prefer_docs a{/*去除文档超链接下划线*/

text-decoration:none;

}

.prefer_docs a:hover{/*给超链接应用鼠标滑过时的样式*/

color:red;

text-decoration:underline;

}

.prefer_docs a span{ /*定义文档类型图标显示区域大小*/

background: no-repeat;

display:block;

height:16px;

width:16px;

float:left;

margin-right:2px;

}

.prefer_docs a span{ /*导入文档类型背景图片*/

background-image:url(pkg_icon.png);

}

.prefer_docs a[href$="ppt"] span{/*所有以ppt为结尾的，应用ppt图标*/

background-position:-856px -36px;

}

.prefer_docs a[href*="pdf"] span{/*给链接中包含pdf文字的链接，应用pdf图标*/

background-position:-625px -36px;

}

.prefer_docs a[class|="doc"] span{/*给class以doc或者doc- 开头的链接，应用doc图标*/

background-position:-877px -36px;

}

.prefer_docs a[class~="net"] span{/* class属性中，含有net值的链接，应用Internet图标 */

background-position:-520px -36px;

}

  < ;link rel=”stylesheet” href=”styles_2014070502.css”>   Practical Internet

                                                                                                                                                                                         > & Lt; li & gt; & lt; a href = "http://www.baidu.com/doc/css3.pdf" & gt; & lt; span & gt;/span & gt; css3 case development & lt;/a & gt; & lt; t; li & gt ;                                                                                                     /a>                                                                                         ;CSS3 related blog posts                                 

                                           ;/dl>

Run page Demo, since no styles have been added yet, the effect is as shown below: Now we apply the style in the external style sheet:

.prefer_docs dd{ /*Clear the distance from dd to dl border*/ margin-left:0px; } .prefer_docs ul{/*Reset ul style*/ list-style-type:none; padding-left:0px; margin-left:0px; } .prefer_docs li{/*Adjust the top and bottom distance of recommended documents*/ margin-bottom:2px; } .prefer_docs a{/* Remove underline from document hyperlink*/ text-decoration:none; } .prefer_docs a:hover{/*Apply style to hyperlink when mouse rolls over* / color:red; text-decoration:underline; } .prefer_docs a span{ /*Define document type icon display area size */ background: no-repeat; display:block; height:16px; width:16px; float:left; margin-right:2px; } .prefer_docs a span{ /*Import document type background image*/ background -image:url(pkg_icon.png); } .prefer_docs a[href$="ppt"] span{/*All ending with ppt, apply the ppt icon*/ background-position:-856px -36px; } .prefer_docs a[href*="pdf"] span{/*For links containing pdf text Link, apply pdf icon*/ background-position:-625px -36px; } .prefer_docs a[class|="doc"] span{/* For links starting with doc or doc- for class, use the doc icon */ background-position:-877px -36px; } .prefer_docs a[class~ ="net"] span{/* In the class attribute, the link containing the net value applies the Internet icon*/ background-position:-520px -36px; }

Finally, let’s take a look at the running effect:

The above is a code demonstration that uses the attribute selector to apply the corresponding icon to the document download link.

Of course, there are many selectors, such as pseudo-class selectors and pseudo-element selectors, which will not be described in detail here. In future examples, if used, they will be further detailed.

Welcome to join the Internet technology exchange group: 62329335

Personal statement: The blog posts shared are absolutely original, and we strive to make every one of them original. Knowledge points are verified through practical demonstrations.