HTML + CSS 连载 | 38 - 否定伪类

RiemannHypo
VIP.5 如鱼得水
94 阅读4分钟

html+css.jpeg

一、结构伪类 - :nth-of-type()

:nth-of-type() 的用法与 :nth-child() 用法类似，不同的是 :nth-of-type() 在计数时只计算同种类型的元素。

创建 HTML 页面，首先使用 :nth-child() 来选择元素，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /*需求：选择 box 中的第三个 div 元素*/
    .box > div:nth-child(3) {
      color: red;
    }
  </style>
</head>
<body>
  <div class="box">
    <div>我是div1</div>
    <p>我是p</p>
    <span>我是span1</span>
    <span>我是span2</span>
    <span>我是span3</span>
    <div>我是div2</div>
    <div>我是div3</div>
    <div>我是div4</div>
    <div>我是div5</div>
    <div>我是div6</div>
    <div>我是div7</div>
    <div>我是div8</div>
    <div>我是div9</div>
    <div>我是div10</div>
  </div>
</body>
</html>

在浏览器中打开页面，具体效果如下：

image.png

可以看到并没有选中我们想要的元素，那么如果我们使用 :nth-of-type() 这个结构伪类来选择第三个元素会不会选中？

在 HTML 中增加如下 CSS 代码：

    /*使用 nth-of-type：计数时只会统计同类元素*/
    /*而 nth-child：计数时会统计所有类型元素*/
    .box > div:nth-of-type(3) {
      color: red;
    }

刷新页面，效果如下：

image.png

可以看到使用 :nth-of-type() 结构伪类是可以实现我们的需求的。

除此之外还有 :nth-last-of-type() 用法与 :nth-of-type() 用法类似，不同点是 :nth-last-of-type() 从最后一个相同的元素开始往前计数。

二、其他常见的结构伪类

除了前面提到的四个需要传递参数的结构伪类外，还有以下几个常用的结构伪类，这些结构伪类是不需要传递参数的，具体有：

  • :first-child：是父元素中的第一个元素，等同于 :nth-child(1)
  • :last-child：是父元素中最后一个元素，等同于 :nth-last-child(1)
  • :first-of-type：是父元素中第一个相同类型的元素，等同于 :nth-of-type(1)
  • :last-of-type：是父元素中最后一个相同类型的元素，等同于 :nth-last-of-type(1)
  • :only-child：是父元素中唯一的子元素
  • :only-of-type：是父元素中唯一的这种类型的子元素

创建 HTML 页面，使用这些结构伪类，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box > div:first-child {
      color: red;
    }
  </style>
</head>
<body>
  <div class="box">
    <span>我是span</span>
    <div>我是div1</div>
    <div>我是div2</div>
    <div>我是div3</div>
    <div>我是div4</div>
    <div>我是div5</div>
  </div>
</body>
</html>

在浏览器中打开 HTML 页面，效果如下：

image.png

这里并没有选中第一个元素，因为第一个元素是 span 元素，而选择器中限定了只能是 div 元素，我们可以稍微修改一下选择器，把 div 的限制去掉：

.box :first-child {
  color: red;
}

刷新页面，具体效果如下：

image.png

可以看到这就选中了第一个元素。

创建 HTML 页面，在该页面中使用 :only-child 结构伪类，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box :first-child {
      color: red;
    }

    .box > :only-child {
      font-size: 20px;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="box">
    <span>我是span</span>
    <div>我是div1</div>
    <div>我是div2</div>
    <div>我是div3</div>
    <div>我是div4</div>
    <div>我是div5</div>
  </div>

  <div class="box">
    <div>box中唯一的div</div>
  </div>

  <div class="box">
    <div>box中的div</div>
    <div>box中的div</div>
  </div>
</body>
</html>

在浏览器中工打开页面，效果如下：

image.png

可以看到 :only-child 伪类选中了父元素中唯一的一个子元素，我们来修改一下 HTML 结构，修改父元素中有多个子元素，不再唯一：

  <div class="box">
    <div>box中的唯一的div</div>
    <span>box中唯一的span</span>
  </div>

刷新页面，效果如下：

image.png

可以看到，当父元素中有多个子元素时，:only-child 便无法选中，但是如果元素类型是唯一的，我们可以使用 only-of-type 来选中唯一类型的元素：

    .box > :only-of-type {
      color: antiquewhite;
    }

刷新页面，效果如下：

image.png

还有其他一些结构伪类偶尔使用：

  • :root：根元素，就是指 HTML 元素
  • :empty：表示里面完全是空白的元素

在上述的页面中使用这两个结构伪类，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box :first-child {
      color: red;
    }

    .box > :only-child {
      font-size: 20px;
      font-weight: 700;
    }

    .box > :only-of-type {
      color: antiquewhite;
    }

    :root {
      font-size: 30px;
    }

    :empty {
      width: 100px;
      height: 100px;
      background-color: #f0f;
    }
  </style>
</head>
<body>
  <div class="box">
    <span>我是span</span>
    <div>我是div1</div>
    <div>我是div2</div>
    <div>我是div3</div>
    <div>我是div4</div>
    <div>我是div5</div>
  </div>

  <div class="box">
    <div>box中的唯一的div</div>
    <span>box中唯一的span</span>
  </div>

  <div class="box">
    <div>box中的div</div>
    <div>box中的div</div>
  </div>

  <div class="container"></div>
</body>
</html>

刷新页面，效果如下：

image.png

三、否定伪类

not()表示否定选择器，即排除或者过滤掉特定元素。前面介绍的选择器都是匹配操作，而唯独:not()操作相反，它表示过滤操作，与JQuery中的:not选择器用法相同。

否定选择器:not()可以帮助用户定位不匹配该选择器的元素，实现匹配操作后的二次过滤。

:not() 的格式是 :not(x)。

x 是一个简单选择器，包括了元素选择器、通用选择器、属性选择器、类选择器、id 选择器 和伪类（除了否定伪类）。

创建 HTML 页面，使用否定选择器，具体 HTML 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /*除了 .info 外，其他的全部设置大括号中的属性*/
    .box :not(.info) {
      color: aquamarine;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="item">我是div1</div>
    <div class="info">我是info</div>
    <div class="item">我是div2</div>
    <div class="item">我是div3</div>
    <div class="item">我是div4</div>
    <div class="item">我是div5</div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</body>
</html>

在浏览器中打开 HTML 页面，效果如下：

image.png

avatar
文章
阅读
粉丝