HTML如何设置否定样式？not伪类的作用是什么？

not

:not()

如何在CSS中使用

:not()

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

伪类？

:not()

:not()

<p>

highlight

p:not(.highlight) {
  color: blue;
}

highlight

<button>

button:not(:disabled) {
  background-color: lightgray;
}

:disabled

:not(:disabled)

:not()

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

伪类的常见用途有哪些？

<li><p>排除特定元素： 就像上面的例子，你可以排除带有特定类名或属性的元素。
<li><p>创建更复杂的选择器：

:not()

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制
可以与其他选择器组合使用，创建更复杂的选择规则。比如，

div > *:not(p)

登录后复制
会选择所有

div

登录后复制
元素的直接子元素，但排除

p

登录后复制
元素。
<li><p>简化CSS规则： 在某些情况下，使用

:not()

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制
可以避免编写冗余的CSS规则。
<li><p>处理表单元素状态： 可以根据表单元素的状态（如

:checked

登录后复制
、

:focus

登录后复制
）来应用不同的样式。

:not()

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

伪类有哪些需要注意的地方？

<li><p>优先级：

:not()

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制
伪类本身不会增加选择器的优先级。它的优先级取决于它内部的选择器。
<li><p>性能： 过度使用

:not()

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制
可能会影响性能，尤其是在复杂的选择器中。尽量避免使用过于宽泛的

:not()

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制
选择器，比如

:not(body)

登录后复制
或

:not(html)

登录后复制
。
<li><p>浏览器兼容性：

:not()

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制
伪类在现代浏览器中都有很好的支持。但为了兼容旧版本的浏览器，最好进行测试。
<li><p>参数限制：

:not()

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制
伪类只接受一个选择器作为参数，不能传入选择器列表。

:not()

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

伪类与其他选择器的组合使用示例

  <li>Item 1
  
Item 2
  <li>Item 3
  <p>This is a paragraph

<li>

special

li:not(.special) {
  font-weight: bold;
}

Item 1

Item 3

Item 2

<a>

internal

a:not(.internal) {
  text-decoration: underline;
}

:not()

以上就是HTML如何设置否定样式？not伪类的作用是什么？的详细内容，更多请关注php中文网其它相关文章！