Вложение стиля CSS - надлежащая форма?
Другая причина может быть при использовании категорий в библиотеках, и вы не установили -ObjC (или -all_load) в других флагах компоновщика
4 ответа
Если вы включите больше родителей, это повысит специфичность селектора. У вас не должно быть проблем с кроссбраузерностью, пропуская родителей.
Нет правильного количества родителей для перечисления; это зависит от того, что вам нужно для разметки. Как вы видите, selector1 selector2 означает selector2 на любом уровне внутри selector1 , и вы можете настроить его для любого поведения, которое вам нужно.
В вашем примере вы должны указать .mainbody #container #header #toprightsearch. searchbox , если то, что вы имеете в виду , предназначено для применения стиля только к .searchbox es, которые находятся внутри всей этой иерархии. Если, наоборот, вы хотите .searchboxes , которые существуют в других условиях, чтобы получить тот же стиль, вы должны быть менее строгими в иерархии. Речь идет только о том, чего вы пытаетесь достичь.
Замечание: идентификаторы обеспечивают большую специфичность, поэтому их исключение еще больше снижает специфичность вашего правила.
.searchbox {}
Стилизует что угодно с .searchbox
.mainbody .searchbox{}
Стилизует любой .searchbox, происходящий от любого .mainbody, прямой дочерний элемент, внук, четверной правнук, не имеет значения.
#toprightsearch > .searchbox {}
Только стили .searchboxes которые являются прямыми дочерними элементами #toprightsearch
#container * .searchbox {}
Стили .searchbox, которые являются дочерними или более поздними версиями #container.
Вот хороший документ по теме: Селекторы w3C
Приведенный ниже код делает то, что говорит (по крайней мере, в Firefox). он окрашивает ввод в красный цвет
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<style type="text/css">
.mainbody #container #header #toprightsearch .searchbox {
background-color:red;
}
</style>
</head>
<body class="mainbody">
<div id="container">
<div id="header">
<div id="toprightsearch">
<input type="text" class="searchbox" />
</div>
</div>
</div>
</body>
</html>
Я думаю, вы должны посмотреть, не пошло ли что-нибудь не так с написанием идентификаторов и классов.
Из Документация по селекторам W3 :
Селекторы потомков выражают такую взаимосвязь в шаблоне. Селектор-потомок состоит из двух или более селекторов, разделенных пробелом. Селектор потомков формы "AB" соответствует, когда элемент B является произвольным потомком некоторого элемента-предка A.
Короче говоря, нет, вам не нужно включать все родительских элементов, и не должно вызывать никаких кроссбраузерных проблем. Однако с помощью этого селектора:
.mainbody .searchbox {}
Определенные стили будут применяться к любому элементу с классом searchbox , независимо от того, происходит ли он прямо или косвенно от элемента с классом mainbody .
Однако с вашим предложенным селектором:
.mainbody #container #header #toprightsearch .searchbox {}
Определенные стили более специфичны, и поэтому только элементы, которые происходят от элемента с классом mainbody ,