选择器的使用

目录

1.属性选择器

2.伪类选择器

3.伪元素选择器

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: '你好呀';
           }