CSS的选择器

一，选择器

class选择器：改class内的元素
*选择器：所有元素
id选择器：id下的所有元素//谨慎使用，并确保id唯一。因为js较多的以id选取元素。重复的id可能造成js执行紊乱
标签选择器：标签下的所有元素

span *//span下的所有元素
p span//p标签下的所有span标签内容元素
p > span//p标签的直接子元素是span才可以，中间不可有其他标签
p + span//p标签的同级相邻的下方的元素,
div + strong + strong//div下方的strong下方的strong会受到该样式影响
.tag.container{}//class="tag container"这个元素
.tag .container{}//class="tag"这个元素里面的class=“container”的元素

//共有4种形式
1.标签[attr]//匹配所有含有attr这个属性的标签，将忽略属性值
2.标签[attr = 'value']//* [type="text"],匹配type='text'这个属性的标签
3.标签[attr ~= 'value']//当属性attr有属性值为value是，匹配到。value是一个值，或者多个值中的一个。要求被空格隔开
4.标签[attr |= 'value']//当属性attr有属性值为value开头，只有value属性值，或者是value-，有“-”间隔开

:hover //鼠标覆盖 ，样式
:visited//已访问过，样式
:link//未访问，样式
:active//活动连接，样式
//缺点IE6，IT7不怎么支持

:before
:after
//缺点IE6，IT7不怎么支持

二，选择器的覆盖

p{
color: red;
}
p{
color: blue;
}
//下面的蓝色p标签将覆盖上面的红色

p.container{
color: blue;
}
p{
color: red;
}

p{
color: red !important
}
//添加了该该属性的样式权重值达到最高。
//一定要谨慎使用，最好最为单一样式进行使用。便于修改

三，选择器的权重

//权重分为5级
1:标签选择符，伪类，伪对象
10:类选择符，属性选择符
100:ID选择符
1000:放在标签内部style里面的样式
0:其他选择器，例如*
!important  权重值比以上都搞

//计算方式
//p.tab=1+10 = 11
//#tab=1+10 = 100
//style="font-size:12px" = 1000

四，CSS的引入方式

1.行内的style属性内——行间样式//优点权重高，缺点写在头部，.css中的样式很难覆盖行内样式。统一调整时需要单独处理
2.页面顶部的<style></style>标签内——内嵌样式//每个html文件都需要单独修改
3.<link/>引入的外部样式文件——外联样式表//推荐，方便引用和修改
4.@import引入的外部样式文件——导入样式表//优点，可以在css文件中引入css文件。缺点，引入的css文件执行顺序导致页面初始化结构混乱