CSS attribute selector and css Selector
P [name] {background: red;} only use the attribute name
P [name = ghr] {background: red;} specifies the attribute name and the attribute value.
P [name ~ = Old] {background: red;} This attribute value is a word list separated by spaces. The word list contains a value word.
P [name ^ = g] {background: pink;} the attribute value starts with g.
P [name $ = M] {background: # CC0;} the attribute value ends with M
P [name * = d] {background: # C3C;} contains the value
P [name | = B] {background: # C3C;} the attribute value is a value or a value starting with "value-" (for example, zh-cn)
IE7 and later support
<Body> <p name = "bghr"> Xiao Hei </p> <p name = "B-ghr old"> Xiao Bai </p> <p name = "ghr"> ghr </p> <p name = "dp"> store </p> <p name = "gzM"> gzm </p> <p name = "xm"> Xiaomei </p> </body>
The type is the type, and the value type is restricted.
Type is not included in the structure, and the location and type are restricted(If you have any questions, please note)
P: nth-child (2) Find the second child element under the parent level of the p tag and it is a p tag
P: nth-child (odd) {background: red}/* match odd rows */
P: nth-child (even) {background: red}/* match an even number of rows */
P: nth-child (2n) {background: red}
E: nth-last-child (n) indicates the nth byte point in the E parent element, and the type is E. Calculate the structural type from the back to the front.
P: nth-of-type (2) Find the second p element type under the p parent level
E: nth-of-type (n) indicates the nth E-type byte in the E parent element.
E: nth-last-of-type (n) indicates the nth child node in the E parent element.
E: empty indicates that the Eelement does not have any subnodes. Note: Child Nodes include text nodes.
P: first-child indicates the first child node in the p parent element and is p
E: last-child indicates the last subnode in the Eelement.
E: first-of-type indicates that the first node type in the E parent element is E
E: last-of-type indicates that the last node type in the E parent element is E
E: only-child indicates that the Eelement has only one subnode. Note: Child Nodes do not contain text nodes.
E: only-of-type indicates that only one child node exists in the parent element of E, and the unique child node type must be E. Note: Child Nodes do not contain text nodes.
Selector pseudo class:
E: target indicates the element type of the current URL segment, which must be E
E: disabled indicates a form control that cannot be clicked.
E: enabled indicates the form control that can be clicked.
E: checked indicates the selected checkbox or radio.
E: first-line indicates the first line in the Eelement.
E: first-letter indicates the first character in the Eelement.
E: selection
E: before: the content generated before the Eelement
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
