Why does my CSS selector not identify these elements correctly?_问答_开发者

I'm trying to write a style but am having trouble identifying a class of element identified 开发者_如何学编程by an ID such as airbus.errors (first example) or boeing.errors (second example below).

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

I've tried this but it doesn't work:

.message .errors
{
  background: red;
}

I need to write it generically so that it would also work with this case:

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

You could use the CSS3 Attribute Selector:

[id$=errors] { ... }

This will select any element whose id ends with the value "errors".

Note that browser support is a little iffy.

I think you were trying to have errors as a class instead of in ID attribute. You can do:

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

It would work the CSS selector you already have:

.message .errors {
  background: red;
}

When you write .message .errors it's looking for an element with a class message and descendants with a class errors which doesn't match your HTML

Try this instead:

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

or just

#boeing-errors
{
    background: red;
}

since #boing-errors is an ID and should be unique.

Note that in CSS the . character is reserved for class names

If you have no control of this ID being output you can't use it since the ID has a . in it. You can do this, but it might be too generic:

.message > span { background: red; }

Here's another question on SO for valid css characters: Which characters are valid in CSS class names/selectors?

Your names are invalid. CSS class and id names should only be alphanumeric values and can include a - or _. Check the docs for the full naming convention syntax.

Drop the ., example: <span id="airbus_errors">

However, by your CSS, I think what you are meaning to do is share an errors class. In which case, this should be your markup:

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

If you want it to work for both, then you need to give them a common class. IDs are unique, so you'd have to specify #airbus.errors, #boeing.errors {...}, etc. To do it in one CSS rule you need to give them both a common class such as errors.

.message .errors {
    background: red;
}

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

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

If you can't make it a class for some reason, then you have no choice but to be explicit and set it for each ID unless you use CSS3 attribute selectors.

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

If you're developing for browsers which support CSS3 (so not IE), then you can achieve what you want with this, (see CSS3 spec for more info)

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

Try the attribute selector and its variations

<!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>

Here is the CSS

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

There's really not much you can do, especially cross-browser, to fix that kind of ugly CSS. I see one really portable alternative, and that's this 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';
     }
}

You could then refer to your elements as span.errors in your CSS selector. This is really not a good solution, but then again, there's not much else you can do. If the IDs have to stay the same, just remove the spans[i].id = ... line. If they absolutely can't have a class then you can use some fancy JavaScript to read the CSS selector and apply inline styles based on that, too.