CSS复合选择器的使用精讲解析

最新推荐文章于 2023-03-31 20:21:19 发布

呆呆的鸭

最新推荐文章于 2023-03-31 20:21:19 发布

阅读量187

点赞数

分类专栏： HTML5 文章标签： css html html5

本文链接：https://blog.csdn.net/Javaprintf/article/details/108415680

版权

HTML5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

标签指定式选择器

用法：
       标签名.选择器名{属性:值; 属性:值;}
或者，
       标签名#选择器名{属性:值;}

       特点关系：既…又…

后代选择器

概念：当标签发生嵌套时，内层标签是外层标签的后代

作用：用来选择元素组下的某种元素标签

语法：父级某层子级 {属性:属性值}

例：div p {} 选择 div 下所有的 p 标签

并集选择器

定义相同样式时，同时选择多个选择器集体声明

语法：选择器1, 选择器2, 选择器3 {属性:属性值}

例：p, .one, #two {} 选择 p 标签和 .one 类和 #two类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS复合选择器解析</title>
    <style>
        h2{
            text-align:center;
            color: deeppink;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        }
        /* 类选择器 */
        .special{
            text-align:center;
            color: aqua;
        }
        /* 标签指定式选择器 */
        p.special{
            text-align:center;
            color: brown;
        }
        /* 后代选择器 */
        p strong{
            color:forestgreen;
        }
        /* 标签选择器 */
        strong{
            color: hotpink;
        }
        /* 并集选择器 */
        h5,.no1{
            text-align:center;
            color: lawngreen;
            font-size: 22px;
        }
        #one,h5{
            font-size: 22px;
            text-align:center;
            text-decoration: underline rgb(153, 0, 255);
        }
    </style>
</head>
<body>
    <h2>CSS复合选择器解析</h2>

    <p class="special">标签指定式选择器</p>
    <h4 class="special">标签指定式选择器</p>
        
    <p><strong>后代选择器，</strong></p>
    <strong>把这段字体加粗显示！</strong>

    <h5>并集选择器——1，颜色为绿色，加下滑线（紫色）</h5>
    <p class="no1">并集选择器——2，颜色为绿色</p>
    <p id="one">并集选择器——3，加下划线（紫色）</p>
</body>
</html>

呆呆的鸭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS复合选择器的使用精讲解析

标签指定式选择器用法：标签名.选择器名{属性:值; 属性:值;}或者，标签名#选择器名{属性:值;}特点关系：既…又…后代选择器概念：当标签发生嵌套时，内层标签是外层标签的后代作用：用来选择元素组下的某种元素标签语法：父级某层子级 {属性:属性值}例：div p {}选择 div 下所有的 p 标签并集选择器定义相同样式时，同时选择多个选择器集体声明语法：选择器1, 选择器2, 选择器3 {属性:属性值}例：...
复制链接

扫一扫