你的位置:首页 > 网页设计

[网页设计]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;设置大小;)
【注意事项:
    E 只能有一个after和一个before,若有多个按最后一个显示;
  伪元素不存在于文档流,不能被选中;】
 
 
<------学习笔记,如有错误,谢谢指正!------->