Home Web Front-end HTML Tutorial Detailed explanation of CSS3 attribute selector and practical development of Shuangseqiu_html/css_WEB-ITnose

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

Jun 24, 2016 pm 12:00 PM
css3 Actual combat develop Detailed explanation Selector

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:

CSS3 属性选择器



01020304050607

< ;head>

CSS3 attribute selector

.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:

    

       

        文档类型提示图标

   

   

    实战互联网

    

        

            

文档推荐列表

               

                

               

           

       

   

< ;!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”>   Document type prompt icon 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.

    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

    Hot AI Tools

    Undresser.AI Undress

    Undresser.AI Undress

    AI-powered app for creating realistic nude photos

    AI Clothes Remover

    AI Clothes Remover

    Online AI tool for removing clothes from photos.

    Undress AI Tool

    Undress AI Tool

    Undress images for free

    Clothoff.io

    Clothoff.io

    AI clothes remover

    Video Face Swap

    Video Face Swap

    Swap faces in any video effortlessly with our completely free AI face swap tool!

    Hot Tools

    Notepad++7.3.1

    Notepad++7.3.1

    Easy-to-use and free code editor

    SublimeText3 Chinese version

    SublimeText3 Chinese version

    Chinese version, very easy to use

    Zend Studio 13.0.1

    Zend Studio 13.0.1

    Powerful PHP integrated development environment

    Dreamweaver CS6

    Dreamweaver CS6

    Visual web development tools

    SublimeText3 Mac version

    SublimeText3 Mac version

    God-level code editing software (SublimeText3)

    Four recommended AI-assisted programming tools Four recommended AI-assisted programming tools Apr 22, 2024 pm 05:34 PM

    This AI-assisted programming tool has unearthed a large number of useful AI-assisted programming tools in this stage of rapid AI development. AI-assisted programming tools can improve development efficiency, improve code quality, and reduce bug rates. They are important assistants in the modern software development process. Today Dayao will share with you 4 AI-assisted programming tools (and all support C# language). I hope it will be helpful to everyone. https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot is an AI coding assistant that helps you write code faster and with less effort, so you can focus more on problem solving and collaboration. Git

    Detailed explanation of obtaining administrator rights in Win11 Detailed explanation of obtaining administrator rights in Win11 Mar 08, 2024 pm 03:06 PM

    Windows operating system is one of the most popular operating systems in the world, and its new version Win11 has attracted much attention. In the Win11 system, obtaining administrator rights is an important operation. Administrator rights allow users to perform more operations and settings on the system. This article will introduce in detail how to obtain administrator permissions in Win11 system and how to effectively manage permissions. In the Win11 system, administrator rights are divided into two types: local administrator and domain administrator. A local administrator has full administrative rights to the local computer

    Detailed explanation of division operation in Oracle SQL Detailed explanation of division operation in Oracle SQL Mar 10, 2024 am 09:51 AM

    Detailed explanation of division operation in OracleSQL In OracleSQL, division operation is a common and important mathematical operation, used to calculate the result of dividing two numbers. Division is often used in database queries, so understanding the division operation and its usage in OracleSQL is one of the essential skills for database developers. This article will discuss the relevant knowledge of division operations in OracleSQL in detail and provide specific code examples for readers' reference. 1. Division operation in OracleSQL

    Which AI programmer is the best? Explore the potential of Devin, Tongyi Lingma and SWE-agent Which AI programmer is the best? Explore the potential of Devin, Tongyi Lingma and SWE-agent Apr 07, 2024 am 09:10 AM

    On March 3, 2022, less than a month after the birth of the world's first AI programmer Devin, the NLP team of Princeton University developed an open source AI programmer SWE-agent. It leverages the GPT-4 model to automatically resolve issues in GitHub repositories. SWE-agent's performance on the SWE-bench test set is similar to Devin, taking an average of 93 seconds and solving 12.29% of the problems. By interacting with a dedicated terminal, SWE-agent can open and search file contents, use automatic syntax checking, edit specific lines, and write and execute tests. (Note: The above content is a slight adjustment of the original content, but the key information in the original text is retained and does not exceed the specified word limit.) SWE-A

    Learn how to develop mobile applications using Go language Learn how to develop mobile applications using Go language Mar 28, 2024 pm 10:00 PM

    Go language development mobile application tutorial As the mobile application market continues to boom, more and more developers are beginning to explore how to use Go language to develop mobile applications. As a simple and efficient programming language, Go language has also shown strong potential in mobile application development. This article will introduce in detail how to use Go language to develop mobile applications, and attach specific code examples to help readers get started quickly and start developing their own mobile applications. 1. Preparation Before starting, we need to prepare the development environment and tools. head

    PHP Practical: Code Example to Quickly Implement Fibonacci Sequence PHP Practical: Code Example to Quickly Implement Fibonacci Sequence Mar 20, 2024 pm 02:24 PM

    PHP Practice: Code Example to Quickly Implement the Fibonacci Sequence The Fibonacci Sequence is a very interesting and common sequence in mathematics. It is defined as follows: the first and second numbers are 0 and 1, and from the third Starting with numbers, each number is the sum of the previous two numbers. The first few numbers in the Fibonacci sequence are 0,1,1.2,3,5,8,13,21,...and so on. In PHP, we can generate the Fibonacci sequence through recursion and iteration. Below we will show these two

    Detailed explanation of the role and usage of PHP modulo operator Detailed explanation of the role and usage of PHP modulo operator Mar 19, 2024 pm 04:33 PM

    The modulo operator (%) in PHP is used to obtain the remainder of the division of two numbers. In this article, we will discuss the role and usage of the modulo operator in detail, and provide specific code examples to help readers better understand. 1. The role of the modulo operator In mathematics, when we divide an integer by another integer, we get a quotient and a remainder. For example, when we divide 10 by 3, the quotient is 3 and the remainder is 1. The modulo operator is used to obtain this remainder. 2. Usage of the modulo operator In PHP, use the % symbol to represent the modulus

    Which Linux distribution is best for Android development? Which Linux distribution is best for Android development? Mar 14, 2024 pm 12:30 PM

    Android development is a busy and exciting job, and choosing a suitable Linux distribution for development is particularly important. Among the many Linux distributions, which one is most suitable for Android development? This article will explore this issue from several aspects and give specific code examples. First, let’s take a look at several currently popular Linux distributions: Ubuntu, Fedora, Debian, CentOS, etc. They all have their own advantages and characteristics.

    See all articles