CSS笔记：3.选择器

选择器

选择器：帮助精准选中想要的元素。

简单选择器

1. ID选择器
2. 元素选择器
3. 类选择器
4. 通配符选择器
   *：选中所有元素。

    *{
        color:blue;
    }

5. 属性选择器
   根据属性名和属性值选中元素。

    [href]{
        color:red;
    }

    [href="https://www.sina.com"]{
        color:red;
    }

6. 伪类选择器
   选中某类元素的某种状态。
   (1) hover：鼠标悬停的状态。

    1. 选中鼠标悬停时的a元素。
        a:hover{
            color:green;
        }
    2. 选中鼠标悬停时的元素。
        :hover{
            color:green;
        }

(2) active：激活状态，鼠标按下时的状态。
(3) link：超链接未访问时的状态。
(4) visited：超链接访问过的状态。。

7. 伪元素选择器
   生成并选中某个元素内部的第一个或者最后一个子元素。
   before：子元素content
   after：

    span::before{
        content:"《";
        color:red;
    }
    span::after{
        content:"》";
        color:red;
    }
    <p>
    袁老师的<span>HTML和CSS</span>课程真是很好的！
    </p>

选择器的组合

1. 后代元素-空格

选中class为red的元素的后代元素li。
    .red li{
        
    }

2. 子元素->
   只能选中子元素。
3. 相邻兄弟元素-+
   下一个兄弟元素。
4. 兄弟元素-~
   后面出现的所有兄弟元素。
5. 并且

    <!--p元素共同的-->
    p{
        text-indent:2em;
        line-height：2；
    }
    <!--符合两者的-->
    p.red{
        color:red;
    }

    <p class="red">
      lorem asfd dfe def derg 
    </p>

选择器的并列

多个选择器用逗号分隔。