码迷,mamicode.com
首页 > 其他好文 > 详细

组合选择器

时间:2019-01-24 21:58:45      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:技术分享   html元素   nta   idt   案例   统一   ref   元素   .com   

标签(空格分隔): 高级选择器


高级选择器

技术分享图片

后代选择器

因为HTML元素可以嵌套,所以我们可以从某个元素的后代查找特定元素,并设置样式:

div p {
  color: red;
}

从div的所有后代中找p标签,设置字体颜色为红色。

儿子选择器

div>p {
  color: red;
}

从div的直接子元素中找到p标签,设置字体颜色为红色。

毗邻选择器

div+p {
  color: red;
}

弟弟选择器

div~p {
  color: red;
}

找到所有div标签后面同级的p标签,设置字体颜色为红色。
例如:如下案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高级选择器</title>
    <style type="text/css">

        /*div p{*/

            /*color :red;*/
        /*}*/
        /*div div p{*/
            /*color :yellowgreen;*/
        /*}*/
        /*.container div p{*/
            /*color:green;*/
        /*}*/
        .container >p{
            color:greenyellow;
        }
        h3{
            color:red;
            width:300px;
        }
        /*交集选择器*/
        h3.active{
            color:yellowgreen;
        }
        /*并集选择器,并集选择器组合,同一设置标签的统一样式*/
        a,h4{
            color:#666;
            font-size: 20px;
            text-decoration: none;

        }
        /* *表示所有的标签,但是性能会稍微差点*/
        *{
            
        }


    </style>
    <!--后代选择器,在css中是用频繁-->
</head>
<body>
    <div class="container">
        <p>我是另一个段落</p>
        <div>

            <p>我是一个段落</p>
            <a href="#">lllllll</a>
        </div>
        <p>我是2段落</p>
        <ul>
            <li class="item">
                <h3 class="active">我是一个和h3</h3>
            </li>
            <li>
                <h4>我是H4</h4>
                <a href="#">BAT</a>

            </li>
        </ul>

    </div>

</body>
</html>

组合选择器

标签:技术分享   html元素   nta   idt   案例   统一   ref   元素   .com   

原文地址:https://www.cnblogs.com/surewing/p/10316788.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!