一.标签选择器、类选择器和ID选择器
CSS中的选择器分为标签选择器、类选择器和ID选择器
标签选择器：使用标签(<html>,<p>,<body>,<img>等)进行样式设定。如：
p{font-size:12px;line-height:1.6px;color:red;}类选择器：是CSS选择器中最常用的，类选择器可以是多个，格式为：
.类选器名称{css样式代码;}<span class="first"></span>
ID选择器：
类似于类选择器，不同的是ID选择器是唯一的，格式为：
#ID选器名称{css样式代码;}<span id="second"></span>二.后代选择器
选择器是有“辈分关系”的，一代套着一代
子选择器：
子选择器是父子关系，颇象是大盒套小盒，也被称为一代选择器。举个例子,有这样一串代码：
<p class="food">牛肉，<span>苹果</span>，青菜</p>.food>span{color:red;}
在这里，.food与span是父子关系，span在.food内部.food>span就是子选择器。
包含后代选择器：
包含后代选择器与子选择器在代码上的区别就是把">"换成空格，在功能上有什么区别呢？如果把上述苹果的例子中的">"换成空格，你会发现结果并没有什么变化，接下来，我们把“青菜”也加上<span>标签<p class="food">牛肉，<span>苹果</span>，<span>青菜</span></p>你会发现结果还是没变，现在我们使用包含后代选择器，
.food>span{color:red;}
子选择器与包含后代选择器的区别：子选择器仅作用于父元素下指定的第一个子元素(嫡长子继承制啊。。。)；而包含后代选择器则是作用于父元素以下所有指定的子元素。
三.通用选择器
格式：
* {color:red;}四.伪类、伪元素选择器
伪类和伪元素实际上就是对类和ID不能选择的元素进行补充。
伪类选择器：只有在某种特殊状态下才会产生作用，如：
a:hover{color:red;}
常用的伪类选择器有：
:link,:focus,:hover
伪元素选择器：对某些指定的元素才会产生作用，如：
p::first-letter{color:red;}
常用的伪元素选择器有：:first-child,:first-letter,:before,:after
PS:伪类只能使用“:”，伪元素可以使用“::”，也可以使用“:”。
五.分组选择器
分组选择器可以看成多个类选择器或者ID选择器的组合，如：
h1,span{color:red;}六.权值
标签的权值为1，类选择符的权值为10，ID选择符的权值最高，为100 。
当两个样式矛盾时，会显示权值较高的样式。如：
p{color:red;}
.pow{color:green;}
<p class="pow">今天<span>高考</span>加油！</p>p span{color:black;}
的权值为1+1=2;
PS： 当权值相同时，后面的覆盖前面的。
.pow span{color:black;}PS： 当权值相同时，后面的覆盖前面的。
143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
