css选择器——（笔记）

刚入门不久，最近对css权重搞的头晕眼花，目前接触到的的选择器有，标签选择器，类选择器，id选择器，子选择器，包含后代的选择器，通用选择器，以及伪选择符还有分组选择符。

先声明：内联式>嵌入式>外部式（ps：嵌入式>外部式有个前提，嵌入式的位置一定在外部式的后面）

标签选择器：个人认为，就是声明引用标签的变量，标签的选择器权重值是1

类选择器：.英文（不能用中文），一般使用class这类的来引用，权重是10

id选择器：id=“id名称”，而不是class=“类名称”，权重为100

#strees{
color:red}
/*下面引用的时候申请的就是*/
<span id="strees"></sapn>

/*ID选择器只能使用一次，而类选择器可以多次使用*/

子选择器:用大于号（>），用于指定标签元素的第一代子元素，权重值是0

/*语法*/
.friest>li{
border:1px solid red;
}

包含后代的选择器：加入空格，用于选择制定标签元素下的后辈元素，权重是0

/*选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。*/
.first span{
color:red
}
/*>作用于元素的第一代后代，空格作用于元素的所有后代。*/

通用选择器：权重0

*｛color:red｝

/*作用于所有的标签*/

伪选择符：这个目前没有找到权重

a:hover{color:red}
/*hover:声明鼠标经过产生效果（有a href超级链接）
如果只是声明<a></a>这个标签只是html标签，在css中鼠标经过的话只要使用img{....}

关于伪类选择符，到目前为止，可以兼容所有浏鉴器的“伪类选择符”就是a标签上使用：hover了（其实伪类选择符还有很多，尤其是css3中，但是因为不能兼容所有浏鉴器，本教程只是讲了这一种最常用的）。其实:hover可以放在任意的标签上，比如说p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是a:hover的组合。*/

分组选择符:单独设置两个标签的话需要使用这个分组选择符，权重为0

h1{color:red}
h2{color:red}
只要使用分组选择器
h1,h2{color:red}

列子：.frist,#second span{color:green;}

<p class="frist">......</p<span style="font-family:Arial, Helvetica, sans-serif;">></span>

<p id="second">......</p>

/*效果为圈中的class和second的都为绿色*/