选择器的使用

1.属性选择器

语法：[属性名]{} 选择含有指定属性的元素

[属性名=属性值]{} 选择含有指定属性以及指定属性值的元素

[属性名^=属性值]{} 选择含有指定属性以及指定属性值开头的元素

[属性名$=属性值]{} 选择含有指定属性以及指定属性值结尾的元素

[属性名*=属性值]{} 选择含有指定属性,只要含有某个属性值的元素

例如将有title属性的颜色变为红色。

[title]{
    color: red;
  }

例如将title属性且属性值为“ab”的内容变为绿色。

 [title=ab]{
    color: green;
  }

例如将title属性且属性值为“ab”开头的内容背景颜色变为粉色。

[title^=ab]{
    background-color: pink;

例如将title属性且属性值为“ab”结尾的内容字体变为40px

[title$=ab]{
    font-size: 30px;
    }

例如将title属性且属性值含有“c”元素的背景颜色变为绿色。

[title*=c]{
    background-color: green;
  }

2.伪类选择器

伪类不存在的类表示元素的一种状态，好比排在第一位，倒数第一个，鼠标悬浮，鼠标点击

:first-child 第一个子元素

:last-child 最后一个子元素

:nth-child(m) 选中第m个子元素

n 选中所有的子元素

2n/even 偶数

2n+1/odd 奇数

以上的伪类，是根据所有的子元素进行排序的

:first-of-type 第一个子元素

:last-of-type 最后一个子元素

:nth-of-type(n) 选中第n个子元素

以上的伪类在同类型中进行排序。

not()否定伪类，是将符合条件的元素去除。

3.伪元素选择器

元素的伪类：:link 表示未访问过的a标签的状态

例如给未访问的超链接加红色字体

 a:link{
         color: red;
}

:visited 表示访问过的a标签的状态

例如给访问过的超链接加绿色字体

 a:visited{
         color: green；
       }

:hover 鼠标移入后，元素的状态

例如鼠标移入，链接字体变大到30px

a:hover{
        font-size: 30px;
}

:active 鼠标点击后，元素的状态

例如鼠标点击后，增加背景色pink

div:active{
           background-color:pink
           }

::first-letter 第一个字母

例如让文章的首字母一直为字体为24px

div::first-letter{
        font-size: 24px;
      }

::first-line 第一行

例如让文章的第一行添加背景色黄色

div::first-line{
        background-color:yellow;
      }

::selection 选中的内容的效果

例如让选中的内容，字体为红色

div::selection{
        color: red;
      }

::before 在元素开始的位置前

例如在元素开始的位置前+‘你好'

 div::before{
        content: '你好';
      }

::after 在元素结束的位置后

例如在元素结束的位置后+‘你好呀'

div::after{
        content: '你好呀';
           }