CSS选择器

  

 CSS选择器：基础、关系、属性、伪类、伪对象等；

 

选择器优先级的计算：style=1000(内联样式表)

                                   ID=100

                                   class=10

                                   element=1

 

1. 基础选择器  ID>class>element>*

 

2. 关系选择器

        1.包含（后代）选择器 E F    E为F的外层元素

        2.子选择器 E>F   　　  　E为F的父级

        3.相邻选择器 E+F  　 　  选择与自身相邻，且紧跟在自身后面的兄弟元素

        4.兄弟选择器 E~F      　  所有的符合条件的位于自身后面的兄弟元素

        5. 并集选择器 E，F         两者不需要有什么关系，只是同用一个样式

        6. 交集选择器 E.F ,E#F   具有F类名或id名的E元素

 

3.属性选择器     E与[ ]中不要有空格

    通过属性来选择，定义的时候用[] 来定义:

    【注意事项：1.必须是属性； 2. 属性选择器耗费资源比基本选择器大；】

    E[att]  通过属性名来选择

    E[att="val"]   属性名和属性值都符合才会被选中；

    E[att~="val"]  其中一个class符合即被选中；

    E[att^="val"]  以val开头的att属性被选中；

    E[att$="val"]  以val结尾的att属性被选中；

    E[att*="val"]  包含了val内容的属性值的元素会被选中；

    E[att|="val"]  以val开头，并且后面紧跟中划线的元素被选中；

    [class]{ color：red ;  }  ----->所有具有类名的元素都为红色；

 

4. 伪类         E与：中不要有空格

    通过冒号：定义伪类

    ：root   选择匹配文档的根元素（每个文档只有一个根元素）

    E:link   超链接未被点击时的状态（颜色、背景）               

    E:visited   超链接被访问后的状态

    E:hover  鼠标悬停时的状态，不限a标签，其它元素也可以

    E:active  鼠标按下时的状态

　　【测试超链接的几个状态时，可以用快捷键Ctrl+H：清除缓存】 

    E:not(s)  除去括号里面的选择器的元素，其它的元素会被选中。括号里面可以是class选择器
也可以是id选择器，要通过.或#来选择，并且        不要加引号

    E:first-child E需要具有父级，并且E是父级的第一个元素  E代表了要操作元素本身，并非父元素

    E:last-child   同上

    E:only-child 具有父元素，并且E是父元素中唯一的

    E:empty 匹配完全没有内容的E元素，空格和换行都算做内容。

    E:checked  可以匹配被选中的元素，

            如radio 和select 中的option

            <input type="radio" name="gender" checked="checked" />

            <option value="0" selected="selected" >汽车</option>

       -------cheked实例

            html结构

            <form action="">

                    <input type="radio" name="gender" /><span>男</span>

                    <input type="radio" name="gender"/><span>女</span>

                    <select name="" id="">

                            <option value="0">汽车</option>

                            <option value="1" selected="selected">火车</option>

                            <option value="2">自行车</option>

                    </select>

            </form>

            css样式

                        input:checked + span{color: red;}

                        option:checked{ color: aqua;}

 

5.伪对象选择器（不存在于HTML中，不会改变文档的结构）   E与::中不要有空格

    用::来定义伪元素（伪对象）

    E::before{ content:" "; }

    E::after{ content:" "; }

          例：1.  16° -----> ::after 结合position:absolute;

                2.   利用伪元素给文档添加图片 （display：block；设置大小；）

　　　　　  3.利用伪元素清除浮动：.clearfloat:after {content: ""; display: block; height:0; clear:both; visibility: hidden;}

　　　　　　 4.利用伪元素绘制简单的图形，例如小三角等;

　　　　　　　　伪元素的用处还有很多，不再一一列举；

【注意事项：

    E 只能有一个after和一个before，若有多个按最后一个显示；

　　伪元素不存在于文档流，不能被选中;】

 

 

<------学习笔记，如有错误，谢谢指正！------->