Селектор атрибутов CSS - сопоставьте значения атрибутов, которые начинаются с - PullRequest
Новая
       26

Селектор атрибутов CSS - сопоставьте значения атрибутов, которые начинаются с

2 голосов
/ 27 января 2010

Я пытаюсь идентифицировать все <UL>, которые содержат список меню, определяя ID следующим образом: 

<ul id="menutop">
    <li><a href="#">item1</a></li>
    <li><a href="#">item2</a></li>
    <li><a href="#">item3</a></li>
</ul>
<ul id="menumain">
    <li><a href="#">item1</a></li>
    <li><a href="#">item2</a></li>
    <li><a href="#">item3</a></li>
</ul>

Согласно тому, что я понимаю, я мог бы использовать: 

ul[id|='menu']>li>a {color:#f00;}

(<a> прямой дочерний элемент <li> прямого дочернего элемента <ul>, чей id начинается с menu) Но это не работает.

Немного поиска принес мне этот [вопрос] [1], который предполагает, что ID является атрибутом, а не свойством, поэтому я не понимаю, почему он не работает. Что я делаю не так?

Вот ссылка на атрибуты CSS2 Matching и значения атрибутов в соответствии со стандартами W3 (http://www.w3.org/TR/CSS2/selector.html#matching-attrs).

Ответы [ 3 ]

2 голосов
/ 27 января 2010

В соответствии с документацией W3:

[att|=val]
Представляет элемент с атрибутом att, значение которого либо точно равно "val", либо начинается с "val", за которым сразу следует "- "(U + 002D)

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

Это означает, что ul[id|='menu'] ищет <ul id="menu-somevalue"/> или <ul id="menu" />

Вероятно, поэтомуне работает, потому что menutop и menumain не совпадают.

Вы можете попробовать переименовать идентификаторы в menu-top и menu-main, или вы можете сделать: 

<ul id="menutop" class="menu">
    <li><a href="#">item1</a></li>
    <li><a href="#">item2</a></li>
    <li><a href="#">item3</a></li>
</ul>
<ul id="menumain" class="menu">
    <li><a href="#">item1</a></li>
    <li><a href="#">item2</a></li>
    <li><a href="#">item3</a></li>
</ul>

и ваш css: 

ul.menu li a {color: #f00;}

Это будетВы можете покрасить все необходимые элементы меню, но при этом иметь возможность иметь уникальные идентификаторы для использования с любым сценарием и т. д. при необходимости.

Кроме того, как упоминал Пекка, селектор > отсутствуетt широко поддерживается, так что вы можете пересмотреть его использование сейчас ...

1 голос
/ 01 апреля 2010
1 голос
/ 27 января 2010

Для обеспечения максимальной совместимости я бы дал каждому ul класс menu и использовал бы 

ul.menu>li>a {color:#f00;}

обратите внимание, что селектор > не поддерживается IE <8. </p>

...