CSS3 新特性-CSDN博客

本文链接：https://blog.csdn.net/niceffking/article/details/138801260

CSS3新增选择器

属性选择器
结构伪类选择器 : 根据文档结构选择元素.
伪元素选择器

属性选择器

属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器

假如我有如下的标签:

<body>
    <input type="text" name="" id="" value="123">
    <input type="password" name="" id="">
</body>

我想要选择 input标签, 然后必须具有value属性:

        input[value] {
            color: pink;
        }

我不仅要选择有什么属性, 我还要选择属性=对应值的属性:

        input[value=123] { /*= 后面可以加引号也可以不加引号*/
            color: pink;
        }

现在假设我要选择下面这四个标签, 我该如何做呢 ?

    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>

第一想到的是可以使用并集选择器, 但是写起来很麻烦, 我们可以使用 h5新增特性:

        div[class^=icon] {
            color: red;
        }

^=表示匹配的必须是icon开头的值.

当然我也可以选择以$=E来选择以E结尾的元素, 或者是*=E, 表示值含有E的属性.

注意: 类选择器, 属性选择器, 伪类选择器权重都是10.

结构选择器

下面是结构选择器的样式:

例如:

<body>
  <ul>
    <li>我是第1个孩子</li>
    <li>我是第2个孩子</li>
    <li>我是第3个孩子</li>
    <li>我是第4个孩子</li>
    <li>我是第5个孩子</li>
    <li>我是第6个孩子</li>
  </ul>
</body>

我要选择ul中的第一个li:

    
    ul li:first-child { /*表示我选择了里面所有li标签中, 第一个li*/
      /* 结构伪类选择器 */
      background-color: pink;
    }

最后一个li使用:

    ul li:last-child { /*ul中最后一个li元素*/
      background-color: pink;
    }

当然也可以选择某个父元素中一个或者多个特定的子元素: nth-child(n)

n 可以是数组, 公式和关键字
如果n是数字, 就是选择第n个元素, 里面数字是从1开始

例如我想要选择上述案例中的第二个li :

    ul li:nth-child(2) {
      background-color: blue;
    }

如果nth-child中的参数写的是