CSS----选择器

 css选择器：

 

组合选择器

 

1.后代选择器 (不分层级，只让p标签变色) .c2 p{color:red} 
2.子代选择器（只在儿子层找）          .c2>p{color:red}
3.多元素选择器：同时匹配所有指定的元素  .div,p{color:red}
　　　　　　　　　　　　　　　　　　　　　或者
　　　　　　　　　　　　　　　　　　　　　.c2 .c3,.c2~.c3{
        　　　　　　　　　　　　　　　　}
 
不常用    
3.毗邻选择器（紧挨着，找相邻的,只找下面的，不找上面的）,只找一个
　　.c2+p{color:red}   
4.兄弟选择器：同一级别的,同一级 之后的 所有 p 标签
　　.c2~p{color:red}      

选择器种类

//类选择器
.class{}
#id选择器
#id{}

//属性选择器
p[id^=p]                  匹配p标签中id属性是以p开头的
p[id$=p]                  匹配p标签中id属性是以p结尾的
p[id*=p]                  匹配p标签中id属性中含有p字符的
p[att]                    匹配所有具有att属性的p元素          p[class=p1]==p.p1  p[id=p1]==p#p1 
p[att=val]                匹配所有att属性等于“val”的p元素
p[att~=val]               匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的p元素

　　

伪类

　　伪类：专用于控制链接的显示效果

a:link（没有接触过的链接）,用于定义了链接的常规状态。  一开始的状态
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。  
a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
伪类选择器 : 伪类指的是标签的不同状态: 
                   a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态 
a:link {color: #FF0000} /* 未访问的链接 */ 
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }

//before after伪类
:before    p:before        在每个<p>元素之前插入内容     　 同一行
:after     p:after         在每个<p>元素之后插入内容        同一行 

　　

css优先级和继承

<div>
    <p>sdf</p>
    <p>sdf</p>
</div>

给div设置颜色，子代(所有)都会继承这个颜色
但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。

 

css优先级

所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。

1 内联样式表的权值最高               style=""－－－－－－－－－－－－       1000；

2 统计选择符中的ID属性个数。       #id －－－－－－－－－－－－－－   100

3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10
4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-－ 1

!important > 行内样式 (1000)> ID (100)> 类、伪类、属性(10) > 标签名 (1)> 通配符(0)>继承 

按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。

样式覆盖

style中下面的样式会覆盖上面的样式