WonderCSS

让我们来了解20个常用CSS选择器吧

少年们,或许你对 CSS 已经有所领悟,自信已经手法风骚、意识放荡掌握样式表的一切要诀。那些 id、class、属性选择器了然于胸,但真的是这样么?曾经如是之的我近日备受打击,在mozilla论坛上看到一个帖子,系统的解析样式表中30个最常用的CSS选择器,看完顿感小子忒也轻狂。压缩了几项后摘录下来以备后续研究,得以真正领略CSS巨大的灵活性。

1 * 星号


* {
    margin: 0;
    padding: 0;
   }

* 星状选择符会在页面上的每一个元素上起作用。web设计者经常用它将页面中所有元素的margin和padding设置为0。 * 选择符也可以在子选择器中使用。


#header * {
     border-size: 0;
   }

上面的代码中会应用于 id 为 header 元素的所有子元素中。

除非必要,我不建议在页面中过的的使用星状选择符,因为他的作用域太大,相当耗浏览器资源。

2 # 井号

# 井号作用于有相应id的元素。对于它的知识太普及了,也无需做例子。id是我们最常用的css选择器之一。id选择器的优势是精准,高优先级(优先级基数为100,远高于class的10),作为javascript脚本钩子的不二选择,同样缺点也很明显优先级过高,重用性差,所以在使用id选择器前,我们最好问下自己,真的到了非用id选择器的地步?

3 . 半角句号

.这是一个class(类)选择器。可以说使用最多的就是它了,class选择器与id选择器的不同是class选择器能作用于期望样式化的一组元素。当然有些用法你或许不知道,比如 class联用

4 X 仅写标签类


ul {
     list-style:none;
   }

标签选择器。使用标签选择器作用于作用域范围内的所有对应标签。优先级仅仅比 * 高,通常我们都是在样式表的起始部分做定义。

5 X Y 后代选择器


ul a {
     text-decoration: none;
   }

这也是我们最常用的一种选择器——后代选择器。用于选取X元素下子元素Y,要留意的点是,这种方式的选择器将选取其下所有匹配的子元素,无视层级,所以有的情况是不宜使用的,比如上述的代码去掉ul下的所有a的下划线,但ul里面还有个li,我不希望ul下的li的a去掉下划线。使用此后代选择器的时候要考虑是否希望某样式对所有子孙元素都起作用。

6 X: 伪类


a:link,
a:visited,
a:active,
a:hover {
     text-decoration: none;
   }

这个大家都清楚,使用:link伪类作用于未点击过的链接标签。:visited伪类作用于点击过的链接。:hover伪类作用于鼠标浮动的链接。:active伪类作用于鼠标击中时的链接。

:hover 是个值得注意的条件,它在非IE6浏览器中还能作用在其他元素上,如 div 。由此可引申出很多“活泼”的用法,实力如 无需 JS 制作纯 CSS 子菜单

7 X+Y 相邻选择器


ul + p {
      color:red;
   }

上述代码中就会匹配在 ul 后面的第一个 p ,将段落内的文字颜色设置为红色(只匹配第一个元素)。IE6不识别。

8 X > Y 子选择器


ul > p {
      color:red;
   }

子选择器。与后代选择器X Y不同的是,子选择器只对X下的直接子级Y起作用。我称之为“亲儿子”,详细了解 关于CSS样式表里面的大于号 IE6不识别。

9 X ~ Y 相邻选择器


ul ~ p {
      color:red;
   }

相邻选择器,与前面提到的 X+Y 不同的是,X~Y 匹配与X相同级别的所有Y元素,而 X+Y 只匹配第一个。IE6不识别。

10 X[Y] 属性选择


a[title] {
      color: green;
   }

属性选择器。比如上述代码匹配的是带有title属性的链接元素。

11 X[Y=”Z”] 属性结合参数选择


a[title="hello"] {
      color: green;
   }

在上个用法上进行了扩展,在属性上预设了参数作为精确条件。相似更多关于属性选择的方式请参看 详细了解CSS属性选择器

12 X:not(selector) 排除选择


div:not(#leftbox) {
      float:right;
   }

否定伪类选择器用来在匹配元素时排除某些元素。在上面的例子中,设定除了id为leftbox的div元素字体漂浮方向为right。

13 X::pseudoElement 给元素片段添加样式

::伪类用于给元素片段添加样式。比如一个段落的第一个字母或者第一行。需要注意的是,这个::伪类只能用于块状元素。

下面的代码设定了段落中第一个字母的样式:


p::first-letter {
      float: left;
      font-size: 2em;
      font-weight: bold;
      font-family: cursive;
      padding-right: 2px;
   }

下面的代码中设定了段落中第一行的样式:


p::first-line {
      font-weight: bold;
      font-size: 1.2em; 
  }

14 X:nth-child(n) 序号选择

这个伪类用于设定一个序列元素(比如li、tr)中的第n个元素(从1开始算起)的样式。


tr:nth-child(2n) {
      background-color: gray;
   }

看一个更灵活的用法,在上面例子中设定第偶数个元素的样式,可以用它来实现隔行换色。

15 X:nth-last-child(n) 反向序号选择


li:nth-last-child(2) {
      color: red;
   }

与X:nth-child(n)功能类似,不同的是它从一个序列的最后一个元素开始算起。上面例子中设定倒数第二个列表元素的字体颜色。

16 X:nth-of-type(n) 类型顺序选择


ul:nth-of-type(3) {
      border: 1px solid black;
   }

与X:nth-child(n)功能类似,不同的是它匹配的不是某个序列元素,而是元素类型。例如上面的代码设置页面中出现的第三个无序列表ul的边框。同样 X:nth-last-of-type(n) 是逆向算起。

17 X:first-child

:first-child伪类用于匹配一个序列的第一个元素。我们经常用它来实现一个序列的第一个元素或最后一个元素的上(下)边框,如:


ul:nth-last-of-type(3) {
      border: 1px solid black;
   }

18 X:last-child

作为配对出现的 X:last-child 与:first-child类似,它匹配的是序列中的最后一个元素。

19 X:only-child 出现次数选择

这个伪类用的比较少。在下面例子中匹配的是div下有且仅有一个的p,也就是说,如果div内有多个p,将不匹配。


div p:only-child {
      color: red;
   }

如示:


<div><p>1111</p></div>
<div>
      <p>2222</p>
      <p>3333</p>
</div>

20 X:only-of-type


li:only-of-type {
      font-weight: bold;
   }

这个伪类匹配的是,在它上级容器下只有它一个子元素,它没有邻居元素。例如上面代码匹配仅有一个列表项的列表元素。

以上仅列出了一些常用的CSS选择器。

如果你网站的受众正在使用 IE6 这类老版浏览器,在使用上面css选择器时一定要考虑它是否兼容。当然,这不应成为阻止我们学习并使用它的理由,因为互联网正在以我们无法预估的速度向前迈进着!

By 于湛 发布于 2013.03.28 2,839 次浏览

让我们来了解20个常用CSS选择器吧》上有1条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注