CSS 连续选择器

"连续选择器" 自创术语，该用法里各选择器连续的写法。其他地方有其他叫法。

1 语法

选择器1选择器2选择器3{
  样式内容
}

各选择器之间没有空隔，连续写。

表示页面内同时符合这多个选择器的元素被筛选，进行样式设置。

各选择器可以是基本选择器里任意1种。

2 示例

html代码

    <div>
        <h3 class="class1">标题1</h3>
        <p class="class1">第1段</p>
        <p class="class1" id="id1">第2段</p>
        <p class="class2 class3">第3段</p>   
    </div>

需求

class包含class1的元素：字体大小设为24px，粗体；

class包含class1的p标签：设为红色；

id为id1的class包含class1的p标签：添加下划线；

class包含class2与class3的元素：设置为斜体。

css代码

<head>
    <meta charset="UTF-8">
    <title>css 连续选择器 | 关关教程</title>
    <style>
         .class1{
            font-size:24px;
            font-weight: 700;
         }

         p.class1{
            color: #f00;
         }

         p.class1#id1{
            text-decoration: underline;
         }

         .class2.class3{
            font-style: italic;
         }
    </style>
</head>

其它组合形式

自己试试吧。

❮上一节 CSS 逗号选择器下一节 CSS 引入方式❯

第06章 CSS基础教程

CSS 连续选择器

1 语法

2 示例

html教程