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

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

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

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

Но он работает нормально, если я опускаю некоторые идентификаторы.

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

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

Спасибо

Ответы

Ответ 1

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

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

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

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

Ответ 2

.searchbox {}

Стили с помощью .searchbox

.mainbody .searchbox{}

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

#toprightsearch > .searchbox {}

Стили только .searchboxes, которые являются прямыми дочерними элементами #toprightsearch

#container * .searchbox {}

Стили .searchbox, которые являются внуками или позже #container.

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

Ответ 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.

Ответ 4

Из Документация по выбору W3:

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

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

.mainbody .searchbox {}

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

С помощью предлагаемого селектора:

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

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

Ответ 5

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

toprightsearch .searchbox {}

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

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

Ответ 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>

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