Question

我正在尝试编写样式，但我无法识别由ID标识的一类元素，例如airbus.errors（第一个示例）或boeing.errors（下面的第二个示例）。

<div class="message">
  <span id="airbus.errors">
</div>

我试过这个，但它不起作用：

.message .errors
{
  background: red;
}

我需要一般性地编写它以便它也适用于这种情况：

<div class="message">
  <span id="boeing.errors">
</div>

Answer 1

您可以使用CSS3 Attribute Selector：

[id$=errors] { ... }

这将选择id以值“errors”结尾的任何元素。

请注意，浏览器支持有点不确定。

Answer 2

我认为你试图将errors作为一个类而不是ID属性。你可以这样做：

<div class="message">
  <span id="boeing" class="errors">
</div>

它可以使用你已经拥有的CSS选择器：

.message .errors {
  background: red;
}

Answer 3

当你写.message .errors时，它正在寻找一个类message的元素和一个与你的HTML不匹配的类errors的后代

请改为尝试：

.message #boeing-errors
{
    background: red;
}

或只是

#boeing-errors
{
    background: red;
}

因为#boing-errors是一个ID，应该是唯一的。

请注意，在CSS中，.字符是为类名保留的

如果您无法控制输出此ID，则无法使用它，因为ID中包含.。你可以做到这一点，但它可能过于笼统：

.message > span { background: red; }

以下是有关有效css字符的另一个问题：Which characters are valid in CSS class names/selectors?

Answer 4

您的姓名无效。 CSS class和id名称只能是字母数字值，可以包含-或_。查看full naming convention syntax的文档。

删除.，例如：<span id="airbus_errors">

然而，通过你的CSS，我认为你要做的是分享一个errors课程。在这种情况下，这应该是你的标记：

<div class="message">
  <span id="boeing" class="errors">
</div>

Answer 5

如果你想让它兼顾两者，那么你需要给它们一个共同的类。 ID是唯一的，因此您必须指定#airbus.errors, #boeing.errors {...}等。要在一个CSS规则中执行此操作，您需要为它们提供一个公共类，例如errors。

.message .errors {
    background: red;
}

<div class="message">
    <span id="airbus" class="errors">
</div>

<div class="message">
    <span id="boeing" class="errors">
</div>

如果由于某种原因你不能使它成为一个类，那么除了使用CSS3属性选择器之外你别无选择，只能为每个ID设置它。

.message #airbus.errors,
.message #boeing.errors {
    background: red;
}

如果你正在开发支持CSS3的浏览器（所以不支持IE浏览器），那么你可以用它实现你想要的效果，（更多信息见CSS3 spec）

.message span[id$="errors"] {
    background: red;
}

Answer 6

尝试使用属性选择器及其变体

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Template</title>
<link href="styles.css" type="text/css" rel="stylesheet" />
</head>
<body>

<div class="message">
<span id="airbus.errors">airbus</span>
</div>

<div class="message">
<span id="boeing.errors">boeing</span>
</div>

<div class="message">
<span id="something.errors">something</span>
</div>

<div class="message">
<span id="no.error">error</span>
</div>

</body>
</html>

这是CSS

[id$=".errors"]
{
color: red;
}

Answer 7

你真的没有什么可以做的，特别是跨浏览器，来修复那种丑陋的CSS。我看到一个非常便携的替代品，就是这个JavaScript：

var spans = document.getElementsByTagName("span");
for(var i = 0; i < spans.length; i++) {
     var id = spans[i].id;
     if(id && id.length > 7 && id.substring(id.length - 7) === '.errors') {
          spans[i].id = id.substring(0, id.length - 7);
          spans[i].className = spans[i].className ? spans[i].className + ' errors' : 'errors';
     }
}

然后，您可以在CSS选择器中将您的元素称为span.errors。这真的不是一个好的解决方案，但话说回来，你可以做的事情并不多。如果ID必须保持不变，只需删除spans[i].id = ...行。如果他们绝对不能拥有一个类，那么你可以使用一些花哨的JavaScript来读取CSS选择器并根据它来应用内联样式。

为什么我的CSS选择器没有正确识别这些元素？

7 个答案: