30个你必须记住的CSS选择符

2015-8-31来源:CSS教程人气:1166

30个你必须记住的CSS选择符

所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性。在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用。

1.*

* {   margin: 0;   padding: 0;  }

对于初学者,在学习更多高级选择器之前,最先了解的选择器。

星号选择器将匹配页面里的每一个元素。很多开发者使用这个技巧将外边距和内边距重置为零。虽然在快速测试时这确实很好用,但我建议你永远不要再生产代码中使用它。它给浏览器带来大量不必要的负担。

* 也能作为子选择符使用。

#container * {   border: 1px solid black;  } 

这将匹配#container div的每一个后代元素。再次强调,尽量不要使用这种技术。

查看例子

兼容性

2.#X

#container {     width: 960px;     margin: auto;  }  

井号前缀允许我们选择id。这是最常见的用法,不过应该慎重使用ID选择器。

反复问自己:我一定需要id来匹配要选择的元素吗?

id选择符是唯一的,不允许重复使用。如果可能的话,先尝试使用一个标签名称,一个新的HTML5元素,甚至是一个伪类。

查看例子

兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

3. .X

.error {    color: red;  }

现在介绍的是类选择符。id和类的不同之处在于后者可以多次使用。当你想给一组元素应用样式的时候可以使用类选择符。另外,当你紧想给特殊元素应用样式的时候才使用id。

查看例子

兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

4. X Y

li a {    text-decoration: none;  }

下一个最常用的选择符是后代选择符。当你需要给你的选择符增加特殊性的时候你可以使用。例如,如果你只想匹配无序列表下的锚元素?此时后代选择符派上用场。

小贴士——如果你的选择符看起来像这样 X Y Z A B.error,那你就错了。时刻问自己使用这高的权重是否有必要。

查看例子

兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

5. X

a { color: red; }  ul { margin-left: 0; }   

如果你想匹配页面上的所有的元素,根据他们的类型,而不是id或类名?显而易见,使用类型选择符。如果你需要选择所有的无序列表,请使用ul {}。

查看例子

兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

6. X:visited and X:link

a:link { color: red; }  a:visited { color: purple; } 

我们使用:link 伪类选择符选择所有已经被点击过的锚标签。

此外,我们也有:visited伪类选择符,正如你期望的,允许我们仅给页面上被点击过的或被访问过的锚标签应用样式。

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

7. X + Y

ul + p {     color: red;  } 

这被称作相邻选择符。它将只选择紧贴在X元素之后Y元素。上面的例子,仅每一个ul之后的第一个段落元素的文本为红色。

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

8. X > Y

div#container > ul {    border: 1px solid black;  }  

X Y和X > Y之间的不同点是后者只选择直接子代。例如,考虑如下的标记。

<div id="container">     <ul>        <li> List Item          <ul>             <li> Child </li>          </ul>        </li>        <li> List Item </li>        <li> List Item </li>        <li> List Item </li>     </ul>  </div> 

选择符#container > ul将只选择id为container的div的直接子代ul。它不匹配更深层的li的子代的ul。

因此,使用子代选择符有性能上的优势。事实上,这同样适用于基于css选择器的javascript引擎。

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

9. X ~ Y

ul ~ p {     color: red;  }  

这是兄弟选择符和X + Y一样,然而,它没有约束。与相邻选择符(ul + li)仅选择前一个选择符后面的第一个元素比起来,兄弟选择符更宽泛。它会选择,我们上面例子中更在ul后面的任何p元素。

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

10. X[title]

a[title] {     color: green;  } 

被称为属性选择器,在我们上面的例子里,这只会选择有title属性的锚标签。没有此属性的锚标签将不受影像。但如果你需要更多的特性怎么办呢?呵呵……

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

11. X[href="foo"]

a[href="http://net.tutsplus.com"] {    color: #1f6053; /* nettuts green */  } 

上面的代码段将给所有href属性为http://net.tutsplus.com的锚标签添加样式;他们将会显示为我们的品牌绿色。所有其他的锚标签将不受影响。

注意我们将href值用引号包裹。记住,当使用Javascript的css选择符引擎时也这么做。如果可能的话,尽可能使用css3选择符代替非官方的方法。

这工作的很好,但有点不够灵活。如果链接确实直接连接到Nettus+还好,但是,也许路径是到nettust的相对路径呢?在这种情况下,我们可以使用一点正则表达式语法。

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

12. X[href*="nettuts"]

a[href*="tuts"] {    color: #1f6053; /* nettuts green */  } 

来了不是~这就是我们需要的代码。*号指定了包含该属性的值必须包含定义的值。就是说,这句代码包含了href值为 nettuts.com,net.tutsplus.com或者tutsplus.com。记住这个描述过于宽泛,如果是某个锚点标签链接到某个连接中带有tuts非Envato的网站(tutsplus属于Envato旗下网站)呢?因此你需要更多特性来限制,分别使用^和&来限定字符串的开始和结束。

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

13. X[href^="http"]

a[href^="http"] {     background: url(path/to/external/icon.png) no-repeat;     padding-left: 10px;  }   

有没有想过某些网站是如何定义一个图标的链接的?我确定你肯定看到过。这些链接很容易让你跳转到另一个网站。使用^(carat)符灰常简单啦。这个符号常常在正则表达式中表示字符串的开始。如果我们想指向所有以"http"开头的"href"属性的锚点的话,我们就可以使用类似于上面的那段代码啦。

注意啦,我们不需要搜索"http://",完全没必要,因为我们还要包含以https://开头的链接呢。

如果我们想为所有链接到图片的链接定义样式咋办?这种情况下,我们得搜索字符串的结束了不是。

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

14. X[href$=".jpg"]

a[href$=".jpg"] {     color: red;  }  

又来了,我们还是使用正则表达式符号,$(dolor),来作为字符串的结束标记。这种情况下,我们就会搜索所有url以.jpg为结尾的锚点啦。记住记住这种情况下gif和png格式的图片不会被选择哦。

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

15. X[data-*="foo"]

a[data-filetype="image"] {     color: red;  }  

回顾最近一条,我们如何能包含各种图片类型:png,jpeg,jpg,gif?很容易想到,我们能通过多个选择器来不是,像这样:

a[href$=".jpg"],  a[href$=".jpeg"],  a[href$=".png"],  a[href$=".gif"] {     color: red;  } 

不过,这样很蛋疼,效率极低。另一个解决办法是使用自定义属性。如果我们加了一种自己的 data-filetype 属性给每一个链接到图片的锚点的话呢?

    <a href="path/to/image.jpg" data-filetype="image"> Image Link </a>  

这样关联后,我们就能使用标准的属性选择器来指定这些链接啦。看下面:

a[data-filetype="image"] {     color: red;  }

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

16. X[foo~="bar"]

 a[data-info~="external"] {     color: red;  }    a[data-info~="image"] {     border: 1px solid black;  } 

这儿有个鲜为人知的特殊技巧,绝对让你印象时刻。~(tilda)符,它可以帮助我们指向那些以空格隔开多个值的属性的元素(真拗口,这翻译我自己都看不懂,水平问题)以我们第15条的自定义属性为例,上面的代码中我们创建了 data-info属性,这个属性可以定义以空格分隔的多个值。这样,这个链接本身就是个icon,并且指向的也是一个图片链接,像下面这样。

<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>  

有了这样适当的标记,通过使用 ~ 属性选择器的技巧,我们就可以指向任何具有着两种属性的任何一种啦。

/* Target data-info attr that contains the value "external" */  a[data-info~="external"] {     color: red;  }    /* And which contain the value "image" */  a[data-info~="image"] {    border: 1px solid black;  }

很棒,不是吗?

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

17. X:checked

input[type=radio]:checked {     border: 1px solid black;  }  

这种伪类只会匹配已经被选中的单选元素。就是这么简单。

查看例子

兼容性

  • E9+
  • Firefox
  • Chrome
  • Safari
  • Opera

18. X:after

before 和 after 伪类也很蛋疼。貌似人们每天都能找到或者发明一些新办法来有效地使用它们。它们很容易控制选择器周围的内容。很多第一次使用是因为他们需要对clear-fix进行改进。

.clearfix:after {      content: "";      display: block;      clear: both;      visibility: hidden;      font-size: 0;      height: 0;      }    .clearfix {      *display: inline-block;      _height: 1%;  }

这个改进使用了:after伪类元素来在元素后增加一个空间,然后清除它。这个牛X的技巧你应该收藏到工具包里,特别是当overflow:hidden方法无能为力的时候。想看看其他创造性的用法:访问我滴创建阴影的窍门

通过Css3选择器的标准说明书,你应该有技巧地使用这些伪类语法——双冒号::。不过为了兼容,浏览器会接受一个双引号。

兼容性

  • IE8+
  • Firefox
  • Chrome
  • Safari
  • Opera

19. X:hover

div:hover {    background: #e3e3e3;  }  

我去,这个你必须懂。典型的官方形式的用户触发伪类。听起来会有点迷惑,不过实际上并非如此。想在用户在某个元素上面悬停时定义个特别的样式?这个属性就是做这个的。

记住啦,较old版本的IE,只能在锚点标签后使用这个hover。

这个选择器你用得最多的情况,估计可能就是在锚点的悬停时加个border-bottom啦。

a:hover {   border-bottom: 1px solid black;  }  <