在CSS中按“ .class”或“ * [class〜= box]”定位类之间有什么区别？

如何解决在CSS中按“ .class”或“ * [class〜= box]”定位类之间有什么区别？

比方说，我有一个带有框类的html元素： <p class="box alert">Content here</p>

最近，我了解了一种在CSS中定位元素的方法，因此，如果我想选择带有框类的任何元素，可以使用以下方法： *[class~=box] {border: 2px solid grey;}

我想知道，它的字面意思与仅通过类名定位元素是一样的吗？还是我没有正确理解？ .box {border: 2px solid grey;}

如果相同，则在哪种情况下使用第二种方法而不是第一种方法是合适的？

解决方法

属性选择器并不是真正为类设计的，它是为元素中的其他属性设计的，例如a[href*="google"]，但是可以的，您可以设置像这样的元素的样式，这肯定会被认为是反样式。

尽管.classname和[class~="classname"]的样式相同，但这些选择器的CSS特异性将以不同的方式计算-坦白地说，我不确定，但*[class~="classname"]可以赢得.classname，使用这种样式的人应该意识到这一点。

,

为了进行选择，选择器确实是等效的。它们之间的差异既是实际的，也是历史的。

实际差异

从实用的角度来看，类选择器更具可读性和直接性。由于CSS和DOM查询，浏览器将类与其他属性区别对待，因此效率也大大提高。通常，当您希望从“ ”中用单个值选择空格分隔的单词列表时，通常使用属性选择器对不是class的其他任何属性都有意义。值”（MDN spec）。

例如，如果您有一个data属性，其中包含多个可能的值可供选择，例如：

<div data-colors="blue">
<div data-colors="yellow blue">
<div data-colors="red blue green">

属性选择器[data-colors~=blue]将选择所有三个元素，而与属性中的任何其他值无关。

历史差异

从历史上看，class selector .box是原始CSS规范（即"CSS 1"）的一部分。这意味着过去和现在的任何浏览器都支持该选择器。另一方面，attribute selector [class~=box]只是CSS规范第二次迭代（即"CSS2"）的一部分，因此并非所有可能的浏览器都支持。但是您必须回到Internet Explorer 6才能遇到该选择器的问题。

,

一个重要的区别是在类中使用了一些特殊名称。

这里是一个例子来说明：

.box {
  height:50px;
  background:red;
  margin:5px;
}

.80% {
  width:80%;
}

.50% {
  width:50%;
}

<div class="box 80%"></div>
<div class="box 50%"></div>

在上面什么都不会发生，因为我们需要在选择器内转义数字和%，但是使用属性选择器很容易：

.box {
  height:50px;
  background:red;
  margin:5px;
}

[class~="80%"] {
  width:80%;
}

[class~="50%"] {
  width:50%;
}

<div class="box 80%"></div>
<div class="box 50%"></div>

首先，您需要编写以下内容：

.box {
  height:50px;
  background:red;
  margin:5px;
}

.\38 0\% {
  width:80%;
}

.\35 0\% {
  width:50%;
}

<div class="box 80%"></div>
<div class="box 50%"></div>

,

两者的结果将完全相同，因此*[class~="classname"]等效于.classname，只是使用class属性进行选择。请参阅attribute selector，以获取有关此语法的更多信息。

.classname {
  color: blue;
}

*[class~="classname"] {
  color: red;
}

<p class="classname">Content here</p>

*[class~="classname"] {
  color: red;
}

.classname {
  color: blue;
}

<p class="classname">Content here</p>