CSS 解惑 - selectors

Question

css 中有诸多选择器，运用得当的情况下，能让你少些不少的 js，同时从容应对浏览器兼容的烦恼。

手册

大家先看看 阮一峰 老师，在 2009 年总结的 css 选择器的文章： css 选择器笔记

解惑

一、CSS 通用选择器及其优先级

我们知道 基本选择器 包括： 通用选择器 、 元素选择器 、 类选择器 和 ID 选择器 。

这些这是概念，告诉你 css 有这些选择器，但是你知道他们在实际生产中如何使用，且有哪些规则吗？

1.1 基本用法

1、通用选择器

//对所有元素都生效
*{
	padding:0;
	margin:0;
	box-sizing:border-box;
}

2、元素选择器

//仅对 p 元素生效
p{
	margin: 5px 0;
}

3、类选择器

//仅对某一类元素生效
//这个与【元素选择器】有点类似，只是【类选择器】中的【类 class】是自己定义的，而【元素选择器】中的【元素 element】是 html 自带的。
.demo{
	color : blue;
}

4、ID 选择器

//仅对某一个元素生效
#demo1{
	color : red;
}

1.2 组合套路

在面试的时候，面试官可能会问你选择器的优先级？为什么选择器还有优先级呢？因为 css 也是被顺序执行的，同时对某一个元素而言，它身上可能有多个选择器同时作用，那么自然而然就需要有个优先级来处理，这样我们最终看到的效果，就是这些共同作用的结果。

比如：

p{
   color : red;
}

#p1{
   color : blue;
}

.demo #p1{
   color : green;
}

看看以上的例子，你知道最终 #p1 这个元素会显示什么颜色吗？这里就涉及到选择器的组合使用和优先级的问题了。

单优先级

!important > ID 选择器 > 类选择器 > 元素选择器 > 通用选择器

组合优先级

• !important 权重：1000
• ID 选择器 权重：100
• 类选择器 权重：10
• 元素选择器 权重：1
• 通用选择器 权重：0（就是最后被执行的，相当于没权重）

如何通过权重来知道最终生效的样式呢？看看上面的示例。

• p 元素选择器，结果是：1
• #p1 ID 选择器，结果是：100
• .demo #p1 类选择器 + ID 选择器，结果是：10 + 100 = 110

所以，最终的结果是：green

二、组合选择器及其特殊技巧

2.1 两个易混淆的概念

• E F ，后台选择器
• E > F ，儿子选择器

这 2 个区别就在于，作用的程度不一样，你说儿子是不是后台呢？当然是，举个例子就明白了。

<ul class='list1'>
	<li>a1</li>
	<li>
		<ul class='list2'>
			<li>b1</li>
		</ul>
	</li>
</ul>

以上代码，如果使用儿子选择器，则 list2 中的 li 不会生效。

.list > li{
	color : red;
}

但是，如果使用后台选择器，则代码中所有 li 生效，因为 list2 中的 li 相当于孙子，依然是后代嘛！

.list li{
	color : red;
}

2.2 相邻选择器的妙用

有这样一个需求，下来菜单中，每个菜单之间有一条横线。怎么实现呢？

<ul class='nav'>
	<li>menu1</li>
	<li>menu2</li>
	<li>menu3</li>
</ul>

你可能这么写：

.nav li{
	border-bottom : 1px solid #ccc;
}

这个问题在哪里呢？就是最后一个 li 底部也有一条线，这个是我们不想看到的。那你可能会用 border-top ，那不一样么？第一个顶部也会有一条线。

好了，聪明一点的你，可能会用伪类：

.nav li{
	border-bottom : 1px solid #ccc;
}

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

问题在 chrome 上解决了，但是到 IE8 以下的浏览器一看，没生效！肿么办？继续优化呗！

.nav li{
	border-bottom : 1px solid #ccc;
}

.nav .last{
	border-bottom:none;
}

然后在最后一个 li 上增加一个 class：

<ul class='nav'>
	<li>menu1</li>
	<li>menu2</li>
	<li class='last'>menu3</li>
</ul>

好的，问题总算解决了，但是如果需求说还要在最后增加一个菜单，于是乎，又得增加一行 li，同时把之前的 class，挪到最后一个上写。写了这么多，你知道我想表达什么意思么？这里就是 相邻选择器 的妙用的地方，以下这个写法，相当漂亮：

//与 li 相邻的 li
.nav li+li{
	border-top : 1px solid #ccc;
}

以上代码就是除了第 1 个 li 元素外，其余 li 都顶部有 border。因为相当于第 1 个 li，第 2 个是它相邻的；相对于第 2 个 li，第 3 个是它相邻的。当然这种写法的含义就是： 除第 1 个外其余的 。