第19节 css高级特性之复合选择器

最新推荐文章于 2021-08-03 18:31:28 发布

Simple-Coder

最新推荐文章于 2021-08-03 18:31:28 发布

阅读量355

点赞数

分类专栏： Html+css

本文链接：https://blog.csdn.net/qq_32895969/article/details/55252264

版权

Html+css 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

复合选择器

<html>
    <head>
        <title>css高级特性之&nbsp&nbsp&nbsp复合选择器</title>
        <style type="text/css">
        /*交集选择器*/
            /*h1{color:red; text-align:center;}
            p{color:orange}
            h2.special{color:red}
            .special{color:blue}*/
            /*并集选择器*/
        /*h2,h3,h4,h5,h6,p{color:gray;font-family:楷体;text-align:center}*/

        /*后代选择器*/
        p span{color:red}
        span{color:blue}

        /*后代选择器之类别选择器*/
        .special i{color:green;}
        #one li{padding-top:20px;}
        td.out .inside strong{font-size:16px;}
        </style>
    </head>
    <body>
        <h1>复合选择器包含：交集选择器、并集选择器、后代选择器</h1>
        <hr/><br/>
        <h2 class="special">交集选择器格式：标签.{属性:值;属性:值;}</h2>
        <p>我的颜色是橘色</p>
        <p class="special">我是蓝色</p>
        <hr/><br/>

        <h2>并集选择器格式：标签,标签,标签{属性:值;属性:值;}</h2>
        <h3>标题三</h3>
        <h4>标题四</h4>
        <h5>标题五</h5>
        <h6>标题六</h6>
        <p>并集选择器段落</p>
        <hr/><br/>

        <h2>后代选择器</h2>
        <p>后代选择器格式：<外标签><内标签></内标签></外标签> 这种形式就是说内标签是外标签的后代  css用法p span{属性:值}</p>
        样式如下：
        <p>嵌套使<span>用css(红色)</span>标记的方法嵌套之外的</p>
        <span>标记（蓝色）</span>不生效
        <hr/><br/>
        <p class="special">后代选择器之组合<i>类别选择器</i></p>
        <p id="one"><li>后代选择器之组合之ID选择器</li></p>

        <td class="out">
            <p class="inside">
                其他内容<strong>css控制</strong>其他内容
            </p>
        </td>
    </body>
</html>

Simple-Coder

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第19节 css高级特性之复合选择器

复合选择器<html> <head> <title>css高级特性之&nbsp&nbsp&nbsp复合选择器</title> <style type="text/css"> /*交集选择器*/ /*h1{color:red; text-align:center;} p{color:orange}
复制链接

扫一扫