CSS----选择器

 css选择器：

组合选择器

1.后代选择器 (不分层级，只让p标签变色) .c2 p{color:red} 
    2.子代选择器（只在儿子层找） .c2>p{color:red}
    3.多元素选择器：同时匹配所有指定的元素  .div,p{color:red}
　　　　　　　　　　　　　　　　　　　　　　　或者

 　　　　　　　　　　　　　　　　　　　　　　　　.c2 .c3,.c2~.c3{
            　　　　　　　　　　　　　　　　　　　　　　　　　　　color: red;
            　　　　　　　　　　　　　　　　 　　　　　　　　　　 background-color: green;
            　　　　　　　　　　　　　　　　　　　　　　　　　　　font-size: 15px;
        　　　　　　　　　　　　　　　　}
 
    不常用    
　　3.毗邻选择器（紧挨着，找相邻的,只找下面的，不找上面的）.c2+p{color:red}    #只找一个
　　4.兄弟选择器：同一级别的 .c2~p{color:red}                             #.C2 同一级 之后的 所有 p 标签
　　5.多元素选择器： .c2 .c3,.c2~ .c3{ color:red }

css选择多个class

<div class="a b" />
<style>
.a.b {
}
</style>

　　

　　

类选择器

　　以(.)开头的即class     .div{}

属性选择器

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元素

　　

伪类

anchor(锚)伪类：专用于控制链接的显示效果

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>元素之后插入内容        同一行

例：p:before{content:"hello";color:red;display: block;}

　　

css优先级和继承

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中下面的样式会覆盖上面的样式