Селекторы CSS не могут соответствовать числовым значениям атрибута?Зачем? - PullRequest
Новая
       15

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

7 голосов
/ 06 июня 2011

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

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

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

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

Ответы [ 4 ]

11 голосов
/ 06 июня 2011

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

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

jsFiddle .

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

Источник .

Когда вы заключаете его в кавычки, вы указываете, что он соответствует строке .

Когда вы не цитируете его, он ищет идентификатор .

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

2 голосов
/ 06 июня 2011

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

<!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>
1 голос
/ 06 июня 2011

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

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

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

1 голос
/ 06 июня 2011

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

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

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

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

IЭтот вопрос также можно найти в ответе на вопрос, почему: Может ли значение атрибутов класса XHTML и HTML начинаться с цифры?

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

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

Нет похожих вопросов

...