HTML5网页设计

html_css

30个常用的CSS选择器

时间:2016-09-21 17:53来自:未知作者:user点击:
也许你了解了基本的 id,class和descendant选择器,并且整天都在调用,如果是这样的话,那你正在错过拥有灵活性更大的选择器。

也许你了解了基本的 id,class和descendant选择器,并且整天都在调用,如果是这样的话,那你正在错过拥有灵活性更大的选择器。这篇文章里面提到的大部分选择器都是在CSS3标准下的,所以它们只能在相应最新版本的浏览器中才能生效,你完全应该把这些都记在你聪明的脑袋里面……

1. *

* {
  margin: 0;
  padding: 0;
}

在我们看比较高级的选择器之前,应该认识下这个众所周知的清空选择器。星号(*)会将页面上所有每一个元素都选到。许多开发者都用它来清空margin和padding。当然你在练习的时候使用这个没问题,但是我不建议在生产环境中使用它。它会给浏览器凭添许多不必要的东西。

*也可以用来选择某元素的所有子元素:

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

它会选中#container下的所有元素。当然,我还是不建议你去使用它。DEMO

兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

2.#X

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

在选择器中使用#可以用id来定位某个元素。大家通常都会这么使用,使用的时候大家还是得相当小心的。

需要问自己一下:我是不是必须要给这个元素来赋值个id来定位它呢?

id选择器是很严格的并且你没办法去复用它。如果可以的话,首先试试用标签名字,HTML5中的新元素,或者是伪类。DEMO

兼容性:

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

3. .X

.error {
  color: red;
}

这是个class选择器。它跟id选择器不同的是,它可以定位多个元素。当你想对多个元素进行样式修饰的时候就可以使用class。当你要对某个特定的元素进行修饰那就是用id来定位它。DEMO

兼容性:

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

4.X Y

li a {
  text-decoration: none;
}

下一个常用的就是descendant(后代)选择器(后代指所有后代,儿子、孙子后代等)。如果你想更加具体的去定位元素,你可以使用它。例如,假如,你不需要定位所有的a元素,而只需要定位li标签下的a标签?这时候你就需要使用descendant选择器了。

专家提示:如果你的选择器像X Y Z A B.error这样,那你就错了。时刻都提醒自己,是否真的需要对那么多元素修饰。DEMO

兼容性:

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

5.X

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

如果你想定位页面上所有的某标签,不是通过id或者是’class’,这简单,直接使用类型选择器。DEMO

兼容性:

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

6.X:visited 和 X:link

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

我们使用:link这个伪类来定位所有还没有被访问过的链接。
另外,我们也使用:visited来定位所有已经被访问过的链接。
DEMO

兼容性:

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

7.X + Y

ul+p{
    color:red;
}

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

兼容性:

  • 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引擎。
DEMO

兼容性

*IE7+
*Firefox
*Chrome
*Safari
*Opera

9.X~Y

ul ~ p {  
   color: red;  
}

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

兼容性

*IE7+
*Firefox
*Chrome
*Safari
*Opera

10.X[title]

a[title] {  
   color: green;  
} 

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

兼容性

*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的相对路径呢?在这种情况下,我们可以使用一点正则表达式语法。

DEMO

兼容性

*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旗下网站)呢?因此你需要更多特性来限制,分别使用^和&来限定字符串的开始和结束。
DEMO

兼容性

*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://开头的链接呢。

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

兼容性

*IE7+
*Firefox
*Chrome
*Safari
*Opera

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

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

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

兼容性

*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>
这样关联后,我们就能使用标准的属性选择器来指定这些链接啦。看下面:
DEMO

兼容性

*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;  
}

很棒,不是吗?
DEMO

兼容性

*IE7+
*Firefox
*Chrome
*Safari
*Opera

17. X:checked

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

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

兼容性

*IE9+
*Firefox
*Chrome
*Safari
*Opera

18. X:after

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

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;
}

小贴士: border-bottom:1px solid black;比 text-decoration:underline;好看一点哦。(真的?我去)

兼容性

*IE6+ (In IE6, :hover must be applied to an anchor element)
*Firefox
*Chrome
*Safari
*Opera

20. X:not(selector)

div:not(#container) {  
   color: blue;  
}

not伪类灰常有用。例如我要选择所有的div,除了有id为container的。上面那个代码片段就能完美的实现。
如果我想选择除了p以外的所有元素,我可以这么做:

*:not(p) {  
  color: green;  
} 

DEMO

兼容性

*IE9+
*Firefox
*Chrome
*Safari
*Opera

21. X::pseudoElement

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

我们可以使用伪元素(以::为表示)来定义元素的样式。例如第一行,第一个字符,记住啦,这种方法只能应用于同级元素才有效。

伪元素由两个冒号组成:::

指定p的第一个字符的样式
p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}

这段代码会找到所有段落,然后再从中定义这些段落的第一个字符。
这常常使用在仿报纸的文章首字母样式。

指定p的首行样式

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

同样,这个::first-line伪元素会像我们期望的那样,只定义段落的第一行的样式。
DEMO

兼容性

*IE6+
*Firefox
*Chrome
*Safari
*Opera

22. X:nth-child(n)

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

想想那些没法从元素堆中选择元素的日子。nth-child伪类解决了这个问题。
请注意 nth-child接收整数和变量,不过不是从0开始的,如果你想选定第二个li,使用 li:nth-child(2).
我们甚至使用这个办法来选择任意的子元素。例如,我们可以用 li:nth-child(4n)来完成4为倍数的所有元素的选择。
DEMO

兼容性

*IE9+
*Firefox 3.5+
*Chrome
*Safari
*Opera

23. X:nth-last-child(n)

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

如果我有灰常多的li在ul里面,我只想要最后3个li怎么办?不必使用li:nth-child(397),你可以使用nth-last-child伪类。
这种技巧和第六条几乎一样有效,不过两者的不同之处在于它从结束开始收集,用回溯的方式进行。
DEMO

兼容性

*IE9+
*Firefox 3.5+
*Chrome
*Safari

24. X:nth-of-type(n)

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

你应该有很多时候想要元素类型来选择元素而不是通过孩子。
想象一下标记5个无序列表(UL)。如果你想定义第三个ul,并且没有一个唯一的id来找到它,你就可以使用 nth-of-type(3)伪类了。在上面这个代码段中,只有第三个ul才会有黑色的边框。
DEMO
兼容性

*IE9+
*Firefox 3.5+
*Chrome
*Safari

25. X:nth-last-of-type(n)

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

没错,我们一样可以使用nth-last-of-type来从结束开始回溯这个选择器,来找到我们想要的元素。

兼容性

*IE9+
*Firefox 3.5+
*Chrome
*Safari

26. X:first-child

ul li:first-child {  
   border-top: none;  
}

这个结构的伪类让我们可以选择某个元素的第一个子孩子。你通常可以使用这个办法来删除第一个或者最后一个元素的边框。
例如,你有一系列的rows,每一个都有border-top 和border-bottom。这种情况下,第一行和最后一行看起来会灰常怪。
很多设计师会使用first和last类来弥补这个缺陷。相反,你可以使用这些伪类来解决这些问题。
DEMO

兼容性

*IE7+
*Firefox 3.5+
*Chrome
*Safari

27. X:last-child

ul > li:last-child {  
   color: green;  
}

与first-child相反,last-child会选择父节点的最后一个子节点。

例子

我们建立一些例子来示范这些类的可能的用法。我们会建立一种风格来展示。
标记


  • List Item

  • List Item

  • List Item


没啥特别的,就是一个简单的序列。

 

CSS
ul {
width: 200px;
background: #292929;
color: white;
list-style: none;
padding-left: 0;
}

li {  
 padding: 10px;  
 border-bottom: 1px solid black;  
 border-top: 1px solid #3c3c3c;  
}

图片

这个样式会设置一个背景,删除浏览器默认的ul的padding值,并定义边框给每一个li来提供一点深度。

如上图所示,唯一的问题是最上面的边框和最下面的边框看起来有点儿怪。让我们来使用:first-child和:last-child来解决这个问题。
li:first-child {
border-top: none;
}

li:last-child {  
   border-bottom: none;  
}

图片
看上图,解决了不是。
DEMO

兼容性

*IE9+
*Firefox
*Chrome
*Safari

是滴,IE8支持 first-child 不过不支持last-child。

28. X:only-child

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

实话说,你很可能会发现你不会经常使用 only-child伪类。尽管如此,它确实有用,你应该需要它。
它可以帮助你选择是父节点的独生子(没别的孩子啦)的元素。例如,使用上面的代码,只有是div的唯一子孩子的p段落才会定义其颜色为red。
让我们来假定下面的标记。

<div><p> My paragraph here. </p></div>
<div>  
   <p> Two paragraphs total. </p>  
   <p> Two paragraphs total. </p>  
</div> 

这样,第二个div的p标签的内容不会被选中。只有第一个div的p才会被选中。 DEMO

兼容性

*IE9+
*Firefox
*Chrome
*Safari

29. X:only-of-type

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

这种结构的伪类有几种灰常聪明的用法。它可以选定在其父节点内没有兄弟节点的元素。例如,我们可以选择只有一个li作为其子孩子的ul。
首先,取决于你想怎样完成这一目标。你可以使用 ul li,不过,这回选择所有li元素。唯一的办法是使用only-of-type。

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

DEMO

兼容性

*IE9+
*Firefox 3.5+
*Chrome
*Safari

30. X:first-of-type

first-of-type 伪类可以让你选择该类型的第一个兄弟节点。

一个测试

为了更好地理解它,让我们来测试一下啊。拷贝下面的标记到你的编辑器。

现在,别急着往下读,试试看如何能只选择’LIST ITEM 2’?如果你搞定了(或者放弃了),继续读。

解决办法1

有很多办法能搞定这个测试。我们回顾其中一小部分。以使用first-of-type开始。

ul:first-of-type > li:nth-child(2) {  
   font-weight: bold;  
}

这个代码段本质上表示,“找到第一个无序列表,然后找到这里面的li,然后,继续使用过滤器直到找到第二个li。

解决办法2

另一个可行的办法是毗邻选择器。

p + ul li:last-child {  
   font-weight: bold;  
}

在这个方案中,我们找到p的临近节点ul,然后找到ul的li的最后一个孩子。
解决办法3

我们可以随心所欲滴选择这些选择器。

ul:first-of-type li:nth-last-child(1) {  
   font-weight: bold; 
}

这次,我们取到第一个ul,然后找到第一个元素,不过是从最后一个开始数。哈哈。
DEMO

兼容性

*IE9+
*Firefox 3.5+
*Chrome
*Safari
*Opera

结论

如果你想向旧版本浏览器妥协,比如IE6,那你用这些新的选择器的时候还是得小心点。但别别让IE6阻止你去学这些新的技能。那你就对自己太残忍了。记得多查查兼容性列表,或者使用Dean Edward’s excellent IE9.js script 来让你的浏览器具有这些特性。

第二个,使用向jQuery的时候,尽量使用原生的CSS3选择器。可能 活让你的代码跑的很快。这样选择器引擎就可以使用浏览器原生解析器,而不是选择器自己的。

原文为“The 30 CSS Selectors you Must Memorize

当前文章地址:http://www.shejicool.com/web/html_css/693.html

阅完本篇文章?您还可以: 收藏本文 文章挑错 朋友推荐