CSS选择器

CSS是Cascading style Sheets的简称,中文译作“层叠样式表单”,我把它叫作“层叠样式表”，在网页设计中，html负责结构，css负责样式，js负责行为。css写在head标签里面，容器style标签。先写选择器，然后写大括号，大括号里面是样式。

CSS的基础选择器

标签选择器

就是用标签名来当做选择器。

1） 所有标签都能够当做选择器，比如body、h1、dl、ul、span等等

2） 不管这个标签藏的多深，都能够被选择上。

3） 选择的是所有的，而不是某一个。所以是共性，而不是特性。

		a{
			/*去掉下划线：*/
			text-decoration: none; 
		}

ID选择器

1）任何的标签都可以有id，id的命名要以字母开头，可以有数字、下划线。大小写严格区别，也就是说mm和MM是两个不同的id。

2）同一个页面内id不能重复，即使不一样的标签，也不能是相同的id。

也就是说，如果有一个p的id叫做haha，这个页面内，其他所有的元素的id都不能叫做haha。

		#lj1{
			font-size: 60px;
			font-weight: bold;
			color:black;
		}

类选择器

.就是类的符号。类的英语叫做class。

所谓的类，就是class属性，class属性和id非常相似，任何的标签都可以携带class属性。

class属性可以重复，比如，页面上可能有很多标签都有teshu这个类：

	<h3>我是一个h3啊</h3>
	<h3 class="teshu">我是一个h3啊</h3>
	<h3>我是一个h3啊</h3>
	<p>我是一个段落啊</p>
	<p class="teshu">我是一个段落啊</p>
	<p class="teshu">我是一个段落啊</p>

.teshu{
	  color: red;
	}

同一个标签，可能同时属于多个类，用空格隔开：

<h3 class="teshu  zhongyao">我是一个h3啊</h3>

这样，这个h3就同时属于teshu类，也同时属于zhongyao类。

到底用id还是用class？

尽可能的用class，除非极特殊的情况可以用id。

原因：id是js用的。也就是说，js要通过id属性得到标签，所以我们css层面尽量不用id，要不然js就很别扭。另一层面，我们会认为一个有id的元素，有动态效果。

CSS的高级选择器

后代选择器

	<style type="text/css">
		.div1 p{
			color:red;
		}
	</style>

空格就表示后代，.div1 p 就是.div1的后代所有的p,选择的是后代，不一定是儿子。

比如：

	<div class="div1">
		<ul>
			<li>
				<p>段落</p>
				<p>段落</p>
				<p>段落</p>
			</li>
		</ul>
	</div>

能够被下面的选择器选择上：

		.div1 p{
			color:red;
		}

所以，看见这个选择器要知道是后代，而不是儿子。选择的是所有.div1“中的”p，就是后代p。

后代选择器，就是一种平衡：共性、特性的平衡。当要把某一个部分的所有的什么，进行样式改变，就要想到后代选择器。

交集选择器

   h3.special{
	color:red;
   }

选择的元素是同时满足两个条件：必须是h3标签，然后必须是special标签。交集选择器没有空格。

因此，下面两个表示的是不同的意思

div.red 和 div .red

交集选择器，我们一般都是以标签名开头，比如div.haha  比如p.special。

并集选择器（分组选择器）

用逗号就表示并集

h3,li{
	color:red;
}

通配符*

*{
 color:red;
}

效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。

一些CSS3的选择器

儿子选择器

div>p{
	color:red;
}

div的儿子p。和div的后代p的截然不同。

能够选择下面这个

	<div>
		<p>我是div的儿子</p>
	</div>

不能选择下面这个

	<div>
		<ul>
			<li>
				<p>我是div的重孙子</p>
			</li>
		</ul>
	</div>

序选择器

选择第一个li

<style type="text/css">
		ul li:first-child{
			color:red;
		}
	</style>

选择最后一个1i

ul li:last-child{
			color:blue;
		}

下一个兄弟选择器

+表示选择下一个兄弟

<style type="text/css">
		h3+p{
			color:red;
		}
	</style>

选择上的是h3元素后面紧挨着的第一个兄弟。

        <h3>我是一个标题</h3>
	<p>我是一个段落</p>
	<p>我是一个段落</p>
	<p>我是一个段落</p>
	<h3>我是一个标题</h3>
	<p>我是一个段落</p>
	<p>我是一个段落</p>
	<p>我是一个段落</p>
	<h3>我是一个标题</h3>
	<p>我是一个段落</p>
	<p>我是一个段落</p>
	<p>我是一个段落</p>
	<h3>我是一个标题</h3>

CSS的继承性和层叠性

继承性

有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。

哪些属性能继承？

color、 text-开头的、line-开头的、font-开头的。

这些关于文字样式的，都能够继承；所有关于盒子的、定位的、布局的属性都不能继承，继承性是从自己开始，直到最小的元素。

所以，如果我们的页面的文字，都是灰色，都是14px。那么就可以利用继承性：

body{
    color:gray;
    font-size:14px;
}

层叠性

就是css处理冲突的能力。 所有的权重计算，没有任何兼容问题！

可见这里最终被的颜色都是蓝色，是被id选择器选中的样式，而其它两个标签选择和类选择就被覆盖了，也就是被层叠掉了。

当选择器，选择上了某个元素的时候，那么要这么统计权重：id的数量：类的数量：标签的数量

不进位，实际上能进位（奇淫知识点：255个标签，等于1个类名）但是没有实战意义！

如果权重一样，那么以后出现的为准：

如果不能直接选中某个元素，通过继承性影响的话，那么权重是0。

如果大家都是0，那么有一个就近原则：谁描述的近，听谁的。

权重问题大总结：

1） 先看有没有选中，如果选中了，那么以（id数，类数，标签数）来计权重。谁大听谁的。如果都一样，听后写的为准。

2） 如果没有选中，那么权重是0。如果大家都是0，就近原则。

权重问题深入

类名书写顺序

同一个标签，携带了多个类名，有冲突

	<p class="spec1 spec2">我是什么颜色？</p>
	<p class="spec2 spec1">我是什么颜色？</p>

和在标签中的挂类名的书序无关，只和css的顺序有关：

		.spec2{
			color:blue;
		}
		.spec1{
			color:red;
		}

红色的。因为css中red写在后面。

!important标记

	<style type="text/css">
		p{
			color:red !important;
		}
		#para1{
			color:blue;
		}
		.spec{
			color:green;
		}
	</style>

我们可以通过!important来提高权重，这个属性的权重就是无穷大了

!important需要强调3点：

1） !important提升的是一个属性，而不是一个选择器

	p{
			color:red !important;   → 只写了这一个!important，所以就字体颜色属性提升权重
			font-size: 100px ;      → 这条属性没有写!important，所以没有提升权重
		}
		#para1{
			color:blue;
			font-size: 50px;
		}
		.spec{
			color:green;
			font-size: 20px;
		}

所以，综合来看，字体颜色是red（听important的）；字号是50px（听id的）;

2） !important无法提升继承的权重，该是0还是0

	<div>
		<p>哈哈哈哈哈哈哈哈</p>
	</div>

              div{
			color:red !important;
		}
		p{
			color:blue;
		}

由于div是通过继承性来影响文字颜色的，所以!important无法提升它的权重，权重依然是0。

干不过p标签，因为p标签是实实在在选中了，所以字是蓝色的（以p为准）。

3） !important不影响就近原则

如果大家都是继承来的，按理说应该按照“就近原则”，那么important能否影响就近原则呢？

答案是：不影响。远的，永远是远的。不能给远的写一个important，干掉近的。

! important做站的时候，不允许使用。因为会让css写的很乱。

现在，我们知道层叠性能比较很多东西：

选择器的写法权重，谁离的近，谁写在下面。