详细介绍css中的选择器

 

CSS的魅力就是让我们前端工程师像设计师一样进行网页的设计，我们能轻而易举的改变颜色、布局、制作出漂亮的影音效果等等，css中的选择器用于选择你想要的元素的样式的模式。我给大家归纳了常用的20个CSS选择器，希望你能够喜欢我的总结。

 

1、*{}  ：通用选择器

针对初学者来说，我们还是从简单的开始学起，首先我们来认识下通用选择器，通用选择器，可以匹配页面所有的元素。让页面中所有的元素都具有相同的属性。

* { margin: 0; padding: 0; }

 

2、#div：ID选择器

ID选择器的开头使用#号，但是你在使用的时候，需要谨慎。id选择器比较局限，不能重用。

#container { width: 960px; margin: auto; } <div id='container'> </div>

 

3、.div：类选择器

类选择器的开头用.（点）进行表示。与ID选择器的区别就是可以重用。定义多个元素的样式，好比按组进行归类，同一类的样式统一定义。如果把两个类串在一起，选择的就是同时具有两个类名的元素，类名的顺序则无所谓，比如 class="urgent warning" , css 选择器你也可以这样写 .warning .urgent。

.foot_logo img { width: 168px; height: 60px; margin-top: 20px; }

 

4、div p：后代选择器

后代选择器就是我们要选择在li元素中包含a标签的链接（不是所有的链接），取消下划线的默认样式，如果你的选择器看起来像X Y Z A B.error这样就错了。问问自己是否真的需要加入这么多负荷, 这样写的可读性也太差了。还有一个需要注意的，后代元素的层级问题，可能会很深。

li a { text-decoration: none; }

 

5、div：元素选择器

假如你想针对Html预定义的标签，比如类似：p,h3,em,a这些标签，我们可以快速为某类标签定义样式。如下段代码所示：

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

 

6、div:visited and div:link ：链接伪类选择器

:link 伪类来定义所有还没有点击链接的样式，:visited 伪类定义我们曾经点击过或者访问过的链接样式，示例代码如下：

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

 

7、 X + Y：紧邻同胞选择器

若想选择同一个父元素中，相邻的同级别的元素，我们可以使用紧邻同胞选择器）。如想去掉紧跟在h1元素后的p元素的外边距：

h1 + p { margin-top:0 }

 

8、 div > p：子元素选择器

有时候我们并想选择所有的后代元素，而是想缩小范围，只选择一个元素的子元素，比如我们只想选择 #container>ul 定义id为container的div里的ul元素，而不是曾经更深的后代元素比如li里的ul。

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

 

div#container > ul { background-color:red }

在这种情况下选择的话，只能选择最邻近div_container的一个ul，改变此ul的一个背景颜色。

 

9、 div ~ p：后续同胞选择器

后续同胞选择器使用 ~ 表示，选择一个元素后面同属一个父元素的另一个元素。这个选择器和 X + Y 很像，但没那么严格。后续同胞选择器应用会更广泛。比如下面这个例子，我们选择所有ul后面的P元素。

ul ~ p { color: red; }

 

10、div[title]：简单属性选择器

如果想选择具有某个属性的元素，而不管属性的值是什么，我们可以使用简单属性选择器。例如想让带有title属性的链接标签才会被匹配，没有title属性的标签不会受到影响。你可以这么写代码：

a[title] { color: green; }

 

11、div[href="foo"]：属性值选择器

我们学习了 X[title] 这样的简单属性选择器，如果你想对属性的值进行精准匹配如何做呢，不用担心，CSS为我们提供了精准的属性选择器，比如我们想把特定网址的链接变成绿色，如下代码所示：

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

 

12、div[foo~="bar"]：匹配带有空格属性的值

 

波浪号可以选择带有空格的属性，接着上面的例子，比如我们的自定义属性data-info含有external，image 这两个值，并以空格隔开，html结构如下段代码所示：

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

接下来我们使用波浪号，进行选择其中的一个属性值，css代码如下：

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

 

13、div:checked：选中状态选择器

css单选按钮和复选按钮的默认样式很有限，如果定义个性化的选择后的状态样式，可以使用选中状态选择器：

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

 

14、 Div:not(selector) 否定伪类选择器

能够快速选择不想选择的元素 ，如：

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

 

15、div::after 后置内容元素选择器

伪元素前置元素选择器::before 和 后置内容元素选择器 :: after 属于CSS的高级用法，常用于添加装饰符或者清除浮动：（注意此时的选择器在x后面跟的是两个   ：）

添加装饰符：

.header ul li:not(:last-of-type):after { content: "|"; font-size: 6px; margin: 0 5px; color: #424242; }

after清除浮动：

<style> .clearfix::after { content: ''; display: block; clear: both; } .floated { float: left; } </style> <div class="clearfix"> <div class="floated">float a</div> <div class="floated">float b</div> <div class="floated">float c</div> </div>

 

16、 div:nth-child(n) ：选择每第 n 个元素选择器

如果你要匹配一组序列元素每第几个元素，你可以使用 :nth-child 选择器满足这个需求，要注意的是nth-child指序列里的第n个元素，从1开始。如果你要匹配第二个元素，可以使用li:nth-child(2)。li:nth-child(2n)：按倍数进行选择。或者可以用even和odd代表偶数和奇数进行选择！

<style> a:nth-child(1) { width: 72px; height: 40px; border：1px; } </style>

 

17、 div:nth-last-child(n) ：从后往前计算选择每第 n 个元素选择器

和 X:nth-child(n) ： 的选择机制一样，但是加了last之后，变成了从后往前进行选择。

<style> div:nth-last-child(5) { width: 72px; height: 40px; border：1px; } </style>

（这里选择的是倒数第五个元素）

 

19、 div:hover 鼠标悬停状态选择器

常用于给页面中的a标签添加在鼠标浮动到a标签的时候显示下划线，让页面更加美观：

a:hover { color: #ff6700; text-decoration: underline; }

 

20、div[href$=".jpg"]：匹配属性值结尾的选择器

比如我们将要匹配所有指向以jpg结尾的图片链接的文本以设置下划线，要记住的是这些样式对gif和png结尾的图片链接是无效的。如下段代码所示：

a[href$=".jpg"] { text-decoration: underline; }