« 上一篇下一篇 »

2016-3-30 15:30:20

CSS选择器

选择器 例子 例子描述
       .class       .intro 选择 class="intro" 的所有元素。
.intro      
     {      
     background-color:yellow;      
     }
       #id       #firstname 选择 id="firstname" 的所有元素。
#firstname      
     {      
     background-color:yellow;      
     }
       *       * 选择所有元素。
*      
     {      
     background-color:yellow;      
     }
       element       p 选择所有 <p> 元素。
p      
     {      
     background-color:yellow;      
     }
       element,element       div,p 选择所有 <div> 元素和所有 <p> 元素。
h1,p      
     {      
     background-color:yellow;      
     }
       element element       div p 选择 <div> 元素内部的所有 <p> 元素。
div p      
     {      
     background-color:yellow;      
     }
       element>element       div>p 选择父元素为 <div> 元素的所有 <p> 元素。
div>p      
     {      
     background-color:yellow;      
     }
       element+element       div+p 选择紧接在 <div> 元素之后的所有 <p> 元素。
div+p      
     {      
     background-color:yellow;      
     }
       [attribute]       [target] 选择带有 target 属性所有元素。
a[target]      
     {      
     background-color:yellow;      
     }      
     注释：对于 IE8 及更早版本的浏览器中的 [attribute]，必须声明 <!DOCTYPE>。
       [attribute=value]       [target=_blank] 选择 target="_blank" 的所有元素。
a[target=_blank]      
     {      
     background-color:yellow;      
     }      
     注释：对于 IE8 及更早版本的浏览器中的 [attribute]，必须声明 <!DOCTYPE>。
       [attribute~=value]       [title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。
[title~=flower]      
     {      
     background-color:yellow;      
     }      
     注释：对于 IE8 及更早版本的浏览器中的 [attribute~=value]，必须声明 <!DOCTYPE>。
       [attribute|=value]       [lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。
[lang|=en]      
     {      
     background-color:yellow;      
     }      
     注释：对于 IE8 及更早版本的浏览器中的 [attribute|=value]，必须声明 <!DOCTYPE>。
       :link       a:link 选择所有未被访问的链接。
a:link      
     {      
     background-color:yellow;      
     }
       :visited       a:visited 选择所有已被访问的链接。
a:visited      
     {      
     background-color:yellow;      
     }
       :active       a:active 选择活动链接。
a:active      
     {      
     background-color:yellow;      
     }
       :hover       a:hover 选择鼠标指针位于其上的链接。
a:hover      
     {      
     background-color:yellow;      
     }
       :focus       input:focus 选择获得焦点的 input 元素。
input:focus      
     {      
     background-color:yellow;      
     }      
     注释：如果 :focus 用于 IE8 ，则必须声明 <!DOCTYPE>。
       :first-letter       p:first-letter 选择每个 <p> 元素的首字母。
p:first-letter      
     {      
     font-size:200%;      
     color:#8A2BE2;      
     }
       :first-line       p:first-line 选择每个 <p> 元素的首行。
p:first-line      
     {      
     background-color:yellow;      
     }
       :first-child       p:first-child 选择属于父元素的第一个子元素的每个 <p> 元素。
p:first-child      
     {      
     background-color:yellow;      
     }      
     注释：对于 IE8 及更早版本的浏览器中的 :first-child，必须声明 <!DOCTYPE>。
       :before       p:before 在每个 <p> 元素的内容之前插入内容。
p:before      
     {      
     content:"台词：";      
     }      
     注释：对于在 IE8 中工作的 :before，必须声明 DOCTYPE。
       :after       p:after 在每个 <p> 元素的内容之后插入内容。
p:after      
     {      
     content:"台词：";      
     }      
     注释：对于在 IE8 中工作的 :after，必须声明 DOCTYPE。
       :lang(language)       p:lang(it) 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。
p:lang(en)      
     {      
     background:yellow;      
     }      
     注释：对于在 IE8 中工作的 :lang，必须声明 DOCTYPE。
       element1~element2       p~ul 选择前面有 <p> 元素的每个 <ul> 元素。
p~ul      
     {      
     background:#ff0000;      
     }
       [attribute^=value]       a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。
div[class^="test"]      
     {      
     background:#ffff00;      
     }
       [attribute$=value]       a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。
div[class$="test"]      
     {      
     background:#ffff00;      
     }
       [attribute*=value]       a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。
div[class*="test"]      
     {      
     background:#ffff00;      
     }
       :first-of-type       p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:first-of-type      
     {      
     background:#ff0000;      
     }
       :last-of-type       p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:last-of-type      
     {      
     background:#ff0000;      
     }
       :only-of-type       p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-of-type      
     {      
     background:#ff0000;      
     }
       :only-child       p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:only-child      
     {      
     background:#ff0000;      
     }      
     注释：Internet Explorer 不支持 :only-child 选择器。
       :nth-child(n)       p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
p:nth-child(2)      
     {      
     background:#ff0000;      
     }      
     注释：Internet Explorer 不支持 :nth-child() 选择器。
       :nth-last-child(n)       p:nth-last-child(2) 同上，从最后一个子元素开始计数。
p:nth-last-child(2)      
     {      
     background:#ff0000;      
     }
       :nth-of-type(n)       p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
p:nth-of-type(2)      
     {      
     background:#ff0000;      
     }
       :nth-last-of-type(n)       p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。
p:nth-last-of-type(2)      
     {      
     background:#ff0000;      
     }
       :last-child       p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。
p:last-child      
     {      
     background:#ff0000;      
     }
       :root       :root 选择文档的根元素。
:root      
     {      
     background:#ff0000;      
     }
       :empty       p:empty 选择没有子元素的每个 <p> 元素（包括文本节点）。
p:empty      
     {      
     background:#ff0000;      
     }
       :target       #news:target 选择当前活动的 #news 元素。
p:target      
     {      
     border: 2px solid #D4D4D4;      
     background-color: #e5eecc;      
     }      
     注释： Internet Explorer 8 以及更早的版本不支持 :target 选择器。
       :enabled       input:enabled 选择每个启用的 <input> 元素。
input[type="text"]:enabled      
     {      
     background-color: #ff0000;      
     }
       :disabled       input:disabled 选择每个禁用的 <input> 元素
input[type="text"]:disabled      
     {      
     background-color: #dddddd;      
     }
       :checked       input:checked 选择每个被选中的 <input> 元素。
input:checked      
     {      
     background-color: #ff0000;      
     }      
     注释：本例只在 Opera 中正确地工作！
       :not(selector)       :not(p) 选择非 <p> 元素的每个元素。
:not(p)      
     {      
     background-color: #ff0000;      
     }
       ::selection       ::selection 选择被用户选取的元素部分。
::selection      
     {      
     color:#ff0000;      
     } ::-moz-selection      
     {      
     color:#ff0000;      
     }
发布:holyan | 分类:css | 评论:0 | 浏览: