Проблематично использовать дочерний селектор (›) в CSS?

Я не уверен, правильно ли я помню, но я думаю, что однажды читал, что использование селектора > в правилах css было плохой практикой? Может ли кто-нибудь пролить свет на эту тему?

Например:

<style>
#search-form {
 ... whatever rules...
}
#search-form > input[type=text] {
 ... rules...
}
#search-form > button {
 ... rules ...
}
</style>
<form id="search-form">
    <input type="text" placeholder="Search...">
    <button>Search!</button>
</form>

css css-selectors
person AlexBrand    schedule 19.02.2012    source источник
comment
> – это инструмент. Как и любой инструмент, при неправильном, неправильном, неточном или недостаточном понимании результаты могут быть неожиданными.   -  person Jared Farrish    schedule 20.02.2012

Ответы (3)


arrow_upward
2
arrow_downward

Это, конечно, неплохая практика, но ее следует использовать, зная ее преимущества и недостатки. Использование дочернего селектора (E > F) выберет только непосредственные дочерние элементы и, поскольку это предотвращает полный обход потомков, браузеру потребуется меньше времени для применения, чем селектор потомков (E F). Однако этот элемент не поддерживается в IE6, поэтому, если это важно для вас, держитесь подальше.

У этого есть хорошая запись и несколько хороших ссылок: дочерний CSS против селектора потомков

person Paul Marbach    schedule 19.02.2012

arrow_upward
1
arrow_downward

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

http://caniuse.com/#feat=css-sel2

Кроме этого, нет причин не использовать его.

person Guffa    schedule 19.02.2012
comment
Это, безусловно, могло быть тем, откуда пришла идея (на основе старого совета). - person Jared Farrish; 20.02.2012

arrow_upward
1
arrow_downward

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

Например, #mydiv > span спросите себя: действительно ли я не хочу совпадать с span в пределах p под #mydiv. Как насчет span в li в #mydiv? И т. д. Может быть, нет... может быть, есть. Важно понимать, что он делает.

person Irfy    schedule 19.02.2012