CSS 几种常见的选择器

        在css中，要对元素添加样式，可以使用选择器来实现。这里就来说说几种比较常见的选择器。选择器的逻辑是选中页面中指定的标签元素。要先选中元素，才能选中元素的属性。

标签选择器

        标签选择器能快速为同一类的标签添加样式。

    标签 {
 
    }

    <p>第一段p>
    <p>第二段p>
    <p>第三段p>
    <div>第一个divdiv>
    <div>第二个divdiv>
    <div>第三个divdiv>

类选择器

        上述的标签选择器会选中全部符合要求的标签。但是现在我只想把第一段给变成红色，这个时候就可以使用类选择器，差异化表示不同的标签。

    .标签 {
    
    }
    

    <p class="red">第一段p>
    <p>第二段p>
    <p>第三段p>
    <div class="red">第一个divdiv>
    <div>第二个divdiv>
    <div>第三个divdiv>

注意：

（1）类选择器使用.来开头。

（2）下方的标签必须要使用class属性来调用。

（3）一个类可以被多个标签使用，一个标签可以使用多个类，使用空格分开。

id选择器

        和类选择器类似，使用#开头，标签中需要id属性来调用，id是唯一的，和类选择器的区别就是不能被多个标签使用（类似于姓名和身份证号之间的关系。姓名可以相同，但是身份证号不能相同）。

    #标签 {
    
    }
    

    <style>
        #red {
            color: red;
        }
    style>

    <p id="red">第一段p>
    <p>第二段p>
    <p>第三段p>

通配符选择器

        使用*，选中所有的标签。

    <p id="red">第一段p>
 
    <div>第一个spandiv>
 
    <h4>标题h4>

 以上选择器被称为基础选择器。

后代选择器

        又称为包含选择器，选择某个父元素中的某个子元素。这里的后代不仅仅是儿子,也可以是孙子等等。

    元素1 元素2 {
 
    }    

元素1和元素2之间使用空格分割。选择的结果之影响元素2。

    <ul>
        <li>ul的lili>
        <li>ul的lili>
    ul>
 
    <ol>
        <div>divdiv>
        <li>ol的lili>
        <li>ol的lili>
    ol>

可以是任意基础选择器的组合。

    <ul>
        <li>ul的lili>
        <li>ul的lili>
    ul>
 
    <ol class="red-ol">
        <div>ol中的divdiv>
        <li class="red-li">ol的lili>
        <li>ol的lili>
        <li>ol的lili>
    ol>

子选择器

        和后代选择器类似，但是只能选择亲儿子，不能选择其他的。

    元素1>元素2 { 
 
    }

    <div class="two">
        <a href="#">链接1a>
        <p><a href="#">链接2a>p>

并集选择器

        用于选择多组标签，通过逗号分割等多个元素，完成集体声明。

    元素1, 
    元素2 {
 
    }

    <p>p标签p>
    <div>div标签div>
    <h4>h4标签h4>

伪类选择器（链接伪类）

        伪类选择器有很多，这里主要说说链接的伪类选择器。

a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起)
(要注意顺序，LVHA，否则不生效)
(实际开发主要给链接做一个样式, 然后给 hover 做一个样式即可. link, visited, active 用的不多)

        a:hover {
            color: green;
        }
 
        a:active {
            color: red;
        }

    <a href="#">链接1a>

以上选择器，和基础选择器对应的，叫做复合选择器。