CSS 选择器

CSS 选择器

基础选择器

作用：查找标签，设置样式

标签选择器

特点：选中同名标签设置相同的样式

语法：使用 HTML 元素的名称来选择元素

span {
   
    color: blue;
}

类选择器

语法：以 . 开头，后面跟上类名

<style>
    .nav {
     
        color: blue;
    }
</style>

<div class="nav"></div>

id 选择器

语法：以 # 开头，后面跟上 id 名

<style>
    #main {
     
        color: blue;
    }
</style>
<div id="main"></div>

通配符选择器

作用：查找所有页面标签，设置相同样式

语法：使用通配符 *

<style>
    * {
     
        margin: 0;
        padding: 0;
    }
</style>

组合选择器

作用：通过不同基础选择器的组合，高效的选择目标元素

后代选择器

作用：选择符合条件的后代元素（子级，孙级）

语法：多个选择器之间使用 空格 隔开

<style>
    .container p {
     
        color: blue;
    }
</style>

<div class="container">
    <p>段落一</p>
    <section>
        <p>段落二</p>
    </section>
</div>

子代选择器

作用：选择符合条件的子元素

语法：多个选择器之间使用 > 隔开

<style>
    .container > p {
     
        color: blue;
    }
</style>

<div class=