Home > Developer > Web Develop
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.
What should we do if we want to apply a style to an element that defines an attribute that defines it?
In this section, I'll use the color ball case and document type hint icon cases to introduce and apply the property selector.
Color Ball Case:
As we all know, color ball has 7 balls, 6 red balls and 1 blue balls. Let's first define 7 span tags on the page:
<! DOCTYPE html> <meta charset= "utf-8″> <link rel= "stylesheet" href= "Styles_20140705.css" > <title>css3 Property Selector </title> <body> <div class= "Container" > <!--practical Internethttp://www.itdriver.cn- </body> |
When we run the page, we find that all the numbers are linked together:
650) this.width=650; "class=" Alignnone size-full wp-image-24 "alt=" 2014-08-03_151202 "src=" http://www.itdriver.cn/ Wp-content/uploads/2014/08/2014-08-03_151202.png "width=" "height=" "style=" border:1px solid rgb (204,204,204); padding:2px; "/>
We then use the tag Selector to adjust the distance between the numbers balls in the external style sheet:
. Balls span { Margin-left:0.8em; } |
But we know that each ball has a round background, how this can be achieved, in the CSS2, we can only through the background image to do, and to the CSS3, we only need to set the radius of the corner of the tag (radius), can be achieved. If you do not understand the following code, it doesn't matter, there will be a special article to explain. Now you just have to remember that the following CSS3 style code is used to set the rounded corners on OK.
Let's make the above style code improved (the red font is the new added style):
. Balls span{ Margin-left:0.8em; /* Set the distance between the digital balls to 0.8em*/ Display:block; / * Set the digital sphere span as a block for easy adjustment and Height * / Float:left; / * Make the digital ball float to the left, even on one line * / Width:1.4em; / * Set the width height of the digital sphere span * / Height:1.4em; border:1px solid red; / * Set the number sphere border to red, this is to make it easier to see whether the style of the setting is already in effect * / -webkit-border-radius:0.7em; / * Sets the span fillet radius, and if the radius is half the total length, a circle is formed * / -moz-border-radius:0.7em; Border-radius:0.7em; Text-align:center; / * Center The words in the number sphere in the horizontal display * / Line-height:1.4em; / * Center The words in the digital sphere vertically. * / } |
Now that the demo is running, the prototype of the sphere has come out:
650) this.width=650; "class=" Alignnone size-full wp-image-27 "alt=" 2014-08-03_151443 "src=" http://www.itdriver.cn/ Wp-content/uploads/2014/08/2014-08-03_151443.png "width=" 258 "height=" "style=" border:1px solid rgb (204,204,204); padding:2px; "/>
Some people will ask, how do you write your style in the same span tag Selector , why haven't you talked about the property selector ?
Don't worry, the above styles are all attribute styles common to all spheres, and ancient capital is written in the same label. We know color ball, the first six is the red ball, the last one is the blue ball, so how to deal with this?
Let's take a look at the knowledge point, the property selector is introduced from CSS2, and the following is the attribute selector defined in CSS2:
| E[ATTR] | Select the E -type element that matches the attr attribute defined. Note that the E type can be omitted and written directly [attr], which means matching all elements that define the attr attribute. |
| E[attr= "Value"] | Select the e-type element that matches those attr attribute values set to value. Note that the E type can be omitted and written directly [attr= "value"], which means matching all elements of the attr= "value". |
| E[attr~= "Value"] | Select match those attr attribute values are in the form of a list, and each value is separated by a space and has a value of all e-type elements. Note that e can be omitted. |
| E[attr|= "Value"] | Select the e-type element that matches those attr attribute values that are value or start with value-. Note that the E type can be omitted. |
| E[attr^= "Value"] | Select the e-type element that matches those attr attribute values that begin with value. Note that the E tag selector can be omitted. |
| E[attr$= "Value"] | Select the e-type element that matches those attr attribute values that are suffixed with value. Note that the E tag selector can be omitted. |
| E[attr*= "Value"] | Select the e-type element that matches those attr attribute values that contain value. Note the e tag selector can be omitted. |
In fact, from the table above, we can see that the property selector is actually a tag selector with attribute restrictions, it is the tag Selector further refinement.
Well, when we understand the basics of the property selector, we can add a background color to the color ball:
. Balls span{ Margin-left:0.8em; /* Set the distance between the digital balls to 0.8em*/ Display:block; /* Set the digital sphere span as a block for easy adjustment and Height */ Float:left; /* Make the digital ball float to the left, even on one line */ Width:1.4em; /* Set the width height of the digital sphere span */ Height:1.4em; border:1px solid red; / * Set the number sphere border to red, this is to make it easier to see whether the style of the setting is already in effect * / -webkit-border-radius:0.7em;/* sets the span fillet radius, and if the radius is half the total length, a circle is formed */ -moz-border-radius:0.7em; Border-radius:0.7em; Text-align:center; /* Center The words in the number sphere in the horizontal display */ Line-height:1.4em; /* Center The words in the digital sphere vertically. */ Color: #FFFFFF; /* Set the font color in span */ Box-shadow:0.15em 0.15em #999; /* Apply shadow effect to ball, add three-dimensional * * } /* Apply the style to all ball */ . Balls span[title]{/* To apply a style to a span with the Title property set */ Background-color: #FF0000; } /* Apply a style to a SPAN element with the end of the class BlueBall */ . Balls span[class$= "BlueBall"]{ Background-color: #0033CC; } |
When we run our demo, color Ball is out.
650) this.width=650; "class=" Alignnone size-full wp-image-28 "alt=" 2014-08-03_151722 "src=" http://www.itdriver.cn/ Wp-content/uploads/2014/08/2014-08-03_151722.png "width=" 246 "height=" "style=" border:1px solid rgb (204,204,204); padding:2px; "/>
Careful netizen may have found that, in the first ball, we also set the BlueBall style, but it is still a red background, which proves that e[attr$= "value" is indeed for those attr attribute value to the end of the E element to add style.
Next, we go on to the document type hint icon case:
First create the page:
<! DOCTYPE html> <meta charset= "utf-8″> <link rel= "stylesheet" href= "Styles_2014070502.css" > <title> Document type hint icon </title> <body> <a href= "http://www.itdriver.cn" > Actual combat Internet </a> <div> <dl> <dt> recommended List of documents </dt> <dd> <ul> <li><a href= "Http://www.baidu.com/doc/css3.pdf" ><SPAN></SPAN>CSS3 Case development </a></li > <li><a href= "http://www.baidu.com/doc/css3.ppt" ><SPAN></SPAN>CSS3 Tutorial sharing program </a></ Li> <li><a href= "Http://www.baidu.com/doc/css3.doc" ><SPAN></SPAN>CSS3 related posts </a></li > <li><a href= "http://www.itdriver.cn" ><span></span> author profile </a></li> </ul> </dd> </dl> </div> </body> |
Run the page demo, because there is no style for the moment, the effect is as shown:
650) this.width=650; "class=" Alignnone size-full wp-image-29 "alt=" 18dcdb8ee0fc47aabea0ef845f2c6f8a "src="/http Www.itdriver.cn/wp-content/uploads/2014/08/18DCDB8EE0FC47AABEA0EF845F2C6F8A.jpg "Width=" 260 "height=" 144 "style=" border:1px solid RGB (204,204,204);p adding:2px; "/>
Now let's apply the style to the external style sheet:
. Prefer_docs dd{/* Clear the distance from DD to DL border */ margin-left:0px; } . Prefer_docs ul{/* re-set the 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 Document Hyperlink underline */ Text-decoration:none; } . Prefer_docs a:hover{/* Apply the mouse-over style to hyperlinks */ 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 picture */ Background-image:url (pkg_icon.png); } . Prefer_docs a[href$= "ppt"] span{/* all PPT-end, apply ppt icon */ background-position:-856px-36px; } . Prefer_docs a[href*= "PDF"] span{/* link containing pdf text to the link, apply PDF icon */ background-position:-625px-36px; } . Prefer_docs a[class|= "Doc"] span{/* link to class with Doc or doc-, apply Doc icon */ background-position:-877px-36px; } . Prefer_docs a[class~= "NET"] span{/* class attribute, link containing net value, apply Internet icon */ background-position:-520px-36px; } |
Finally we look at the effect of the operation:
650) this.width=650; "class=" Alignnone size-full wp-image-30 "alt=" 99F42C9956B74C51AF144856FA8ADFEF "src="/http Www.itdriver.cn/wp-content/uploads/2014/08/99F42C9956B74C51AF144856FA8ADFEF.jpg "width=" 196 "height=" style= " border:1px solid RGB (204,204,204);p adding:2px; "/>
The above is to use the attribute selector, to the document download link should use the corresponding icon code demonstration.
Of course, there are many selectors, such as pseudo-class selectors, as well as pseudo-element selectors, which are no longer detailed here, in later instances, if used, will be further elaborated.
Welcome everyone to join the Internet Technology Exchange Group:62329335
Personal statement: Share the blog, absolutely original, and strive to each knowledge point through the actual demonstration to verify.
This article is from the "http://itdriver.blog.51cto.com/9109476/1535249" blog, please be sure to keep this source.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
