Сочетание селектора класса с идентификатором - PullRequest
2 голосов
/ 25 февраля 2010

Я использую следующие CSS:

/* style.css */
#someId {
   background-color: red;
}
#someId.medium {
   width: 300px;
}
#someId.large {
   width: 500px;
}

с HTML:

<!-- medium.html -->
<div id="someId" class="medium">hello, world</div>

и

<!-- large.html -->
<div id="someId" class="large">hello, world</div>

Я знаю, что вышеописанное прекрасно работает на FireFox и Opera, и не работает на IE6 (удивление, удивление).


Мои вопросы:

Является ли вышеуказанный CSS правильным в соответствии с CSS-спецификациями (и где я могу найти эту конкретную проблему)?

Какие браузеры (на какой платформе) поддерживают и не поддерживают это?

1024 *
*

Обновление:
Идентификаторы уникальны для каждой страницы. Я пытался сообщить об этом, имея medium.html и large.html, но, видимо, это было недостаточно очевидно.

Обновление 2:
Пример кода выше был просто написан для иллюстрации моего вопроса. Он не является частью производственного кода и не должен быть полным. Короче говоря, это всего лишь пример, демонстрирующий проблему с очень конкретным решением.

Ответы [ 7 ]

4 голосов
/ 25 февраля 2010

quirksmode имеют таблицу, которую поддерживает селектор (среди прочего) браузер. К сожалению, здесь нет теста на комбинирование селектора. но так как ie6 терпит неудачу несколько классов , это не так удивительно.

Спецификация w3c css объясняет, как должен работать селектор css, есть DIV.warning и E#myid, которые не совсем такие, как у вас, но предполагают, что они должны работать (возможно, это объясняется на странице, которую я не делал читать все это;))

2 голосов
/ 25 февраля 2010

если вам не нужно, чтобы "#someId" был идентификатором, вы можете сделать его классом ".someId", а затем использовать два других класса для расширения, где необходимо ... как этот класс , Попробуйте это и посмотрите, будет ли это работать. Кроме того, в любом случае это лучшее решение, потому что на одной странице не может быть двух идентификаторов с одинаковым именем.

.someId {
   background-color: red;
}
.medium {
   width: 300px;
}
.large {
   width: 500px;
}

, а затем ..

<div class="someId medium">hello, world</div>

или

<div class="someId large">hello, world</div>
1 голос
/ 25 февраля 2010

Как и некоторые упомянутые выше, идентифицируйте уникальный идентификатор, поэтому его следует использовать только один раз на странице. Обычно идентификаторы используются для основных разделов вашей разметки, таких как #header, #content #footer и т. Д., В остальном, просто используйте классы.

Что касается вашего текста, измените #someId на .someId, а затем вы можете использовать .large или .medium, поскольку вы можете применять несколько классов к элементу.

<div class="someId large">hello, world</div>

И ваш CSS будет

.someId { background-color: #ccc; }
.large { font-size: 50px; }
.medium { font-size: 25px; }

Также ... если текст «Hello, World» является заголовком, я настоятельно рекомендую вам использовать соответствующие элементы (h1, h2 и т. Д.) И настраивать их стили, а не создавать новые.

Надеюсь, это поможет!

РЕДАКТИРОВАТЬ: Для комментария ниже, вот небольшой HTML-код, который я только что протестировал в IE6 и работает. Он также работает в FF и Opera, поэтому я предполагаю, что он работает и в Safari и Chrome.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>An XHTML 1.0 Strict standard template</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css">
    .something { background-color: #ccc; }
    .else { color: #090; }
    </style>
</head>

<body>

    <div class="something">This is just something</div>
    <div class="else">This is just else</div>
    <div class="something else">This is something else</div>

</body>
</html>
1 голос
/ 25 февраля 2010

Одна вещь, которую вы можете попробовать, это быть более многословным, чем вы хотели бы. Добавьте к именам классов вот так:

<div id="someId" class="someId-medium">hello, world</div>

или

<div id="someId" class="someId-large">hello, world</div>

и затем измените свой CSS на это:

#someId {
    background-color: red;
}
.someId-medium {
    width: 300px;
}
.someId-large {
    width: 500px;
}
1 голос
/ 25 февраля 2010

Crikey. Я никогда не сталкивался с этим раньше, но вы абсолютно правы. Ваш код должен работать так, как вы ожидаете.

Я уверен, что только IE 6 будет иметь проблемы с ним.

1 голос
/ 25 февраля 2010

Должно работать! Это странно. Попробуйте перевернуть их, как в .large#someId.

0 голосов
/ 25 февраля 2010

Не уверен, возможно ли перетаскивание библиотеки Javascript в микшер в вашем приложении, но при использовании jQuery возможно много CSS, которые не работают в IE6.

Тем не менее, если у вас нет другого использования библиотеки jQuery размером 24 КБ, кажется, это здоровенное дополнение для одного CSS-атрибута. Может быть, вы можете пойти с грациозной деградацией?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...