CSS常用选择器

CSS（Cascading Style Sheet），中文译为层叠样式表，可以让设计者方便灵活地控制Web页面的外观表现。CSS是1996年由W3C审核通过并且推荐使用的。CSS的引入，就是为了使HTML语言更好地适应网页的美工设计。CSS详细规范说明要查阅CSS手册，或登录W3C官网（http://www.w3c.org）。
使用CSS，要了解常用的各种选择器。
1.标记选择器：
一个HTML页面由很多不同的标记组成，而CSS选择器就是声明哪些标记采用哪种CSS样式。每一种HTML标记的名称都可以作为相应的标记选择器的名称。示例：

  <style> 
h1 { 
color: red; 
font-size:25px; 
} 
</style>

每一个选择器都包含选择器本身、属性和值，其中属性和值可以设置多个，从而实现对同一标记名称声明多种样式。
CSS语言对于所有属性和值都有相对严格的要求，如果声明的属性在CSS规范中没有，或者某个属性的值不符合该属性的要求，都不能使该CSS语句生效。
还有一种通配选择器“*”，表示其中设置的样式会应用于所有的网页元素。示例：

  * { 
font-family:Verdada,Arial,sans-serif; 
}

2.类选择器：
类选择器的名称可以由用户自定义，属性和值与标记选择器一样，必须符合CSS规范。示例：

  <html><head><title>class选择器</title> 
<style type="text/css"> 
.red{ 
color: red; 
font-size:18px; 
} 
.green{ 
color: green; 
font-size:20px; 
} 
</style></head> 
<body> 
<p class="red">class选择器1</p> 
<p class="green">class选择器2</p> 
<h3 class="green">h3使用class</h3> 
</body></html>

任何一个class选择器都适用于所有HTML标记，只需要用HTML标记的class属性即可。
3.ID选择器：
ID选择器只能在HTML页面中使用一次，利用HTML标记中的ID属性，有更强的针对性。示例：

  <html><head><title>ID选择器</title> 
<style type="text/css"> 
#bold{ 
font-weight: bold; 
} 
#green{ 
font-size:30px; 
color:#009900; 
} 
</style></head> 
<body> 
<p id="bold">ID选择器1</p> 
<p id="green">ID选择器2</p> 
</body></html>

ID选择器也可以用于多个标记，但因为JavaScript等脚本语言也使用id，如果一个HTML中有两个相同的id标记，会导致查找id时出错，所以一个id最好只能赋予一个HTML标记。ID选择器不支持像class那样的多风格同时使用。
4.交集选择器：
交集选择器由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集，其中第1个必须是标记选择器，第2个必须是类别选择器或者ID选择器。交集选择器是两个选择器连续书写，之间不能有空格。示例：

  <html><head><title>交集选择器</title> 
<style type="text/css"> 
p{ /*标记选择器*/ 
color: blue; 
} 
p.special{ /*标记.类别选择器*/ 
color: red; 
} 
.special{ /*类别选择器*/ 
color: green; 
} 
</style></head> 
<body> 
<p >普通段落文本（蓝色）……</p> 
<h3 >普通标题文本（黑色）……</h3> 
<p class="special">指定了.special类别的段落文本（红色）……</p> 
<h3 class="special">指定了.special类别的标题文本（绿色）……</h3> 
</body></html>

上面的代码中，定义了

标记的样式，也定义了.special类别的样式，此外还单独定义了p.special用于特殊的控制，而这个p.special中定义的风格样式仅仅适用于

标记，而不会影响使用了.special样式的其他标记。
5.并集选择器：
并集选择器，也称为集体声明，是同时选中各个基本选择器所选择的范围。任何形式的选择器都可以作为并集选择器的一部分。并集选择器是多个选择器通过逗号连接而成。示例：

  <html><head><title>并集选择器</title> 
<style type="text/css"> 
h1,h2,h3.h4.h5.p{ /*并集选择器*/ 
color: purple; 
font-size:15px; 
} 
h2.special,.special,#one{ /*集体声明*/ 
text-decoration:underline; 
}

  </style></head> 
<body> 
<h1 >示例文字h1……</h1> 
<h2 class=”special” >示例文字h2……</h2> 
<h3 >示例文字h3……</h3> 
<p >示例文字p1……</p> 
<p class="special">示例文字p2……</p> 
<p id="one">示例文字p3……</p> 
</body></html>

显示结果中，所有颜色都是紫色purple，字体大小都为15px。
对于网站中的一些小页面，例如弹出的小对话框和上传附件的小窗口等，希望这些页面中所有标记都使用同一种CSS样式，可以使用全局选择器“*”，就不用逐个声明了。
6.后代选择器：
可以通过嵌套的方式对特殊位置的HTML标记进行声明，把外层标记写在前面，内层标记写在后面，之间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。嵌套示例：

 <p>最外层文字<span>中间层文字<b>最内层文字</b></span></p>

后代选择器示例：

  <html><head><title>后代选择器</title> 
<style type=”text/css”> 
p span{ /*嵌套声明*/ 
color: red; 
} 
span{
color:blue; 
} 
</style></head> 
<body> 
<p >嵌套使<span>用CSS（红色）</span>标记的方法</p> 
     嵌套之外的<span>标记（黑色）</span>不生效 
</body></html>

通过将span选择器嵌套在p选择器中进行声明，显示效果只适用于

和

之间的标记，而其外的

<span>标记并不产生任何效果。 
后代选择器的使用很广泛，不仅标记选择器可以这样组合，类别选择器和ID选择器都可以进行嵌套。示例： 
  .special i{color:red;} 
  #one li{padding-left:5px;} 
  td.out .inside strong{font-size:16px;} 
三层嵌套的对应HTML为： 
<td class="out"> 
<p class="inside"> 
        其他内容<strong>CSS控制的部分</strong>其他内容 
</p> 
</td>

选择器的嵌套在CSS编写中可以大大减小对class和id的声明，因此在构建页面HTML框架时通常只给外层标记定义class或者id，内层标记能通过嵌套表示的则利用嵌套的方式，而不需要再定义新的class或者专用id。只有当子标记无法利用此规则时，才单独进行声明。例如一个

标记，而需要对其中某个
单独设置CSS样式时才赋给该
一个单独id或者类别，而其他
同样采用“ul li{…}”的嵌套方式设置。
7.子选择器：
后代选择器产生的影响不仅限于元素的直接后代，而且会影响到它的各级后代。因此，CSS还规定了子选择器，也就是只对直接后代有影响的选择器，而对以后的多个层的后代不产生作用。子选择器是用>连接。示例：

  p>span{ 
color:blue; 
}

相邻兄弟选择器：
相邻选择器描述的是页面标记里两个元素左右相邻的关系。示例：

  li+li { 
color:blue; 
}

相邻选择器用+来连接。
9. 属性选择器：

  a[link]{ 
text-decoration:none; 
} 
input[type="text"]{ 
width:33%; 
}

10.伪类：
常用的伪类是基于超链接的a:link、a:visited、a:hover和a:active，分别表示平常的超链接、以点击过的超链接、鼠标移动经过的超链接和激活的超链接样式。
还有3个伪类，分别是first-child、:focus和:lang(n)。
11.伪元素：
开发者还可以使用伪元素，而不必依赖元素标记来样式化Web文档里的某个项目。示例：

     p:first-letter{
font-size:200%; 
font-weight:bold; 
}

伪元素包括：first-letter、:first-line、:before和:after。可以使用“:first-line”样式化第1行元素：

     p:first-line{
font-size:200%; 
font-weight:bold; 
}

以上选择器可以总结为下表：
基本选择符
名称
说明
版本
*
通配选择符
匹配所有元素
CSS2
E
类型选择符
匹配指定标记的元素
CSS1
E#myid
ID选择符
匹配唯一标识id属性为myid的E元素
CSS1
e.myclass
类选择符
匹配class属性为myclass的所有E元素
CSS1

关系选择符
名称
说明
版本
E F
包含选择符
选择所有被E元素包含的F元素
CSS1
E,F,G
选择符分组
选择所有的E元素、F元素和G元素
CSS1
E>F
子对象选择符
选择所有作为E元素的子元素F
CSS2
E+F
相邻选择符
选择紧贴在E元素之后的F元素
CSS2
CSS新增了很多选择符，并兼容CSS1和CSS2中的选择符。
1.属性选择符：
CSS3中，属性选择符已经构成了非常强大的标记属性过滤体系：
属性选择符
说明
版本
E[attr]
选择具有attr属性的E元素
CSS2
E[attr=”val”]
选择具有attr属性且属性值等于value的E元素
CSS2
E[attr~=”val”]
选择具有attr属性且属性的空格分隔的字词列表中其中一个等于val的E元素
CSS2
E[attr|=”val”]
选择具有attr属性且属性值的连字符分隔的字词列表中由val开始的E元素
CSS2
E[attr^=”val”]
选择具有attr属性且属性值以val开头的字符串的E元素
CSS3
E[attr$=”val”]
选择具有attr属性且属性值以val结尾的字符串的E元素
CSS3
E[attr*=”val”]
选择具有attr属性且属性值包含val的字符串的E元素
CSS3
2.结构伪类选择符：
可以通过文档结构的相互关系来匹配特定的元素。对于有规律的文档结构，可以减少class属性和id属性的定义。
伪类选择符
说明
版本
E:root
选择匹配E所在文档的根元素
CSS3
E:not(s)
选择匹配所有不匹配简单选择符s的E元素
CSS3
E:empty
匹配没有任何子元素（包括text节点）的元素E
CSS3
E:target
匹配当前链接地址指向的E元素
CSS3
E:first-child
匹配父元素的第一个子元素E
CSS2
E:last-child
匹配父元素的最后一个子元素E
CSS3
E:nth-child(n)
匹配父元素的第n个子元素E
CSS3
E:nth-last-child(n)
匹配父元素的倒数第n个子元素E
CSS3
E:only-child
匹配父元素仅有的一个子元素E
CSS3
E:first-of-type
匹配同类型中的第一个同级兄弟元素E
CSS3
E:last-of-type
匹配同类型中的最后一个同级兄弟元素E
CSS3
E:only-of-type
匹配同类型中的唯一一个同级兄弟元素E
CSS3
E:nth-of-type(n)
匹配同类型中的第n个同级兄弟元素E
CSS3
E:nth-last-of-type(n)
匹配同类型中的倒数第n个同级兄弟元素E
CSS3
其中，E:nth-child(n)中的参数n，可以是一个数字，可以是关键字odd或even，可以是公式2n或2n-1等，n的索引起始值为1。
3.状态伪类选择符：
可以设置元素处在某种状态下的样式：
伪类选择符
说明
版本
E:link
设置超链接a在未被访问前的样式
CSS1
E:visited
设置超链接a在其地址已被访问过的样式
CSS1
E:hover
设置元素在鼠标悬停其上的样式
CSS1/CSS2
E:active
设置元素在被用户激活（在鼠标单击与释放之间）时的样式
CSS1/CSS2
E:focus
设置元素在成为焦点（onfocus事件发生）时的样式
CSS1/CSS2
E:checked
匹配表单元素上处于选中状态的元素E（radio和checkbox）
CSS3
E:enabled
匹配表单上处于可以状态的元素E
CSS3
E:disabled
匹配表单上处于禁用状态的元素E
CSS3
4.伪元素选择符：
CSS3还有一种伪元素选择符，针对CSS已经定义好的伪元素使用：
伪元素选择符
说明
版本
E:first-letter
/E::first-letter
设置对象内的第一个字符的样式
CSS1/CSS3
E:first-line
/E::first-line
设置对象内的第一行的样式
CSS1/CSS3
E:before/E::before
设置在对象前发生的内容，与content属性一起用
CSS2/CSS3
E:after/E::after
设置在对象后发生的内容，与content属性一起用
CSS2/CSS3
E::selection
设置对象被选择时的颜色
CSS3
CSS3中的伪元素选择符，冒号都改成了双冒号。

秒客网

CSS常用选择器

相关文章