Вложение стиля CSS - правильная форма?

Question

У меня возникла проблема при попытке найти какие-либо конкретные сведения о том, как правильно написать правила CSS в таблице стилей, где класс или идентификатор вложены во многие другие идентификаторы и стили, например,

.mainbody #container #header #toprightsearch .searchbox {}

Итак, у нас есть класс searchbox в toprightsearch ID, в идентификаторе заголовка, в идентификаторе контейнера, в mainbody классе.

Но, похоже, он работает правильно, если я опущу некоторые идентификаторы.

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

И любая дополнительная информация по этой теме приветствуется.

Спасибо

Answer 1

.searchbox {}

Стилизует что-либо с помощью .searchbox

.mainbody .searchbox{}

Стилизация любого .searchbox, который происходит от любого .mainbody, прямого ребенка, внука, четверного правнука, не имеет значения.

#toprightsearch > .searchbox {}

Только стили .searchboxes, которые являются прямыми потомками # toprightsearch

#container * .searchbox {}

Стили .searchbox, принадлежащие внуку или позже к контейнеру #.

Вот хороший документ по теме: селекторы w3C

Answer 2

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

Нет правильного количества родителей в списке; это зависит от того, что вам нужно для разметки. Как видите, selector1 selector2 означает selector2 на любом уровне внутри selector1, и вы можете настроить его для любого поведения, которое вам нужно.

В вашем примере вы должны указать .mainbody #container #header #toprightsearch .searchbox, если то, что вы имеете в виду , означает, что стиль применяется только к .searchbox es, которые находятся внутри всей этой иерархии. Если же вы хотите, чтобы .searchboxes, существующий в других условиях, имел такой же стиль, вы должны быть менее ограничительными в иерархии. Речь идет только о том, чего вы пытаетесь достичь.

Комментарий: идентификаторы производят больше специфичности, поэтому, если их опустить, это еще больше снижает специфичность вашего правила.

Answer 3

Идентификаторы относятся к конкретной странице. Так что вы просто используете

#toprightsearch {
 stylename: stylevalue;
}

Если вы ищете вложенные классы, тогда правильный формат -

.header .textBoxes {
  stylename: stylevalue;
}

Если вы знаете точного потомка родителя, тогда вы используете знак>. Так что, если ваш документ был такой:

<div class="header">
    <div class="menu">
         <input type="text" class="textBox" />
    </div>
</div>

Вы можете использовать это:

 .header > .menu > .textBox {somestyle:somevalue;}

Это означает, что только элементы с классом .textBox находятся непосредственно внутри элемента класса .menu, который находится непосредственно под элементом с классом .header.

Answer 4

Из документации по селекторам W3 :

Селекторы потомков выражают такие отношения в шаблоне. Селектор потомков состоит из двух или более селекторов, разделенных пробелами. Селектор потомков в форме «A B» совпадает, когда элемент B является произвольным потомком некоторого предка элемента A.

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

.mainbody .searchbox {}

Определенные стили будут применяться к любому элементу с классом searchbox независимо от того, идет он прямо или косвенно от элемента с классом mainbody.

Однако с вашим предложенным селектором:

.mainbody #container #header #toprightsearch .searchbox {}

Определенные стили являются более конкретными, и поэтому только элементы, которые происходят от элемента с классом mainbody, затем элементы с идентификаторами #container, #header, #toprightsearch в этом порядке и имеющие класс Для имени searchbox будут применены определенные стили.

Answer 5

Теоретически, идентификатор должен использоваться только для одного конкретного элемента на странице. Таким образом, у вас должен быть только один элемент с идентификатором toprightsearch, поэтому для вашего CSS вам нужно только указать:

toprightsearch .searchbox {}

, поскольку на вашей странице есть только один элемент с идентификатором toprightsearch, все остальные селекторы не нужны.

Если на вашей странице есть два элемента с идентификатором toprightsearch, это плохая практика кодирования.

Answer 6

Код ниже делает то, что говорит (по крайней мере, в 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>

Думаю, вам следует посмотреть, не было ли ничего неправильного в написании идентификаторов и классов.