打开新世界从认识CSS开始之伪类选择器、a元素选择器和伪元素选择器

什么伪类？

                伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。

     

           一 、伪类选择器（不存在的类，特殊的类）

               比如：被点击的元素或已点过得元素，鼠标移入的元素的时候。

               特点：  一般请情况下，使用   :   开头

        1、 :first-child  第一个子元素

        2、 :last-child   最后一个子元素

        3、 :nth-child()  选中第n个子元素

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

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

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

                          特殊值： n    所有的

                          2n或even  选中偶数

                          2n+1或odd  选中奇数

实例 ：

        1.:first-child  第一个子元素

  选择作为其父的首个子元素的每个 <p> 元素。

p:first-child
{
  background-color:red;
}

        2、 :last-child   最后一个子元素

   选择作为其父的最后一个子元素的每个 <p> 元素。

p:last-child
{
  background:red;
}

        3、 :nth-child()  选中第n个子元素

                          特殊值： n    所有的

                          2n或even  选中偶数

                          2n+1或odd  选中奇数

   选择作为其父的第二个子元素的每个 <p> 元素。

  p:nth-child(2)
     {
      color: red;
            }

               标注：以上这些伪类都是根据所有的子元素进行排序

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

  选择作为其父的首个 <p> 元素的每个 <p> 元素。

p:first-of-type
{
  background:red;
}

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

选择作为其父的最后一个 <p> 元素的每个 <p> 元素。

p:last-of-type
{
  background:red;
}

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

                          特殊值： n    所有的

                          2n或even  选中偶数

                          2n+1或odd  选中奇数

选择作为其父的第二个 <p> 元素的每个 <p> 元素。

p:nth-of-type(2)
{
  background:red;
}

二、:not() 否定伪类

        :not 选择器匹配每个元素是不是指定的元素/选择器。

                否定选择器允许您反转任何选择。

实例：

        选择每个非 <p> 元素的元素。

:not(p)
{
  background:red
;
}

三、a元素的伪类

1、 :link  用来表示未访问过的链接（正常链接）

      a:link {
        color: red;
      }

2、 :visited 用来表示访问过的链接

      a:visited {
        color: green;
      }

注意：:link 、:visited  这两种伪类只针对超链接

3、:hover 用来表示鼠标移入的状态

      a:hover {
        background-color: pink;
      }

4、:active  鼠标点击后的状态

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

注意：:hover、:active 这两种伪类是针对所有的标签

四、伪元素选择器

        伪元素，表示页面中一些特殊的并不真实存在的元素（元素的位置）    

1. ::after                  在每个 <p> 元素之后插入内容。
2. ::before               在每个 <p> 元素之前插入内容。
3. ::first-letter          选择每个 <p> 元素的首字母。
4. ::first-line            选择每个 <p> 元素的首行。
5. ::selection          选择用户选择的元素部分。

注意：::after 和 ::before 必须要结合content使用

  ::after

在每个 <p> 元素之后插入内容。

    p::after {
      content: '你好';
    }

::before 

在每个 <p> 元素之前插入内容。

    p::before {
      content: '你好';
      color: red;
    }

::first-letter      

 选择每个 <p> 元素的首字母。

p:first-letter
{ 
font-size:100%;
color:green;
}

::first-line           

选择每个 <p> 元素的首行。

p:first-line
{ 
background-color:red;
}

::selection          、

选择用户选择的元素部分。

    p::selection {
      color: red;
    }