Home > Developer > JavaScript
H5 and CS3 under the authority. 18 and 19 selector (1), cs3.18
Chapter 18. CSS3 Overview
1. Internet development is divided into three stages from the perspective of frontend technology:
(1) web1.0: HTML and CSS.
(2) web2.0: Ajax, Javascript/DOM/asynchronous data requests.
(3) web3.0: HTML5 and CSS3.
2. CSS3 adopts the modular structure of division of labor and cooperation. It has various modules to define relevant styles and functions. This is done by avoiding incomplete browser support for a certain module. (In this way, major browsers can choose what modules are supported and what modules are not supported .)
Chapter 19 Selector
1. selector Overview
In css2, we often use the class attribute of elements to set styles. The two disadvantages of this method are:
(1) the class attribute has no semantics and is purely used to serve css styles. It is a redundant attribute.
(2) If the class attribute is used and the style and element are not bound, different elements can be used for the same class attribute. This will lead to confusion and inconvenience in style modification.
Therefore, in css3, it is recommended to use selectors to directly bind styles with elements, using the regular expression E [foo $ = "val"] (attribute selector.
Eg:
1 <body>2 <div id="test">linshuling</div>3 <div id="test1">linsuli</div>4 </body>
Css
1 <style type="text/css">2 div[id="test"]{background: pink;}3 </style>
2. wildcard characters:
(1) "^" wildcard: Enable character matching.
Eg:
1 <body>2 <div id="test">linshuling</div>3 <div id="test1">linsuli</div>4 <div id="t1">linsuli</div>5 <div id="1">linsuli</div>6 </body>
Css
1 <style type="text/css">2 div[id^="t"]{background: pink;}3 </style>
(2) "$" wildcard: matches the ending character.
Eg:
1 <style type="text/css">2 div[id$="1"]{background: pink;}3 </style>
(3) "*" wildcard: Contains character matching.
Eg:
1 div[id*="e"]{background: pink;}
3. Attribute Selector
The preceding three attribute selectors appended to CSS3 are: [att * = val], [att ^ = val], and [att $ = val]. att indicates the attribute of the element, val indicates the property value.
(1) [att * = val]. If the attribute value of an element expressed with att contains characters specified with val, this style is used for this element.
(2) [att ^ = val]. If the attribute value expressed by att starts with a character specified by val, this style is used for this element.
(3) [att $ = val]. If the end character of the attribute value represented by att is a character specified by val, this style is used for this element.
Eg:
1 <div id="test-1">lin</div>2 <div id="test1">linsuli</div>3 <div id="t1">linsuli</div>4 <div id="1-1">linsuli</div>
1 <style type="text/css">2 div[id$=\-1]{background: pink;}3 </style>
Note: When the attribute value is not enclosed by "", the escape character "\" must be added before the specified matching character in the attribute selector. Or it is written as: div [id $ = "-1"] {background: pink ;}
4. Using the [att $ = val] attribute selector, you can use different styles based on different file extensions in the hyperlink.
Eg:
1 <ul> 2 <li> <a href = "http: // linshuling/"> HTML5 + CSS3 authoritative guide </a> </li> 3 <li> <a href =" http: // linshuling/css.html "> CSS3 features </a> </li> 4 <li> <a href =" test.jpg "> image Material </a> </li> 5 </ul>
1 a [href $ =\/]: after, a [href $ = html]: after, a [href $ = htm]: after {2 content: "web page "; 3 color: red; 4} 5 a [href $ = jpg]: after {6 content: "jpge image file"; 7 color: green; 8}
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
