gpt4 book ai didi

css - 需要更多关于这个 css 选择器的见解

转载 作者:太空宇宙 更新时间:2023-11-04 00:20:52 24 4
gpt4 key购买 nike

<head>   
<style>
.thisOne{ background: red;}
div[class*="thisTwo"] { background: green}
</style>
</head>
<body>
<div class="thisOne">
<p id="hello">Hello World</p>
</div>
<div class="thisTwo">
<p id="hello">Hello World</p>
</div>
</body>

我想知道这种选择方式有什么不同:

  1. .thisOne{ 背景:红色;}
  2. div[class*="thisTwo"] { 背景:绿色}

他们做的工作几乎相同,对吧?为什么 2-selector 更先进?

最佳答案

实际上,他们并没有做同样的事情。与 div.thisTwo 功能相同的属性选择器是 div[class~="thisTwo"]。请注意使用 ~ 而不是 *。更不用说您的 .thisOne 选择器也缺少前面的 div

div[class*="thisTwo"] 选择任何 divclass 属性包含字符串 thisTwo ,但它不考虑将此字符串与其他类分隔开的任何空格。它只是在属性值中的任意位置查找字符串。

这意味着它将匹配以下元素,div.thisTwo 不可能匹配,因为它只有 一个类 thisOne-thisTwo,其中包含字符串 thisTwo,而不是两个单独的类 thisOnethisTwo:

<div class="thisOne-thisTwo"></div>

关于css - 需要更多关于这个 css 选择器的见解,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9228327/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com