选择器(代码）

属性选择器

1、🔨 [class]

<style>
        [class]{
            background-color: pink;
        }
    </style>
    /*选中所有具有class属性的元素*/

2、🔨 [class=‘one’]

 <style>
        [class='one']{
            background-color: pink;
        }
    </style>
    /*选中class属性值为one的元素*/

3、🔨 [class~=‘one’]

<style>
        [class~='one']{
            background-color: pink;
        }
    </style>
    /*选中class属性值之一为one的元素*/

4、🔨 [class^=‘one’]

<style>
        [class^='one']{
            background-color: pink;
        }
    </style>
    /*选中class属性值以one开头的元素*/

4、🔨 [class$=‘one’]

<style>
        [class$='one']{
            background-color: pink;
        }
    </style>
    /*选中class属性值以one结尾的元素*/

5、🔨 [class*=‘one’]

<style>
        [class^='one']{
            background-color: pink;
        }
    </style>
    /*选中具有class属性，并且属性值中包含one的元素*/

6、🔨 [id]
选中具有id 属性的元素
7、🔨[id=‘one’]
选中具有id属性，且属性值为one的元素

伪类选择器（表示子元素的/与元素状态相关的）

1、表示子元素的

1、🔨:first-child

 p:first-child{
            background-color: pink;
        }
        /*选中作为p父元素的第一个子元素*/

2、🔨 :last-child

 p:last-child{
            background-color: pink;
        }
        /*选中作为p父元素的最后一个子元素*/

3、🔨 :nth-child(num/odd/even)

 p:last-child{
            background-color: pink;
        }
        /*选中作为p父元素的第nth个元素*/

4、：first-of-type

p:first-of-type{
            background-color: pink;
        }
  /*选中元素p的父元素的第一个p元素*/

5、：last-of-type

p:last-of-type{
            background-color: pink;
        }
  /*选中元素p的父元素的最后一个p元素*/

2、与元素状态相关的

：link：未点击状态
：hover：悬停状态
：active：鼠标按下状态
：visited：点击之后的状态

link->visited->hover->active

伪元素选择器

1、::first-letter

p:first-letter{
            color: pink;
        }
   /*选中p元素的文本中第一个字符*/

2、::first-line

p:first-line{
            color: pink;
        }
   /*选中p元素的文本中第一行字符*/

3、::before

p::before{
            content:url(./center_2.7.png);
        }
 /*在p元素里面的文本内容之前添加一张图片*/

 p::before{
            content: 'nihao ';
        }
  /*在p元素里面的文本内容之前添加文本*/

4、::after

p::after{
            content:url(./center_2.7.png);
        }
 /*在p元素里面的文本内容之后添加一张图片*/

 p::after{
            content: 'nihao ';
        }
  /*在p元素里面的文本内容之后添加文本*/

5、::selection（设置文本被选中之后的状态）

p::selection{
            color: red;
        }
 /*在p元素内的文本被选中以后颜色变成红色*/