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

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

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

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

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

.searchbox {}

Стилизует что угодно с .searchbox

.mainbody .searchbox{}

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

#toprightsearch > .searchbox {}

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

#container * .searchbox {}

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

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

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

#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.

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

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

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

.mainbody .searchbox {}

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

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

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

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

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

#toprightsearch .searchbox {}

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

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

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

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