CSS:不是伪类不起作用

2022-10-19前端开发问题

本文介绍了CSS:不是伪类不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！

问题描述

我正在学习 :not() 伪类，但它没有按预期工作.

我想将除 .mind 之外的所有文本都涂成红色.出于某种原因，这并不能阻止 .mind 元素变红.

:not(.mind) {红色}

<div class="parent"><div class="child">一个</div><div class="child">两个</div><div class="child">三个</div><div class="child">一个</div><div class="child">两个</div><div class="child">三个</div><div class="child">一个</div><div class="mind">mind</div><div class="child">三个</div><div 类='孩子'><p>第一段</p></div></div>

解决方案

记住这一点:

:not() 等价于 *:not()

当 :not() 伪类前面没有选择器时，隐含一个通用选择器:

<块引用>

测试此行为的快速方法是使用不可继承的 border 属性.

在下面的示例中，使用您的选择器，您会注意到边框没有应用到 .mind，并且您的选择器按预期工作:

:not(.mind) {红色;边框底部:1px 虚线黑色；}

<div class="parent"><div class="child">一个</div><div class="child">两个</div><div class="child">三个</div><div class="child">一个</div><div class="child">两个</div><div class="child">三个</div><div class="child">一个</div><div class="mind">mind</div><div class="child">三个</div><div 类='孩子'><p>第一段</p></div></div>

为了您的特定目标:

<块引用>

我想将除 .mind 之外的所有文本都涂成红色.

使用更具体的选择器.

.parent >:没关系) {红色;}

<div class="parent"><div class="child">一个</div><div class="child">两个</div><div class="child">三个</div><div class="child">一个</div><div class="child">两个</div><div class="child">三个</div><div class="child">一个</div><div class="mind">mind</div><div class="child">三个</div><div 类='孩子'><p>第一段</p></div></div>

I am learning about the :not() pseudo class and it is not working as expected.

I want to color all text red except for .mind. For some reason this is not preventing the .mind element from being red.

:not(.mind) {
  color: red
}

<div class="parent">
  <div class="child">One</div>
  <div class="child">Two</div>
  <div class="child">Three</div>
  <div class="child">One</div>
  <div class="child">Two</div>
  <div class="child">Three</div>
  <div class="child">One</div>
  <div class="mind">mind</div>
  <div class="child">Three</div>
  <div class="child">
    <p>First paragraph</p>
  </div>
</div>

解决方案

Keep this in mind:

:not() is equivalent to *:not()

When there is no selector prefixing the :not() pseudo-class, a universal selector is implied:

6.2. Universal selector

If a universal selector represented by * (i.e. without a namespace prefix) is not the only component of a sequence of simple selectors selectors or is immediately followed by a pseudo-element, then the * may be omitted and the universal selector's presence implied.

Therefore, the rule you have:

:not(.mind) {
  color: red
}

... is saying apply red color to all elements except the element with the class mind.

Okay, except in this case, the color property is inheritable, so even though the red doesn't get applied to the .mind element, it still gets the red through inheritance from the .parent element.

Here's what the browser is doing:

A quick way to test this behavior is with the border property, which is not inheritable.

In the example below, using your selector, you'll notice that the border doesn't get applied to .mind, and your selector works as you were expecting:

:not(.mind) {
  color: red;
  border-bottom: 1px dashed black;
}

<div class="parent">
  <div class="child">One</div>
  <div class="child">Two</div>
  <div class="child">Three</div>
  <div class="child">One</div>
  <div class="child">Two</div>
  <div class="child">Three</div>
  <div class="child">One</div>
  <div class="mind">mind</div>
  <div class="child">Three</div>
  <div class="child">
    <p>First paragraph</p>
  </div>
</div>

To your particular objective:

I want to color all text red except for .mind.

Use a more specific selector.

.parent > :not(.mind) {
  color: red;
}

<div class="parent">
  <div class="child">One</div>
  <div class="child">Two</div>
  <div class="child">Three</div>
  <div class="child">One</div>
  <div class="child">Two</div>
  <div class="child">Three</div>
  <div class="child">One</div>
  <div class="mind">mind</div>
  <div class="child">Three</div>
  <div class="child">
    <p>First paragraph</p>
  </div>
</div>

这篇关于CSS:不是伪类不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！

The End

相关推荐

layui 实现实时刷新一个外部的div

layui 单选框、复选框、下拉菜单不显示问题如何解决？

layui要如何改变时间日历布局大小？

jQuery怎么动态向页面添加代码？

“数组中的每个孩子都应该有一个唯一的 key prop"仅在第一次呈现页面时

如何制作 TextGeometry 多线?如何将它放在一个正方形内，以便它像 html 文本一样包裹在 div 内?

热门文章

热门精品源码

最新VIP资源