一、五大基本选择符
1. *(通配符)
*通配符选择器,经常用于css reset(样式重置),清理标签的默认样式,但现在一般不提倡直接使用*了,主要是*会匹配所有标签,相当耗资源。*在css的优先级中是最低的。
* {margin: 0; padding: 0;} 也可以用*来匹配某一元素下的所有子元素:
#container * {border: 1px solid black;}
2. #X(ID)
#+id名,这是日常常用的css选择器,用于匹配id为XXX的元素,id选择器的优势是精准,高优先级(优先级基数为100,远高于class的10),作为javascript脚本钩子的不二选择,同样缺点也很明显:优先级过高,重用性差,所以在使用id选择器前,我们最好问下自己,真的到了非用id选择器的地步?
#container { width: 960px; margin: auto;}
3. .X(类)
.+class名,标准的样式选择器,与id选择器的区别是样式选择器可以选择多个元素。样式选择器是提倡使用的选择器,也是日常前端人员用到最多的选择器了。
.error {color: red;}
4. X Y(后代)
li a {text-decoration: none;}
目前非常常用的css选择器,用于选取X元素下子元素Y,这里有个要留意的点是,这种方式的选择器将选取其下所有匹配的子元素,无视层级,所以有的情况是不宜使用的,比如上述的代码去掉li下的所有a的下划线,但li里面还有个ul,我不希望ul下的li的a去掉下划线。
使用此子孙选择器的时候要考虑是否希望某样式对所有子孙元素都起作用。
这种子孙选择器还有个作用,就是创建类似命名空间的作用。比如上述代码样式的作用域明显为li。
5. X(标签)
a { color: red; }
ul { margin-left: 0; }
标签选择器,优先级仅仅比*高,常用于css reset(样式重置)。
二、除IE6外浏览器支持的css选择器
6. X:link X:visited X:hover X:active
a:link { color: red; }
a:visted { color: purple; }
伪类选择器,visted已被访问过的样式,hover鼠标经过的样式,link未被访问的样式。三种伪类选择器常用于链接,但不是说只适用于链接,可惜的是IE6只支持将这三种伪类选择器作用于链接。
这里说明一点,由于CSS优先级的关系(后面比前面的优先级高),这几个伪类的书写顺序,一般是link、visted、hover、active。
7. X + Y(相邻)
ul + p { color: red;}
相邻选择器,上述代码中就会匹配在ul后面的第一个p,将段落内的文字颜色设置为红色。(只匹配一个元素)
8. X > Y(子)
子选择器,留意X > Y与X Y的区别,前者是子孙选择器,即无视层级,而X Y是字选择器,只匹配X下的子元素Y。
从理论上来讲X > Y是值得提倡选择器,可惜IE6不支持。
9. X ~ Y
ul ~ p {color: red;}
相邻选择器,与X+Y类似,不同的是X ~ Y匹配的是元素集合,如上述代码,匹配的是所有ul相邻的p
10. X[title]
a[title] { color: green;}
属性选择器,如上述代码匹配的是带有title属性的链接元素。
11. X[title=""]
a[title="maomao"] {color:#096;}
属性选择器,上述代码不只匹配带有title属性,更匹配title属性等于maomao的链接元素。[]内不只可用title属性,还可以使用其他属性。
12. X[title*=""]
a[title*="mao"] {color:#096;}
加了*号,意味着是模糊匹配,如上述代码,会匹配title属性为mao或maomao或maomao520等带有maomao的链接属性。
13. X[title^=""]
a[title^="maomao"]{color:#096;}
模糊匹配,与*的作用相反,^起到排除的作用,比如上述代码,会匹配title属性不带有maomao的链接属性。
14. X[href$=""]
a[href$=".png"] { color: red;}
在属性选择器中多一个$符号,用于匹配结尾为特定字符串的元素,比如上述代码匹配的就是href属性值的结尾为.png的链接。
15.X[data-*=""]
a[data-filetype="image"] {color: red;}
data-filetype这个属性目前用的实在不多,但有些场合非常好用。比如我要匹配所有的数据类型为图片的链接,如果使用X[href$=""]的方式如下:
a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"] {color: red;}
而使用data-filetype,只要:
a[data-filetype="image"] {color: red;}
当然前提是你给每一个链接加上data-filetype属性。
16.X[foo~=""]
a[data-info~="external"] {color: red;}
a[data-info~="image"] {border: 1px solid black;}
这也是非常少用的选择器,加上~号,有一种情况特别适用,比如你有个data-filetype=”external image”属性,这时候我希望分别针对external和image样式控制。
a[data-info~="external"] {color: red;}
a[data-info~="image"] {border: 1px solid black;}
上述代码会匹配data-filetype=”external”、data-filetype=”image”、data-filetype=”external image”的a。
17.X:checked
input[type=radio]:checked {border: 1px solid black;}
这个伪类选择器只用于匹配带有checked属性的元素,比如radio、checkbox即单选框和多选框。
目前这个伪类选择器,IE9下都不支持,非IE浏览器基本上都支持。
三、除IE8以下的浏览器支持的css选择器
18.X:after
.clearfix:after {content: "";display: block;clear: both; visibility: hidden;font-size: 0; height: 0;}
.clearfix {*display: inline-block;_height: 1%;0}
我想上面这段代码,很多朋友都非常熟悉,是清理浮动时常用的hack方法。:after伪类与content结合使用,用于往元素类追加内容。:after伪类还有个妙用:用于产生阴影。
19.X:hover
div:hover {background: #e3e3e3;}
hover在前面已经介绍过,IE6下只支持a的hover。
这里提到一个很有意思的东西,即使用border-bottom: 1px solid black; 要好于text-decoration: underline;从实际的效果来看,使用border-bottom的距离比text-decoration来的合理,但使用border-bottom存在一些风险,比如颜色问题。
20.X:not(selector)
div:not(#container) {color: blue;}
否定伪类选择器,这还是比较好理解的,上述将会把非id为container的div的字体颜色设置为蓝色。
:not伪类IE8并不支持,IE9已经支持了。
21.X::pseudoElement
p::first-line {font-weight: bold; font-size: 1.2em;}
::伪类,用于给元素的片段添加样式,这如何理解呢?比如你要让一个段落的第一行的文字加粗,那么这个选择器是不二之选。
除此之外,你还可以给第一个字加上特殊样式,这个应用还是非常常见的
p::first-letter { float: left;font-size: 2em;font-weight: bold;font-family: cursive; padding-right: 2px;}
IE6居然支持!这足以让人惊喜的…..
四、css3 结构性伪类选择器
22.X:nth-child(n)
li:nth-child(3) {color: red;}
:nth-child(n),用于匹配索引值为n的子元素。索引值从1开始。
X:nth-child()用法实际上有三种变化。X:nth-child()更强大的用处在于奇偶匹配。有兴趣的请看《Understanding :nth-child Pseudo-class Expressions》,《CSS3 :nth-child()伪类选择器》
23.X:nth-last-child(n)
li:nth-last-child(2) {color: red;}
:nth-child(n),是从第一个开始算索引,而X:nth-last-child(n)是从最后一个开始算索引。
24.X:nth-of-type(n)
ul:nth-of-type(3) {border: 1px solid black;}
nth-of-type与nth-child的效果是惊人的相似,想要更多的了解nth-of-type请看《Alternative for :nth-of-type() and :nth-child()》,《:nth-of-type(N)》。
25.X:nth-last-of-type(n)
ul:nth-last-of-type(3) {border: 1px solid black;}
:nth-last-child效果相似。
26.X:first-child
ul li:first-child {border-top: none;}
匹配子集的第一个元素。IE7就可以支持了,这个伪类还是非常有用的。
27.X:last-child
ul > li:last-child {color: green;}
与:first-child效果相反
留意IE8支持:first-child,但不支持:last-child。
28.X:only-child
div p:only-child {color: red;}
这个伪类一般用的比较少,比如上述代码匹配的是div下的有且仅有一个的p,也就是说,如果div内有多个p,将不匹配。
29.X:only-of-type
li:only-of-type { font-weight: bold;}
与:only-child类似。
30.X:first-of-type
ul:first-of-type{font-weight: bold;}
等价于:nth-of-type(1),匹配集合元素中的第一个元素。
尊重原创:http://www.36ria.com/3422
CSS3 选择器
在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。
"CSS" 列指示该属性是在哪个 CSS 版本中定义的。(CSS1、CSS2 还是 CSS3。)
选择器 | 例子 | 例子描述 | CSS |
---|---|---|---|
.class | .intro | 选择 class="intro" 的所有元素。 | 1 |
#id | #firstname | 选择 id="firstname" 的所有元素。 | 1 |
* | * | 选择所有元素。 | 2 |
element | p | 选择所有 <p> 元素。 | 1 |
element,element | div,p | 选择所有 <div> 元素和所有 <p> 元素。 | 1 |
element element | div p | 选择 <div> 元素内部的所有 <p> 元素。 | 1 |
element>element | div>p | 选择父元素为 <div> 元素的所有 <p> 元素。 | 2 |
element+element | div+p | 选择紧接在 <div> 元素之后的所有 <p> 元素。 | 2 |
[attribute] | [target] | 选择带有 target 属性所有元素。 | 2 |
[attribute=value] | [target=_blank] | 选择 target="_blank" 的所有元素。 | 2 |
[attribute~=value] | [title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素。 | 2 |
[attribute|=value] | [lang|=en] | 选择 lang 属性值以 "en" 开头的所有元素。 | 2 |
:link | a:link | 选择所有未被访问的链接。 | 1 |
:visited | a:visited | 选择所有已被访问的链接。 | 1 |
:active | a:active | 选择活动链接。 | 1 |
:hover | a:hover | 选择鼠标指针位于其上的链接。 | 1 |
:focus | input:focus | 选择获得焦点的 input 元素。 | 2 |
:first-letter | p:first-letter | 选择每个 <p> 元素的首字母。 | 1 |
:first-line | p:first-line | 选择每个 <p> 元素的首行。 | 1 |
:first-child | p:first-child | 选择属于父元素的第一个子元素的每个 <p> 元素。 | 2 |
:before | p:before | 在每个 <p> 元素的内容之前插入内容。 | 2 |
:after | p:after | 在每个 <p> 元素的内容之后插入内容。 | 2 |
:lang(language) | p:lang(it) | 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。 | 2 |
element1~element2 | p~ul | 选择前面有 <p> 元素的每个 <ul> 元素。 | 3 |
[attribute^=value] | a[src^="https"] | 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 | 3 |
[attribute$=value] | a[src$=".pdf"] | 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。 | 3 |
[attribute*=value] | a[src*="abc"] | 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。 | 3 |
:first-of-type | p:first-of-type | 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 | 3 |
:last-of-type | p:last-of-type | 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 | 3 |
:only-of-type | p:only-of-type | 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 | 3 |
:only-child | p:only-child | 选择属于其父元素的唯一子元素的每个 <p> 元素。 | 3 |
:nth-child(n) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个 <p> 元素。 | 3 |
:nth-last-child(n) | p:nth-last-child(2) | 同上,从最后一个子元素开始计数。 | 3 |
:nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 | 3 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 同上,但是从最后一个子元素开始计数。 | 3 |
:last-child | p:last-child | 选择属于其父元素最后一个子元素每个 <p> 元素。 | 3 |
:root | :root | 选择文档的根元素。 | 3 |
:empty | p:empty | 选择没有子元素的每个 <p> 元素(包括文本节点)。 | 3 |
:target | #news:target | 选择当前活动的 #news 元素。 | 3 |
:enabled | input:enabled | 选择每个启用的 <input> 元素。 | 3 |
:disabled | input:disabled | 选择每个禁用的 <input> 元素 | 3 |
:checked | input:checked | 选择每个被选中的 <input> 元素。 | 3 |
:not(selector) | :not(p) | 选择非 <p> 元素的每个元素。 | 3 |
::selection | ::selection | 选择被用户选取的元素部分。 | 3 |