CSS选择器之间的含义和比较

1.CSS选择器

1.1 定义

要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。

1.2 介绍

CSS中的选择器分为如下几种：

1. ID选择器
2. 类选择器
3. 标签选择器
4. 聚合选择器
5. 派生选择器

接下来我们逐一解释：

ID选择器：
　顾名思义，ID选择器指的是利用元素的id属性值来进行选择。这里需要注意的是id值在整个文档当中只能出现一次，也就是只能作用在一个元素上。

类选择器：
　类选择器指的是选择上所有class为某个值的元素。

标签选择器：
　标签选择器指的是选择上整个文档中所有某个标签的元素。

派生选择器：
　　通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。

派生选择器分类：
element element
element>element
element+element

以第一种为例，比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

		    li strong {
			    font-style: italic;
			    font-weight: normal;
		    }

注意：元素查找过程详解
聚合选择器：
聚合选择器可以同时选择上多个元素，统一进行样式的调整。例子如下：
选择并设置所有 <h1>样式和所有 <p> 元素的样式：

		　h1,p
		　{ 
			　background-color:yellow;
		　}

属性选择器：

[attribute]　　　　　　　　[target] 　　　　选择带有 target 属性所有元素。
[attribute=value] 　　　 [target=_blank] 　　 选择 target="_blank" 的所有元素。
[attribute~=value] 　　　 [title~=flower] 　　选择 title 属性包含单词 "flower"的所有元素。
[attribute|=value] 　　　　[lang|=en] 　　　选择 lang 属性值以 "en"开头的所有元素。

交集选择器：
从多个集合中选择它们相同的部分。

3.2 层叠

3.2.1 定义

多个选择器为同一个元素设置了相同的属性时出现了覆盖的情况就是层叠。层叠是页面处理冲突属性的一个机制。

3.2.2 代码示例

CSS代码：

			div{ color:red; }
			.myclass{ color:blue; }

HTML代码：

			<div class="myclass">
				假如生活欺骗了你，不要悲伤不要心急。《代码大全》会一直陪伴着你……
			</div>

5分钟实验时间，看看结果是什么？

接下里再实验一个示例：

CSS代码：

			div{ color:red; color: blue }

HTML代码：

			<div class="myclass">
				洛阳亲友如相问，就说我在敲代码。
			</div>

2分钟实验，这个结果又是什么呢？

3.2.3 总结

A. 如果多个选择器为同一个元素设置了不同的属性它们会同时作用于这个元素。
　　　　B. 如果多个选择器为同一个元素设置了相同的属性它们会发生层叠。
　　　　C. 层叠的最终结果跟优先级有关系。

2 优先级

2.1 定义

浏览器是通过判断优先级，来决定到底哪些属性值是与元素最相关的，从而应用到该元素上。优先级是由选择器组成的匹配规则决定的。

2.2 代码示例

CSS代码：

			#box{color:red}
			.box{color:green}

HTML代码：

		<div id="box" class="box">
			如果一个足球界的人“猝死”了，会被怀疑和赌球有关；如果一个官员“猝死”了，会被怀疑和贪腐有关；如果一个农民”猝死”了，会被怀疑和拆迁有关；而如果一个程序员猝死了，那他真的猝死了。
		</div>

通过上边的案例，会发现颜色是红色，证明id选择器的优先级高，可以通过其他按钮去正式，最终会发现
id>类>标签>通配符>继承>浏览器默认

3 !Important:最高级

3.1 定义

将对应选择器的优先级设置为最高级。

注意：!Important属性是不能继承的。

3.2 代码示例

运行下面代码，li标签中内容会输出什么颜色？为什么？然后看看第二段代码中加上!Important后的页面效果

示例1:

CSS代码：

			div{ color: red; }
	        ul { color: green }

HTML代码：

			<div>
				<ul>
					<li>df</li>
				</ul>
			</div>

示例2：

CSS代码：

			div{ color: red !important; }
	        ul { color: green  ; }

HTML代码：

			<div>
				<ul>
					<li>df</li>
		
				</ul>
			</div>
            <div style="color:#999">
            	【程序员被提bug之后的反应】1.怎么可能； 2.在我这是好的，不信你来看看； 3.真是奇怪，刚刚还好好的； 4.肯定是数据问题； 5.你清下缓存试试； 6.重启下电脑试试； 7.你装的什么版本的类库（jdk） 8.这谁写的代码； 9.尼玛怎么还在用360安全 浏览器 ； 10.用户不会像你这么操作的。
            </div>			

3.3 总结：

!Important>Id>类>标签>通配符>继承>浏览器默认

4 权重的比较#

4.1 定义

当很多的规则被应用到某一个元素上时，权重是一个决定哪种规则生效。 如果两个选择器同时作用到一个元素上，权重高者生效。

4.2 代码示例

示例1：

CSS代码：

		    .one{ color: blue }
			.two{ color: red }
			.three{ color: green }	

HTML代码：

		<div class="one">
				<div class="two">
					<div class="three">
						编程是一种单调的生活，因此程序员比普通人需要更多的关怀，更多的友情。
					</div>
				</div>
			</div>

示例2：

CSS代码：

	        #one{ color: blue }
			#two{ color: red }
			.three{ color: green }	

HTML代码：

			<div class="one" id=”one”>
					<div class="two" id=”two”>
						<div class="three" id=”three”>
							 没有情调，不懂浪漫，也许这是程序员的一面，但拥有朴实无华的爱是他们的另一面。
						</div>
					</div>
				</div>

示例3：

CSS代码：

        .one .two div{ color: blue }
		.three{ color: red }
		#three{ color: green }	

HTML代码：

			<div class="one" id=”one”>
					<div class="two" id=”two”>
						<div class="three" id=”three”>
							程序猿最烦两件事，第一件事是别人要他给自己的代码写文档，第二件呢？是别人的程序没有留下文档。
						</div>
					</div>
				</div>

示例4：

CSS代码：

		#one .two div{ color: blue }
		.three{ color: red }
		#three{ color: green }	

HTML代码：

				<div class="one" id=”one”>
					<div class="two" id=”two”>
						<div class="three" id=”three”>
							程序猿的读书历程：x 语言入门 —> x 语言应用实践 —> x 语言高阶编程 —> x 语言的科学与艺术 —> 编程之美 —> 编程之道 —> 编程之禅—> 颈椎病康复指南。
						</div>
					</div>
				</div>

示例5：

CSS代码：

			#one .two div{ color: blue }
			#one .two .three{ color: red }
			#three{ color: green }	

HTML代码：

				<div class="one" id=”one”>
					<div class="two" id=”two”>
						<div class="three" id=”three”>
							诸葛亮是一个优秀的程序猿，每一个锦囊都是应对不同的case而编写的！但是优秀的程序猿也敌不过更优秀的bug！六出祈山，七进中原，鞠躬尽瘁，死而后已的诸葛亮只因为有一个错误的case-马谡，整个结构就被break了！
						</div>
					</div>
				</div>

4.3 计算权重方法

数标签：
　　　　　　　先数id,如果id相等再数类如果id不相等id多的选择器权重高，权重越高，优先级越高。如果id选择器数量相同，再数类选择器，最后数标签。

接下来再看以下两个示例，分析一下和上边的示例有什么不同呢？

示例6：

CSS代码：

	        #one .two div{ color: red }
			#one .two .three{ color: yellow }
			.one #two .three{ color: blue }

HTML代码：

			<div class="one" id=”one”>
					<div class="two" id=”two”>
						<div class="three" id=”three”>
						《桃花庵–程序员版》写字楼里写字间，写字间中程序员； 程序人员写程序，又将程序换酒钱； 酒醒只在屏前坐，酒醉还来屏下眠； 酒醉酒醒日复日，屏前屏下年复年； 但愿老死电脑间，不愿鞠躬老板前； 奔驰宝马贵者趣，公交自行程序员； 别人笑我太疯癫，我笑自己命太贱； 但见满街漂亮妹，哪个归得程序员；
						</div>
					</div>
				</div>

注意：比较权重的时候一定要注意：我们的选择器一定要命中对应的标签才可能让标签拥有对应的属性。