总结30个CSS3选择器

或许你们平时老是在用的选择器都是：#id  .class  以及标签选择器。但是这些还远远不够，为了在开发中更加驾轻就熟，本文总结了30个CSS3选择器，但愿对你们有所帮助。
1 *：通用选择器

* { margin:0; padding:0;  }

*选择器是选择页面上的所有元素，上面的代码做用是把所有元素的margin和padding设为0，最基本的清除浏览器默认样式的方法。
*选择器也能够应用到子选择器中，例以下面的代码：

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

这样ID为container 的全部子标签元素都被选中了，而且设置了border。
2 #id：id选择器

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

id

选择器是很严格的而且你没办法去复用它。使用的时候你们仍是得至关当心的。须要问本身一下：我是否是必需要给这个元素来赋值个id来定位它呢？
3 .class：类选择器

.error { color: red;
}

这是个

class

选择器。它跟

id

选择器不一样的是，它能够定位多个元素。当你想对多个元素进行样式修饰的时候就可使用

class

。当你要对某个特定的元素进行修饰那就是用

id

来定位它。
4 selector1 selector2：后代选择器

li a { text-decoration: none;
}

后代选择器是

比较经常使用的

选择器。若是你想更加具体的去定位元素，你可使用它。例如，假如，你不须要定位全部的

a

元素，而只须要定位

li

标签下的

a

标签？这时候你就须要使用

后代

选择器了。
提示：若是你的选择器像

X Y Z A B.error

这样，那你就错了。时刻都提醒本身，是否真的须要对那么多元素修饰。
5 tagName：标签选择器

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

若是你想定位页面上全部的某标签，不是经过

id

或者是’class’，这简单，直接使用类型选择器。
6 selector:link  selector:visited  selector:hover  selector:active  伪类选择器

通常状况下selector都为a标签，以上四种伪类选择器表明的意思以下：
link:链接日常的状态。
visited:链接被访问过以后。
hover:鼠标放到链接上的时候。
active:链接被按下的时候。

未移入a标签连接时：link
移入a标签连接时：link、hover
点击a标签连接时：link、hover、active
点击后未移入a标签链接时：link、visited
点击后移入a标签链接时：link、visited、hover
点击后再次点击a标签链接时：link、visited、hover、active
这个就是全部组合的样式了。
若是有多个一样的样式，后面的样式会覆盖前面的样式，因此这四个伪类的定义就有顺序的要求了，而你们所说的‘lvha’也是由于这个缘由。 7 selector1 + selector2 ：相邻选择器

ul + p { color: red;
}

它只会选中指定元素的直接后继元素。上面那个例子就是选中了全部

ul

标签后面的第一段，并将它们的颜色都设置为红色。
8 selector1 > selector2 : 子选择器

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

它与差异就是后面这个指挥选择它的直接子元素。看下面的例子

<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

元素。
因为某些缘由，使用子节点组合选择器会在性能上有许多的优点。事实上，当在javascript中使用

css

选择器时候是强烈建议这么作的。
9 selector1 ~ selector2 : 兄弟选择器

ul ~ p { color: red;
}

兄弟节点组合选择器跟

相邻选择器

很类似，而后它又不是那么的严格。

ul + p

选择器只会选择紧挨跟着指定元素的那些元素。而这个选择器，会选择跟在目标元素后面的全部匹配的元素。

10 selector[title] : 属性选择器

a[title] { color: green;
}

上面的这个例子中，只会选择有title属性的元素。那些没有此属性的锚点标签将不会被这个代码修饰。
11 selector[href="foo"] : 属性选择器

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

上面这片代码将会把

href

属性值为

http://strongme.cn

的锚点标签设置为绿色，而其余标签则不受影响。
注意：咱们将值用双引号括起来了。那么在使用Javascript的时候也要使用双引号括起来。能够的话，尽可能使用标准的CSS3选择器。
12 selector[href*=”strongme”] : 属性选择器

a[href*="strongme"] { color: #1f6053;
}

指定了

strongme

这个值必须出如今锚点标签的

href

属性中，不论是

strongme.cn

仍是

strongme.com

仍是

www.strongme.cn

均可以被选中。
可是记得这是个很宽泛的表达方式。若是锚点标签指向的不是

strongme

相关的站点，若是要更加具体的限制的话，那就使用

^

和

$

，分别表示字符串的开始和结束。
13 selector[href^=”href”] : 属性选择器

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

你们确定好奇过，有些站点的锚点标签旁边会有一个外链图标，我也相信你们确定见过这种状况。这样的设计会很明确的告诉你会跳转到别的网站。
用克拉符号就能够轻易作到。它一般使用在正则表达式中标识开头。若是咱们想定位锚点属性

href

中以

http

开头的标签，那咱们就能够用与上面类似的代码。
注意咱们没有搜索http://，那是不必的，由于它都不包含https://。
14 selector[href$=”.jpg”] : 属性选择器

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

此次咱们又使用了正则表达式

$

，表示字符串的结尾处。这段代码的意思就是去搜索全部的图片连接，或者其它连接是以

.jpg

结尾的。可是记住这种写法是不会对

gifs

和

pngs

起做用的。
15 selector[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[data-filetype="image"] { color: red;
}

16 selector[foo~=”bar”] : 属性选择器

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

这个我想会让你的小伙伴惊呼妙极了。不多有人知道这个技巧。这个

~

符号能够定位那些某属性值是空格分隔多值的标签。
继续使用第15条那个例子，咱们能够设置一个

data-info

属性，它能够用来设置任何咱们须要的空格分隔的值。这个例子咱们将指示它们为外部链接和图片连接。

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

17 selector:checked ： 伪类选择器

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

上面这个伪类写法能够定位那些被选中的单选框和多选框，就是这么简单。
18 selector: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%;
}

上面这段代码会在目标标签后面补上一段空白，而后将它清除。这个方法你必定得放你的聚宝盆里面。特别是当

overflow:hidden

方法不顶用的时候，这招就特别管用了。
根据CSS3标准规定，可使用两个冒号

::

。而后为了兼容性，浏览器也会接受一个冒号的写法。其实在这个状况下，用一个冒号仍是比较明智的。
19 selector:hover ： 伪类选择器

div:hover { background: #e3e3e3;
}

不用说，你们确定知道它。官方的说法是

user action pseudo class

.听起来有点儿迷糊，其实还好。若是想在用户鼠标飘过的地方涂点儿彩，那这个伪类写法能够办到。
注意：旧版本的IE只会对加在锚点

a

标签上的

:hover

伪类起做用。
一般你们在鼠标飘过锚点连接时候加下边框的时候用到它。

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

专家提示：border-bottom:1px solid black;比text-decoration:underline;要好看不少。
20 selector1:not(selector2) ： 伪类选择器

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

取反

伪类是至关有用的，假设咱们要把除

id

为

container

以外的全部

div

标签都选中。那上面那么代码就能够作到。
或者说我想选中全部出段落标签以外的全部标签

:not(p) { color: green;
}

21 selector::pseudoElement ： 伪类选择器

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

咱们可使用

::

来选中某标签的部份内容，如第一段，或者是第一个字。可是记得必须使用在块式标签上才起做用。
伪标签是由两个冒号 :: 组成的
定位第一个字：

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

跟

::first-line

类似，会选中段落的第一行
为了兼容性，以前旧版浏览器也会兼容单冒号的写法，例如

:first-line

,

:first-letter

,

:before

,

:after

.可是这个兼容对新介绍的特性不起做用。
22 selector:nth-child(n) ： 伪类选择器

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

还记得咱们面对如何取到堆叠式标签的第几个元素时无处下手的时光么，有了

nth-child

那日子就一去不复返了。
请注意

nth-child

接受一个整形参数，而后它不是从0开始的。若是你想获取第二个元素那么你传的值就是

li:nth-child(2)

.
咱们甚至能够获取到由变量名定义的个数个子标签。例如咱们能够用

li:nth-child(4n)

去每隔3个元素获取一次标签。
23 selector:nth-last-child(n) ： 伪类选择器

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

假设你在一个

ul

标签中有N多的元素，而你只想获取最后三个元素，甚至是这样

li:nth-child(397)

，你能够用

nth-last-child

伪类去代替它。
24 selectorX:nth-of-type(n) ： 伪类选择器

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

曾几什么时候，咱们不想去选择子节点，而是想根据元素的类型来进行选择。
想象一下有5个

ul

标签。若是你只想对其中的第三个进行修饰，并且你也不想使用

id

属性，那你就可使用

nth-of-type(n)

伪类来实现了，上面的那个代码，只有第三个

ul

标签会被设置边框。
25 selector:nth-last-of-type(n) ： 伪类选择器

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

一样，也能够相似的使用

nth-last-of-type

来倒序的获取标签。
26 selector:first-child ： 伪类选择器

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

这个结构性的伪类能够选择到第一个子标签，你会常用它来取出第一个和最后一个的边框。
假设有个列表，每一个标签都有上下边框，那么效果就是第一个和最后一个就会看起来有点奇怪。这时候就可使用这个伪类来处理这种状况了。
27 selector:last-child ： 伪类选择器

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

跟

first-child

相反，

last-child

取的是父标签的最后一个标签。
例如
标签

<ul>
   <li> List Item </li>
   <li> List Item </li>
   <li> List Item </li>
</ul>

这里没啥内容，就是一个了 List。

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

上面的代码将设置背景色，移除浏览器默认的内边距，为每一个

li

设置边框以凸显必定的深度。
28 selector:only-child ： 伪类选择器

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

说实话，你会发现你几乎都不会用到这个伪类。然而，它是至关有用的，说不许哪天你就会用到它。
它容许你获取到那些只有一个子标签的父标签下的那个子标签。就像上面那段代码，只有一个段落标签的

div

才被着色。

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

上面例子中，第二个

div

不会被选中。一旦第一个

div

有了多个子段落，那这个就再也不起做用了。
29 selector:only-of-type： 伪类选择器

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

结构性伪类能够用的很聪明。它会定位某标签下相同子标签的只有一个的目标。设想你想获取到只有一个子标签的

ul

标签下的li标签呢？
使用

ul li

会选中全部

li

标签。这时候就要使用

only-of-type

了。

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

最后记住：使用像jQuery等工具的时候，尽可能使用原生的CSS3选择器。可能会让你的代码跑的很快。这样选择器引擎就可使用浏览器原生解析器，而不是选择器本身的。
若是还有同窗对 nth-of-type 与 nth-child的认识仍是不明确，能够移步到深刻理解css3中nth-child和 nth-of-type的区别这篇文章。

转载于猿2048:➩《总结30个CSS3选择器》