CSS 选择器

【CSS选择器包括:】
    基础选择器
    关系选择器
    属性选择器
    伪类选择器
    伪对象选择器

【基础选择器:】
    标签, id, class,通配符*

【关系选择器:】
    包含选择符 E F, 中间用空格
    子选择符 E>F, 对直接子元素起作用,对更深一层的元素不起作用
    相邻选择符 E+F, 选择相邻的第一个兄弟元素
    兄弟选择符 E~F, E元素之后的所有的兄弟元素,作用于多个元素

【属性选择器】(写法:元素[属性名="属性值"], 等号课换成其他符号):
    E[att] 具有att属性的E元素
    E[att="val"] att属性值是val的E元素
    E[att~="val"] att属性值中有一个值是val,那么E元素就会被选中
        例如:p[class~="p1"]{color:red;}
            <p class="p1 p2">段落</p> //被选中
            <p class="p3 p2">段落</p>
            <p class="p4 p2">段落</p>
            <p class="p4 p1 p2">段落</p> //被选中
    E[att^="val"] att属性值以val开始(前缀)的E元素
    E[att$="val"] att属性值以val结束(后缀)的E元素
    E[att*="val"] att属性值包含val,都会被选中
        例如:a[href*="baidu"]{color:red}
            <a href="www.baidu.com"></a> //被选中
            <a href="www.jd.com"></a>
            <a href="www.taobao.com"></a>

    E[att|="val"] att属性值是以 "val-" 开头的字符串
【伪类选择器】通过冒号来定义,为元素的不同状态添加样式(状态样式)
    E:link 设置超链接在未被访问前的样式 (“特指a标签”)
    E:visited 已经被访问的样式 (特指a标签)
    E:hover 设置鼠标放上面时的样式 (不限a标签,p li也可以)
    E:active 设置鼠标按下的样式 (不限a标签,p li也可以)
    E:not(s) 匹配不含有s选择器的元素E
        例如:div:not(.d1){color:red} not中的值不加引号
            <div class="d1">div块元素</div>
            <div class="d2">div块元素</div> //被选中
            <div class="d3">div块元素</div> //被选中
            <div class="d3 d1">div块元素</div>

    E:first-child 父元素的第一个子元素,如果E元素有父元素,而且E是父元素的第一个子元素
        例如:li:first-child{color:red} //匹配无效
              span:first-child{color:red} //span被匹配上
            <ul>
                <span>111</span>
                <li>首页</li>
                <li>服饰</li>
                <li>数码家电</li>
                <li>化妆品</li>
            </ul>
    E:last-child E有父元素且E是父元素的最后一个子元素
    E:only-child E有父元素且E是父元素唯一的子元素
    E:empty 匹配没有任何子元素和文本的元素E
        例如:p:empty {width:100px;}
            <p></p>  //被匹配
            <div></div> //空,但不是p元素
            <p>p元素</p>
            <p><a href="#">百度</a></p>
    E:checked 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
        例如:input:checked
    E:enabled input[type="text"]:enabled {}
    E:disabled input[type="text"]:disabled {}
    E:target
    E:nth-child(n) 匹配父元素的第n个子元素E,假设该子元素不是E,则选择符无效。
                    比如我们想选中所有的偶数子元素E,那么选择符可以写成:E:nth-child(2n)
阅读更多 登录后自动展开
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页