Почему мой селектор CSS "body div span" соответствует "<body><div><span><span><a>" - PullRequest
Новая
       1

Почему мой селектор CSS "body div span" соответствует "<body><div><span><span><a>"

2 голосов
/ 23 декабря 2011

Я думал, что следующий селектор будет соответствовать только пример b . Может кто-нибудь объяснить мне немного больше о том, как работают пути CSS? 

body div span a{
    background:#000;
    color:#fff;
}

<body>
    <div><span><span><a href="#">example a</a></span></span></div>
    <div><span><a href="#">example b</a></span></div>
    <span><div><span><a href="#">example c</a></span></div></span>
</body>

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

Ответы [ 2 ]

4 голосов
/ 23 декабря 2011

Дополнительную информацию смотрите в спецификации W3C .

Чтобы упростить ваш пример, селектор div a { } будет соответствовать любому тегу <a>, который спускается из<div> тег, независимо от того, сколько уровней предков разделяют два тега.

То есть div a { } будет соответствовать любому из следующего: 

<div> <a>...</a> </div>

<div> <h2> <a>...</a> </h2> </div>

<div> <h2> <span> <a>...</a> </span> </h2> </div>

Если вы хотите сопоставить<a>, содержащийся непосредственно внутри <div> без других разделяющих их тегов, необходимо использовать div > a, который соответствует только тегам <a>, которые являются прямыми потомками тега <div>.

3 голосов
/ 23 декабря 2011

То, как вы думаете, использует символ > в CSS, который получает только непосредственные дети. Например, body > div > span > a будет вести себя так, как вы ожидаете.

В противном случае будет выбран ЛЮБОЙ дочерний элемент, соответствующий селектору. Поэтому div a выберет любой элемент a под div, независимо от того, на каком уровне он находится.

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

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

...