Селекторы CSS не могут соответствовать числовым значениям атрибутов? Почему?

Я создал простую тестовую страницу, чтобы проиллюстрировать проблему, с которой я столкнулся. Вкратце, это работает так, как ожидалось (текст выделен жирным шрифтом, подчеркнут красным):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <style>
            [abc=x1] {
                color: red;
                text-decoration: underline;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div abc=x1>hello</div>
    </body>
</html>

И этого не происходит (текст остается черным, форматирование не применяется):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <style>
            [abc=1] {
                color: red;
                text-decoration: underline;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div abc=1>hello</div>
    </body>
</html>

Единственное, что я изменил между двумя примерами, - это значение атрибута (как в CSS, так и в HTML) с x1 на 1.

Таким образом, кажется, что вы не можете сравнивать числовые атрибуты.

Кто-нибудь знает, почему эта ... очень ... полезная ... функция ... существует?


html css css-selectors
person Rolf    schedule 06.06.2011    source источник

Ответы (4)


arrow_upward
12
arrow_downward

Оберните строку в кавычки ...

[abc="1"] {
    ...
}

jsFiddle.

Значения атрибутов должны быть идентификаторами CSS или строками.

Источник.

Заключая его в кавычки, вы говорите, что он соответствует строке. .

Если вы его не цитируете, он ищет идентификатор < / а>.

В CSS идентификаторы (включая имена элементов, классы и идентификаторы в селекторах) могут содержать только символы [a-zA-Z0-9] и символы ISO 10646 U + 00A0 и выше, а также дефис (-) и подчеркивание ( _); они не могут начинаться с цифры, двух дефисов или дефиса, за которым следует цифра.

person alex    schedule 06.06.2011
comment
Спасибо. Извините, я не знаю, как я мог это пропустить !! Я думал, что тестировал это с кавычками, но, должно быть, я что-то пропустил, пробуя это с кавычками. Мне не нравится, когда это происходит, я смиренен и благодарен вам и другим, указавшим мне на это. - person Rolf; 06.06.2011

arrow_upward
2
arrow_downward

Он работает с "" кавычками вокруг строки.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <style>
            [abc="1"] {
                color: red;
                text-decoration: underline;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div abc="1">hello</div>
    </body>
</html>
person Saurabh Gokhale    schedule 06.06.2011

arrow_upward
1
arrow_downward

Вы правы, понимая, что атрибут не может начинаться с числа.

Почему это может работать правильно в некоторых браузерах, скорее всего, не должно.

Я думаю, что ответ на этот вопрос аналогичен тому, почему в большинстве языков переменная не может начинаться с числа. (Почему имена переменных не могут начинаться с цифр?)

«Потому что тогда строка цифр будет как действительным идентификатором, так и действительным числом»

Я также хотел бы увидеть этот ответ, чтобы узнать, почему: Может ли значение атрибутов класса XHTML и HTML начинаться с числа?

но для меня это комбинация исторических последствий, связанных с SGML и лексерами, которые анализируют и отображают HTML и CSS.

person matchew    schedule 06.06.2011

arrow_upward
1
arrow_downward

Атрибуты HTML - это строки. Проблема, вероятно, возникает в том, как интерпретатор css интерпретирует число без кавычек. Он распознает его как число, а не строку, поэтому он никогда не сможет сопоставить строковое значение атрибута html.

Вам нужно будет заключить искомое значение в кавычки, чтобы оно правильно интерпретировалось как строка, как предлагалось ранее. Если значение начинается с нечислового символа, оно будет размечено как строка, поэтому первый пример работает.

http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

person S. Albano    schedule 06.06.2011