CSS中常用的选择器（2）

今天我们继续来学习css中的选择器。

1.属性选择器

1.语法：[属性名]+{}  

   作用：选择含有指定属性的元素

2.语法：[属性名=属性值]{}  

   作用：选择含有指定属性以及属性值的元素

3.语法：[属性名^=属性值]{}

   作用：选择含有指定属性以及属性值开头的元素

4.语法：[属性名$=属性值]{}

   作用：选择含有指定属性以及属性值结尾的元素

5.语法：[属性名*=属性值]{}

   作用：选择指定属性，只要含有属性值的元素

如下列图片所示。

 p[title]{  
          color: red;
      }
      [title=a]{
          color: green;
      }
      [title^=bbb]{
         background-color: pink;
      }
      [title$=b]{
          font-size: 25px;
      }
      [title*=c]{
          background-color: green;
      }

2.伪类选择器

伪类就是不存在的类，它表示元素的一种状态，好比这次班级成绩第一位（考试还没考，所以不知道是哪个人，只是一个状态）。

:first-child{}    第一子元素

:nth-child(n){}   第n个子元素 2n偶数 2n+1奇数

:last-child{}     最后一个子元素

如下图所示。

/*第一行变红*/
        li:first-child {
            color: red;
        }

        /*第三行变蓝*/
        li:nth-child(3) {
            color: blue;
        }

        /*最后一行变大*/
        li:last-child {
            font-size: 20px;
        }

上面这些是对所有子元素进行排列，那如果我们要对同类型子元素进行排列选择呢？

接下来看一下下面几个，

:first-of-type

:nth-of-type()

:last-of-type

这就是是对同类型子元素进行排列选择。

接下来看看其他几种伪类

1.元素的伪类

:link{}         给未访问的超链接加东西

:visited{}    给访问的超链接加东西

如下图所示

a:link{
            color: red;
        }
        a:visited{
            color: green;
        }

上述两个主要是给超链接用的。

 :hover     鼠标移入后可以改变元素的状态

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

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

div{
            width: 100px;
            height: 100px;
            background-color: black;
        }

今天的就到这啦~