CSS常见选择器的用法

1.选择器的作用

当我们要对某个标签元素进行操作时，必须要选中它，才能设置其属性，由此引出了选择器。

2.基础选择器

2.1标签选择器

特点：

• 能快速把同一类标签选择出来
• 不能差异化选择（如果想要操作同一个标签中的不同内容，是不可以的）

<style>
        p {
            color: red;
        }
        div {
            color: green;
        }
    </style>
        <p>哈哈哈</p>
        <p>哈哈哈</p>
        <p>哈哈哈</p>
        <div>嘿嘿嘿</div>
        <div>嘿嘿嘿</div>
        <div>嘿嘿嘿</div>

2.2类选择器

特点：

• 可以差异化操作不同的标签
• 让多个标签使用同一个选择器

<div class="blue">哈哈哈</div>
    <div>哈哈哈</div>
    <style>
        .blue {
            color: blue;
       }
    </style>

 

 2.3id选择器

和类选择器差不多

特点：

• CSS中用#开头表示id选择器
• id选择器的值和html某个元素的id值要相同
• html的元素id不用带#
• id是唯一的，不能被多个标签使用

<style>
        #ha {
            color: red;
       }
    </style>
    <div id="ha">哈哈哈</div>

2.4通配符选择器

特点：

• 使用*定义
• 选取所有的标签

<style>
        * {
        color: red;
       }
    </style>
    <p>hahaha</p>
    <div>heiheihei</div>

 3.复合选择器

3.1后代选择器

示例：把 ol 中的 li 修改颜色, 不影响 ul

<style>
            ol li {
        color: red;
    }
    </style>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>
    <ol>
        <li>ddd</li>
        <li>eee</li>
        <li>fff</li>
    </ol>

3.2子选择器

示例：把以下代码中的 "小猫" 改成红色

<div class="cat">
        <a href="#">小猫</a>
        <ul>
            <li><a href="#">小狗</a></li>
            <li><a href="#">小狗</a></li>
        </ul>
    </div>
    <style>
        .cat>a{
            color: red;
        }
    </style>