首页 > 代码库 > CSS选择器
CSS选择器
CSS的命名空间是大小写敏感的；选择器在HTML不区分大小写，在XML中大小写敏感。
1. 元素选择器
它是最常见也是最基本的 CSS 选择器，文档的元素就是最基本的选择器。
html {color:black;} h1 {color:blue;} h2 {color:silver;}
在 W3C 标准中，元素选择器又称为类型选择器，会匹配文档语言元素类型的名称，也就是说CSS样式可以应用于XML文件
<?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/css" href="http://www.mamicode.com/note.css"?> <note> <to>George</to> <from>John</from> <heading>Reminder</heading> <body>Don‘t forget the meeting!</body> </note>
note { font-family:Verdana, Arial;margin-left:30px;} to {font-size:28px; display: block;} from {font-size:28px; display: block;} heading {color: red; font-size:60px; display: block;} body {color: blue; font-size:35px; display: block;}
2. 类选择器
要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器，允许以一种独立于文档元素的方式来指定样式，
.error{color:red;}
也可以与其他元素结合使用，如元素选择器，通配符等
*.important {color:red;} p.urgent {color:yellow;}
通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）
.important.urgent {background:silver;}
3. ID选择器
ID 同类选择器一样，利用它们可以不用考虑文档的层次结构，可以给id 和class 属性设定任何值，但不能以数字或特殊符号开头
4. 属性选择器
可以根据属性名进行选择，多个属性链接在一起即可
a[href] {color:red;} a[href][title] {color:red;}
可以选择特定属性名，属性值的元素(完全匹配)
input[name=‘password‘]{ ...}
也可以部分匹配
a[rel~="copyright"] { ... } /* 属性值以空格分开，其中一个值为"copyright"*/ a[hreflang|="en"] /* 值以连字符-分隔，且以en开头，如en-US*/
a[href*="example.com.cn"] {color: red;} /* 值包含example.com.cn的元素*/
a[href^="mailto"] {color: red;} /* 值以mailto开头的元素*/
a[href$=".png"] {color: red;} /* 值以.png结尾的元素*/
5. 上下文选择器
上下文选择器可以和通配符结合使用，在某些生成的组件中，需定位的元素和其父元素经常会有一定的层级关系
后代选择器
body p{line-height: 1.5em;} /*body下面所有的p元素*/ div * input[type=‘text‘]{border:1px solid gray;} /*input元素和div中间必有某个元素 */
子元素选择器
body > p{...} /*body的直接子元素p*/ div ol>li p{...} /*div下面的ol元素的子元素li下面的p元素*/
兄弟元素选择器
h1 ~ pre{...} /*h1同级后面的pre元素, 共一个parent*/ h1.opener + h2{...} /*紧邻在h1后面的兄弟元素h2，共一个parent*/
6. 伪类选择器
伪类可分为UI伪类和结构化伪类
UI伪类
链接是最常使用UI 伪类的元素，由于这4 个伪类的特指度（本章后面再讨论特指度）相同，如果不按照这里列出的顺序使用它们，浏览器可能不会显示预期结果
a:link{...} a:visited{...} a:hover{...} a:active{...}
其他常用的有 :focus, :enable, :disable, :checked, :target, :lang
input:focus {border:1px solid blue;} input:enabled{...} input:disabled{...} input:checked{...} #more_info:target {background:#eee;}
结构化伪类
:nth-last-child(1)和:last-child(1)等价，:nth-child(1)同:first-child等价
tr:nth-child(2n+1) /* represents every odd row of an HTML table */ tr:nth-child(odd) /* same */ tr:nth-child(2n+0) /* represents every even row of an HTML table */ tr:nth-child(even) /* same */ /* Alternate paragraph colours in CSS */ p:nth-child(4n+1) { color: navy; } p:nth-child(4n+2) { color: green; } p:nth-child(4n+3) { color: maroon; } p:nth-child(4n+4) { color: purple; } li:nth-child(5) tr:nth-last-child(-n+2) /* represents the two last rows of an HTML table */ foo:nth-last-child(odd) /* represents all odd foo elements in their parent element, counting from the last one */ ol > li:last-child
7. 伪元素
::first-letter pseudo-element applies to block-like containers such as block, list-item, table-cell, table-caption, and inline-block elements.
p::first-line { text-transform: uppercase } p::first-letter { color: green; font-size: 200% }
以下代码常用于清除浮动
.clearfix:after { content:"."; display:block; height:0; visibility:hidden; clear:both; }
8. 命名空间
@namespace foo url(http://www.example.com); foo|h1 { color: blue } /* The first rule (not counting the @namespace at-rule) will match only h1 elements in the "http://www.example.com" namespace. */ foo|* { color: yellow } /* The second rule will match all elements in the "http://www.example.com" namespace. */ |h1 { color: red } /* The third rule will match only h1 elements with no namespace.*/ *|h1 { color: green } /* The fourth rule will match h1 elements in any namespace (including those without any namespace).*/ h1 { color: green } /* The last rule is equivalent to the fourth rule because no default namespace has been defined.*/
8. 更多信息
CSS3选择器：http://www.w3.org/TR/css3-selectors/
CSS2选择器：http://www.w3.org/TR/CSS2/selector.html
小结：
- CSS样式既可应用于HTML，可以应用于XML文件
- 可用ID和类选择器较方便的应用独立于文档元素的方式来指定样式
- 为了防止类定义过多导致的类泛滥，可考虑样式的继承规则，属性选择器，上下文选择器，兄弟元素选择器以及伪类选择器。
- 可以为CSS添加命名空间防止样式的冲突