Question

我只是想知道你是否可以选择一个元素，它有多个具有相同名称的类，例如<p class="demo test demo">使用CSS选择器.demo.demo？

示例代码：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .demo {    
        color: blue;
      }
      .demo.demo {    
        color: red;
      }
    </style>
  </head>
  <body>
    <p class="demo">This should be blue</p>
    <p class="demo demo">This should be red</p>
  </body>
</html>

在此示例中，.demo.demo选择器会覆盖.demo选择器。为什么会这样，甚至可以在CSS中执行？

Answer 1

.demo.demo表示＆＃34;它是 demo 类的成员，并且是 demo ＆＃34;类的成员。在class属性中出现多少次demo并不重要，它仍然是该类的成员，并且它将成为该类成员的每个要求都将匹配。

.demo.demo会覆盖.demo，因为它更具体。即使不是这种情况，它也会出现在样式表的后面。请参阅规范中的cascading order。

如果您想多次选择属性值中出现相同类名的元素，那么您就不走运了。 Attribute selectors允许一些相对复杂的规则，但它们都不允许您将两组内容与它们之间的任意内容进行匹配。

如果您的特定示例，您可以执行以下操作：

[class^=demo][class$=demo] {}

...即开始和以演示结束，但也会匹配class="demo"。

你也可以这样做：

[class="demo demo"]

...但这不会与class="foo demo bar demo baz"匹配。

Answer 2

与单个演示相比，

.demo.demo具有更高的深度。因此，只要在<p>元素中使用单个类演示，它就直接使用.demo.demo类。我甚至试过这个

<!DOCTYPE html>
<html>
<head>
    <style>
        .yellow.yellow.yellow {
            color: yellow;
        }

            .demo.demo {
                color: blue;
            }

    </style>
</head>
<body>
    <p class="demo yellow">This should be blue</p>
    <p class="demo demo">This should be red</p>
</body>
</html>

，结果是第一个<p>为黄色，第二个为红色。

Answer 3

您无法使用.demo.demo选择器，但您可能会像[class^="demo "][class$=" demo"]那样欺骗。

Example

此示例仅在第一个demo是第一个类，最后一个demo是最后一个类时才有效。如果这不适合您的实际情况，我可能会提供一些额外的选择器，但我想没有通用选择器。

Answer 4

通常浏览器只支持第一类属性。如果选择任何多个相同的类名，它将影响或覆盖属性值。一旦你添加了类的任何额外元素，它将生成新的类属性。

所以

.demo { color:red;}
.demo.demo {color:blue}

这里两个都是相同的属性值将返回。如果你创建像

这样的新类

.demo.test.demo{color:blue}

它会影响一个新类，但浏览器只会选择新的类属性

你能通过CSS选择一个具有更多相同名称的元素吗？

4 个答案: