#CSS 基础# 样式选择器（重点）有哪些类型的选择器类选择器选择所有标注了指定 class 名称的标签语法格式

有哪些类型的选择器

优先级：ID选择器 > 类选择器 > 标签选择器

类选择器

选择所有标注了指定 class 名称的标签

语法格式 .类名 {}

.demo {
    color:red;
}
 <h1 class="demo">标题</h1>

标签选择器

选中某一类标签
语法格式：标签名 {}

    h1{
        color:red;
    }
    
    <h1>标题</h1>

ID选择器

选择指定 id 的标签
语法格式：#id名 {}

    #idName {
        color:red;
    }

    <h1 id="idName">标题</h1>

层次选择器（混合）

后代选择器

某个标签下的某种标签，没有层级限制（只要是自身的后代就行）
语法：父级任何后代 {}

body p {
    color:yellow;
}

body li {
    color:red;
}

<body>
    <p>
           我会变黄色
      </p>
    <h1>
        <p>
            我会变黄色
        </p>
        
        <span>
            <p>
                我会变黄色
            </p>
        </span>
    </h1>

    <ul>
        <li>我会变红色</li>
        <li>我会变红色</li>
        <li>我会变红色</li>
    </ul>
</body>

子选择器
- 某个标签下的子标签，限制为自己的下一层（只能是自己的儿子）
- 语法：父级子级{}

    body >p{
        color:red;
    }
    
    <body>
        <p>我会变红色</p>
        <h1 class="class01">
            <p>我不会变红色</p>
            <span>
                <p>我不会变红色</p>
            </span>
            <p>我不会变红色</p>
        </h1>
    </body>

相邻兄弟选择器
- 和自己相同的同级标签，向下选择一个相邻的同类节点（找自己同级的一个弟弟）

     .class002 + p{
        color:red;
    }
    
    <body>
         <p>我不会变红色</p>
        <p class="class002">我不会变红色</p>
        <p>我会变红色</p>
        <p>我不会变红色</p>
        <p>我不会变红色</p>
    </body>

通用选择器
- 和自己相同的同级标签，向下选择所有相邻的同类节点（找自己同级的所有弟弟）

     .class003 ~ p{
        color:red;
    }
    
    <body>
         <p>我不会变红色</p>
        <p class="class003">我不会变红色</p>
        <p>我会变红色</p>
        <p>我会变红色</p>
        <p>我会变红色</p>
    </body>