By

文章目录
  1. 1. 标签选择器
  2. 2. 类选择器
  3. 3. id选择器
  4. 4. 通配符选择器
  5. 5. 后代选择器
  6. 6. 子元素选择器(亲儿子选择器)
  7. 7. 并集选择器
  8. 8. 伪类选择器
    1. 8.0.1. 链接伪类选择器
    2. 8.0.2. focus伪类选择器
  • 9. 属性选择器
  • 10. 结构伪类选择器 E:nth-child(n)
  • 11. 伪元素选择器
  • 12. 总结

    • 本篇主要是记录常用的CSS选择器和一些需要注意的细节，提升熟练度的同时方便查阅。

    标签选择器

    标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <head>
        <title>基础选择器之标签选择器</title>
        <style>
        /* 标签选择器 : 写上标签名 */
        p {
            color: green;
        }
        div {
            color: pink;
        }
        </style>
    </head>
    <body>
        <p>男生</p>
        <p>男生</p>
        <p>男生</p>
        <div>女生</div>
        <div>女生</div>
        <div>女生</div>
    </body>

    类选择器

    如果想要差异化选择不同的标签，单独选一个或者几个标签，可以使用类选择器。

    类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点 . 号来显示。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    </head>
    <title>基础选择器之类选择器</title>
        <style>
            /* 类选择器口诀: 样式点定义  结构类(class)调用  一个或多个 开发最常用*/
          .red {
              color: red;
          }
          .star-sing {
            color: green;
          }
          .memeda {  
             color: pink;
          }
        </style>
    </head>
    <body>
        <ul>
            <li class="red">冰雨</li>
            <li class="red">来生缘</li>
            <li>李香兰</li>
            <li class="memeda">生僻字</li>
            <li class="star-sing">江南style</li>
        </ul>
        <div class="red">我也想变红色</div>
    </body>

    实际开发中，类选择器是应用最广泛的。同时，类选择器的 多类名 也会频繁使用。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <head>
        <title>多类名的使用方式</title>
        <style>
            .red {
                color:  red;
            }
            .font35 {
                font-size: 35px;
            }
        </style>
    </head>
    <body>
        <div class="red font35">刘德华</div>
    </body>

    如果一个标签拥有多个类名，表明这个标签分别拥有这多个类的特性。

    各个类名中间用空格隔开。在布局复杂的情况下，还是比较常用的。

    id选择器

    id选择器可以为标有特定id的HTML元素指定特定的样式。

    HTML元素以 id属性 来设置id选择器，CSS中id选择器以 # 来定义。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <head>
        <title>基础选择器之id选择器</title>
        <style>
            /* id选择器的口诀: 样式#定义, 结构id调用, 只能调用一次, 别人切勿使用 */
          #pink {
              color: pink;
          }
        
        </style>
    </head>
    <body>
        <div id="pink">迈克尔·杰克逊</div>
        <div>pink++</div>
    </body>

    id选择器和类选择器的区别

    • 类选择器（class）好比人的名字，一个人(标签)可以有多个名字，同时一个名字也可以被多个人使用。
    • id 选择器好比人的身份证号码，全中国唯一的，不得重复。也就是说，一个标签使用了id为pink的选择器，那么其它标签不能再使用名为pink的id选择器了。
    • 两者最大的不同在于使用次数上。
    • 类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和javaScript搭配使用。

    通配符选择器

    在CSS中，通配符选择器使用 * 定义，它表示选择页面中所有元素（标签）。通配符选择器不需要调用，自动就给所有元素使用样式。

    1
    2
    3
    4
    * {
    	margin: 0;
    	padding: 0;
    }

    —————————————-上面的是基础选择器，下面的为复合选择器 —————————————-

    后代选择器

    后代选择器又称为包含选择器，可以选择父元素里面的子元素，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。

    语法：

    1
    元素1 元素2 { 样式声明 }

    例如：

    1
    ul li {样式声明}   // 选择ul里面所有的li标签元素。
    • 元素1是父级，元素2是子级，最终选择的是元素2。
    • 元素1和元素2可以是任意的基础选择器。
    • 后代选择器的意思是选中ul后代中所有的li，不管是孩子还是孙子还是孙孙子。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
     <title>复合选择器之后代选择器</title>
        <style>
            /* 我想要把ol里面的小li选出来改为pink */
            ol li {
                color: pink;
            }
            
            ol li a {
                color: red;
            }

            .nav li a {
                color: yellow;
            }
        </style>
        <body>
        <ol>
            变态写法
            <li>我是ol 的孩子</li>
            <li>我是ol 的孩子</li>
            <li>我是ol 的孩子</li>
            <li><a href="#">我是孙子</a></li>
        </ol>
        <ul>
            <li>我是ul 的孩子</li>
            <li>我是ul 的孩子</li>
            <li>我是ul 的孩子</li>
            <li><a href="#">不会变化的</a></li>
        </ul>
        <ul class="nav">
            <li>我是ul 的孩子</li>
            <li>我是ul 的孩子</li>
            <li>我是ul 的孩子</li>
            <li><a href="#">不会变化的</a></li>
            <li><a href="#">不会变化的</a></li>
            <li><a href="#">不会变化的</a></li>
            <li><a href="#">不会变化的</a></li>
        </ul>
    </body>

    上面的例子中 .nav li a 表示选中的为：类选择器为nav的后代li的后代a。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <style>
       .nav a {
           color: red;
       }
    </style>
    <body>
        <div class="nav">
            <a href="#">我是儿子</a>
            <p>
                <a href="#">我是孙子</a>
            </p>
        </div>
    </body>

    这个例子中所有的 a标签 的color都会变成red，因为一个a是儿子，一个a是孙子，都是 .nav 的后代。

    子元素选择器(亲儿子选择器)

    子元素选择器（子选择器）只能选择作为某元素的最近一级子元素，也就是选亲儿子元素。

    语法：

    1
    元素1 > 元素2 {样式声明}

    上面语法表示选择元素1里面的所有直接后代元素2。

    元素2必须是亲儿子，其孙子、重孙子都不包括在内。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <style>
        .nav>a {
            color: red;
        }
    </style>
    <body>
        <div class="nav">
            <a href="#">我是儿子</a>
            <p>
                <a href="#">我是孙子</a>
            </p>
        </div>
    </body>

    同样是上面后代选择器的例子，这里只有儿子a会被选择，孙子a 不会被选择。

    并集选择器

    并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。

    语法：

    1
    元素1,元素2 {样式声明}

    注意是用英文逗号连接。上述语法表示选择元素1和元素2。逗号表示和的意思。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <style>
        /* 要求1: 请把熊大和熊二改为粉色 */
        /* div,
        p {
            color: pink;
        } */

        /* 要求2: 请把熊大和熊二改为粉色 还有 小猪一家改为粉色 */
        div,
        p,
        .pig li {
            color: pink;
        }

        /* 约定的语法规范,我们并集选择器喜欢竖着写 */
        /* 一定要注意,最后一个选择器 不需要加逗号 */
    </style>
    <body>
        <div>熊大</div>
        <p>熊二</p>
        <span>光头强</span>
        <ul class="pig">
            <li>小猪佩奇</li>
            <li>猪爸爸</li>
            <li>猪妈妈</li>
        </ul>
    </body>

    例子中 div,p,.pig li 表示 div 和 p 和 pig的后代li被选择。.pig li 就是上面讲过的后代选择器。

    伪类选择器

    伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

    伪类选择器书写最大的特点是用冒号(:)表示，比如 :hover 、 :first-child 。

    冒号前后不要空格。

    链接伪类选择器

    1
    2
    3
    4
    a:link    // 选择所有未被访问过的链接
    a:visited  // 选择所有已被访问过的链接
    a:hover    // 选择鼠标指针位于其上的链接
    a:active   // 选择活动链接(鼠标按下未弹起的链接)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    <head>
        <title>复合选择器之链接伪类选择器</title>
        <style>
            /* 1.未访问的链接 a:link  把没有点击过的(访问过的)链接选出来 */
            a:link {
                color: #333;
                text-decoration: none;
            }

            /*2. a:visited 选择点击过的(访问过的)链接 */
            a:visited {
                color: orange;
            }

            /*3. a:hover 选择鼠标经过的那个链接 */
            a:hover {
                color: skyblue;
            }

            /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
            a:active {
                color: green;
            }
        </style>
    </head>
    <body>
        <a href="#">小猪佩奇</a>
        <a href="http://www.xxxxxxxx.com">未知的网站</a>
    </body>

    链接伪类选择器注意事项：

    • 为了确保生效，请按照LVHA的顺序声明。即 :link :visited :hover :active 。

    链接伪类在实际开发中经常的写法：

    1
    2
    3
    4
    5
    6
    7
    8
    // a标签选择器 所有标签
    a {
    	color: gray;
    }
    // :hover 鼠标经过时的状态设置
    a:hover {
        color: red;
    }

    focus伪类选择器

    :focus 伪类选择器用于选取获得焦点(光标)的表单元素。

    焦点就是光标，一般情况下<input>类表单元素才能获取，因此这个选择器也主要针对表单元素来说。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // 当input获取到光标的时候就改变背景色。
    input:focus {
        background-color: yellow;
    }

    <body>
        <input type="text">
        <input type="text">
        <input type="text">
    </body>

    —————————————-下面的为CSS3新增的选择器 —————————————-

    属性选择器

    属性选择器可以根据元素特定属性来选择元素，这样就可以不用借助于类或者id选择器了。

    可以看看w3cschool总结的参考手册 。

    主要通过例子来理解：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    <style>
        /* 必须是input 但是同时具有 value这个属性 选择这个元素  [] */
        /* input[value] {
            color:pink;
        } */
        /* 只选择 type =text 文本框的input 选取出来 */
        input[type=text] {
            color: pink;
        }
        /* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
        div[class^=icon] {
            color: red;
        }
        section[class$=data] {
            color: blue;
        }
        div.icon1 {
            color: skyblue;
        }
        /* 类选择器和属性选择器 伪类选择器 权重都是 10 */
    </style>
    <body>
        <!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 -->
        <!-- <input type="text" value="请输入用户名">
        <input type="text"> -->
        <!-- 2. 属性选择器还可以选择属性=值的某些元素 重点务必掌握的 -->
        <input type="text" name="" id="">
        <input type="password" name="" id="">
        <!-- 3. 属性选择器可以选择属性值开头的某些元素 -->
        <div class="icon1">小图标1</div>
        <div class="icon2">小图标2</div>
        <div class="icon3">小图标3</div>
        <div class="icon4">小图标4</div>
        <div>我是打酱油的</div>
        <!-- 4. 属性选择器可以选择属性值结尾的某些元素 -->
        <section class="icon1-data">我是安其拉</section>
        <section class="icon2-data">我是哥斯拉</section>
        <section class="icon3-ico">哪我是谁</section>

    </body>

    结构伪类选择器 E:nth-child(n)

    选择符 简介
    E:first-child 匹配父元素中的第一个子元素E
    E:last-child 匹配父元素中最后一个E元素
    E:nth-child(n) 匹配父元素中第n个子元素E
    E:first-of-type 指定类型E的第一个
    E:last-of-type 指定类型E的最后一个
    E:nth-of-type(n) 指定类型E的第n个

    通过例子来理解：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    <style>
        /* 1.把所有的偶数 even的孩子选出来 */
        ul li:nth-child(even) {
            background-color: #ccc;
        }

        /* 2.把所有的奇数 odd的孩子选出来 */
        ul li:nth-child(odd) {
            background-color: gray;
        }
        /* 3.nth-child(n) 从0开始 每次加1 往后面计算  这里面必须是n 不能是其他的字母 选择了所有的孩子*/
        /* ol li:nth-child(n) {
            background-color: pink;
        } */
        /* 4.nth-child(2n) 选择了所有的偶数孩子 等价于 even*/
        /* ol li:nth-child(2n) {
            background-color: pink;
        }
       	// 选择了所有的基数孩子
        ol li:nth-child(2n+1) {
            background-color: skyblue;
        } */
        // 选择了从第三个开始(包含第三个)(这里是从1开始的) 的孩子
        /* ol li:nth-child(n+3) {
            background-color: pink;
        } */
        // 选择了前三个孩子
        ol li:nth-child(-n+3) {
            background-color: pink;
        }
    </style>
    <body>
        <ul>
            <li>我是第1个孩子</li>
            <li>我是第2个孩子</li>
            <li>我是第3个孩子</li>
            <li>我是第4个孩子</li>
            <li>我是第5个孩子</li>
            <li>我是第6个孩子</li>
            <li>我是第7个孩子</li>
            <li>我是第8个孩子</li>
        </ul>
        <ol>
            <li>我是第1个孩子</li>
            <li>我是第2个孩子</li>
            <li>我是第3个孩子</li>
            <li>我是第4个孩子</li>
            <li>我是第5个孩子</li>
            <li>我是第6个孩子</li>
            <li>我是第7个孩子</li>
            <li>我是第8个孩子</li>
        </ol>
    </body>

    nth-child 和 nth-of-type 的区别

    nth-child 对父元素里面所有孩子排序选择(序号是固定的),先找到第n个孩子，然后看看是否和E匹配。

    nth-of-type 对父元素里面指定的子元素进行排序选择。先去匹配E，然后再根据E 找到第n个孩子。

    来看例子：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    <style>
        ul li:first-of-type {
            background-color: pink;
        }
        ul li:last-of-type {
            background-color: pink;
        }
        ul li:nth-of-type(even) {
            background-color: skyblue;
        }
        /* nth-child 会把所有的盒子都排列序号 */
        /* 执行的时候首先看  :nth-child(1) 之后回去看 前面 div */

        section div:nth-child(1) {
            background-color: red;
        }
         /* nth-of-type 会把指定元素的盒子排列序号 */
        /* 执行的时候首先看  div指定的元素  之后回去看 :nth-of-type(1) 第几个孩子 */
        section div:nth-of-type(1) {
            background-color: blue;
        }
    </style>
    <body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
    <section>
        <p>光头强</p>
        <div>熊大</div>
        <div>熊二</div>
    </section>
    </body>

    类选择器、属性选择器、伪类选择器 权重都为10 。

    伪元素选择器

    伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

    新创建的这个元素，在文档树中是找不到的，所以我们称为伪元素。

    语法：

    选择符 简介
    ::before 在元素内部的前面插入内容
    ::after 在元素内部的后面插入内容
    • before 和 after 创建一个元素，但是属于行内元素。

    看例子：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        /* div::before 权重是2 */
        div::before {
            /* 这个content是必须要写的 */
            /* display: inline-block; */
            content: '我';
            /* width: 30px;
            height: 40px;
            background-color: purple; */
        }
        div::after {
            content: '小猪佩奇';
        }
    </style>
    <body>
    <div>
        是
    </div>
    </body>

    该选择器在实际开发中主要是用来创建一些小图标元素。content的内容是图标对应的编码即可。

    总结

    本来以为很快就会总结完这些常用选择器，没想到花费了多半天的时间。工欲善其事必先利其器，学习路上切记走马观花，要一步一个脚印才能有所收获和积累。

    文章目录
    1. 1. 标签选择器
    2. 2. 类选择器
    3. 3. id选择器
    4. 4. 通配符选择器
    5. 5. 后代选择器
    6. 6. 子元素选择器(亲儿子选择器)
    7. 7. 并集选择器
    8. 8. 伪类选择器
      1. 8.0.1. 链接伪类选择器
      2. 8.0.2. focus伪类选择器
  • 9. 属性选择器
  • 10. 结构伪类选择器 E:nth-child(n)
  • 11. 伪元素选择器
  • 12. 总结