In the morning I saw Mr. Situ's Js version of the attribute selector (http://www.cnblogs.com/rubylouvre/archive/2009/10/27/1590102.html), but also inspired me to have a deep understanding of CSS selector learning desire, organized here for future reference
*: Matches any element.
Example: * {margin: 0}
E: matches any Eelement.
Example: div {color: Red}
E f: matches all descendant f elements of E.
E> F: matches all sub-f elements of E.The difference between this selector and the previous selector is that e f will match all f tags nested in E tags, while E> F will only match the first layer of F tags nested in E tags.
Note: (supported in IE6 or later versions)
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <title> CSS attribute selector </title> <br/> <style type = "text/CSS"> <br/> * {color: black ;}< br/>. cls1> Div {color: Red} <br/>. cls2 Div {color: green} <br/> </style> <br/> </pead> <br/> <body> <br/> <Div class = "cls1"> <br/> <Div class = "sub"> sub div1 <br/> <div> AAA </div> <br/> <Div class =" sub "> sub div2 <br/> <div> BBB </div> <br/> <HR/> <br/> <Div class = "cls2"> <br/> <Div class = "sub"> sub div1 <br/> <div> AAA </div> <br/> </div> <br/> <Div class = "sub"> sub div2 <br/> <div> BBB </div> <br/> </Div> <br/> </div> <br/> </body> <br/> </ptml> <br/>
RunCode
E: First-child: matches the first Eelement.
Notes: IE6 and later versions are supported.
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <title> E: first-Child </title> <br/> <style type = "text/CSS"> <br/>. cls1 Div: First-child {color: red} <br/> </style> <br/> </pead> <br/> <body> <br/> <Div class = "cls1"> <br/> <div> I am red </div> <br/> <div> I am black </div> <br/> </body> <br/> </ptml> <br/>
Run code
E: Link, E: visited: match the unaccessed and accessed hyperlinks respectively.
E: active, E: hover, E: Focus: matches the eElements in various user actions.
Note: IE6 and later versions allow any element to use pseudo classes such as hover.
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <title> CSS attribute selector </title> <br/> <style type = "text/CSS"> <br/>. cls1: First-child {color: Red} <br/>. cls1: Focus {border: solid 1px # f00}/*-IE8 is supported-*/<br/>. cls1: hover {Background: # ff9}/*-IE7 is supported.-*/<br/> </style> <br/> </pead> <br/> <body> <br/> <input type = "text" class = "cls1"> </input> <br/> <input type = "text" class = "cls1"> </input> <br /> <input type = "text" class = "cls1"> </input> <br/> </body> <br/> </ptml> <br/>
Run code
E + F: matches the next F element adjacent to E.
Note: (the hateful IE does not support-no matter which version of IE is the same)This selector also has a non-standard method E ~ F is the same as E + f (~ Can be identified by IE7 and IE8)
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <title> CSS attribute selector </title> <br/> <style type = "text/CSS"> <br/>. cls1 +. cls2 {border: solid 1px # f00 }< br/> </style> <br/> </pead> <br/> <body> <br/> <input type = "text" Class = "cls1"> </input> <br/> <input type = "text" class = "cls2"> </input> <br/> <input type = "Text "Class =" cls1 "> </input> <br/> <input type =" text "class =" cls2 "> </input> <br/> </body> <br/> </ptml> <br/>
Run code
E [Foo]: matches the Eelement with the foo attribute (no matter what value.
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <title> CSS attribute selector </title> <br/> <style type = "text/CSS"> <br/>. cls1 [email] {border: solid 1px # f00}/*-IE7 is supported.-*/<br/> </style> <br/> </pead> <br/> <body> <br /> <input type = "text" class = "cls1" e-mail = "yjmyzz@126.com"> </input> <br/> <input type = "text" class = "cls1"> </input> <br/> </body> <br/> </ptml> <br/>
Run code
E [Foo = "warning"]: matches any Eelement whose Foo attribute is "warning.
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <title> CSS attribute selector </title> <br/> <style type = "text/CSS"> <br/> input [class = 'cls1'] {border: solid 1px # f00}/* -- IE7 is supported (this attribute is case sensitive) -- */<br/> </style> <br/> </pead> <br/> <body> <br/> <input type = "text" class =" cls1 "value = 'cls1'> </input> <br/> <input type =" text "class =" cls1 "value = 'cls1'> </input> <br /> <input type = "text" class = "cls2" value = 'cls2'> </input> <br/> </body> <br/> </ptml> <br/>
Run code
E [Foo ~ = "Warning"]: matches any Foo attribute and is separated by spaces. One of the values is an Eelement of "warning.
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <title> CSS attribute selector </title> <br/> <style type = "text/CSS"> <br/> input [class ~ = 'Cls2'] {border: solid 1px # f00}/* -- IE7 (this attribute is case sensitive) -- */<br/> </style> <br/> </pead> <br/> <body> <br/> <input type = "text" class =" cls1 cls2 "value = 'cls1 cls2'> </input> <br/> <input type =" text "class =" cls1 "value = 'cls1'> </input> <br/> <input type = "text" class = "cls2" value = 'cls2 '> </input> <br/> </body> <br/> </ HTML> <br/>
Run code
E [Lang! = "En"]: matches any lang attribute value with "-" as the separator, and the first Eelement that is exactly equal to "en" (also matches the lang attribute with only the attribute value en ).
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <title> CSS attribute selector </title> <br/> <style type = "text/CSS"> <br/> input [class | = 'cls1 '] {border: solid 1px # f00}/* -- IE7 is supported (this attribute is case sensitive) -- */<br/> </style> <br/> </pead> <br/> <body> <br/> <input type = "text" class =" cls1-cls2-cls3 "value = 'cls1-cls2-cls3 '> </input> <br/> <input type =" text "class =" cls2-cls1 "value = 'cls2-cls1'> </ input> <br/> <input type = "text" class = "cls1" value = 'cls1'> </input> <br/> </body> <br/> </ptml> <br/>
run the Code
E [Foo * =" ABC "]: matches any Eelement with the foo property value and contains" ABC.
Note: Although W3C does not list this selector in the standard, all five browsers support this selector (except IE6 and IE6 ), already a fact standard
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <title> CSS attribute selector </title> <br/> <style type = "text/CSS"> <br/> input [class * = 'cls1 '] {border: solid 1px # f00}/* -- IE7 is supported (this attribute is case sensitive) -- */<br/> </style> <br/> </pead> <br/> <body> <br/> <input type = "text" class =" cls1-cls2-cls3 "value = 'cls1-cls2-cls3 '> </input> <br/> <input type =" text "class =" cls2cls1 "value = 'cls2cls1'> </input> <br/> <input type = "text" class = "cls1" value = 'cls1'> </input> <br/> </body> <br/> </ HTML> <br/>
Run code
E. Warning: equivalent to E [class ~ = "Warning"], matching any Eelement that uses the warning style class.
E # myid: equivalent to E [ID = 'myid'], matching any Eelement whose ID is myid.
E: Before and E: After are two rarely used pseudo classes used to display some content before and after the Eelement (supported by IE8)
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <title> after, before pseudo class </title> <br/> <style type = "text/CSS"> <br/> * {font-size: 12px; line-Height: 20px ;} <br/>. cls1: Before {content: "Welcome to my website"; display: block; border-bottom: solid 1px # CCC; line-Height: 25px;} <br/>. cls1: After {content: "Copyright 2009"; display: block; border-top: solid 1px # CCC; line-Height: 25px ;} <br/> </style> <br/> </pead> <br/> <body> <br/> <P class = "cls1"> This is a piece of text, demonstrate the usage of pseudo classes. Before can only be seen on IE8, Safari, chrome, Firefox, chrome, and opera, after content </P> <br/> </body> <br/> </ptml> <br/>
Run code
The preceding attribute selector can be used at http://www.w3.org/tr/css2/selector.htmlto check the official information.
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
