Какая замена для детского селектора? - PullRequest
Новая
       22

Какая замена для детского селектора?

9 голосов
/ 12 января 2009

Поскольку IE6 не поддерживает дочерний селектор (см. http://kimblim.dk/csstest/#ex1), Какая альтернатива при работе с этим браузером?

Я не хочу изменять разметку, и я бы очень предпочел решение только для CSS ...

И да, это прямой ребенок, на которого я хочу нацелиться.

Спасибо!

Ответы [ 8 ]

9 голосов
/ 13 января 2009

Я наткнулся на что-то вроде хака: http://meyerweb.com/eric/thoughts/2005/05/31/universal-child-replacement/ Использование хака ' star html ' для IE (6 и ниже) в сочетании с этим позволяет мне выбрать прямого потомка. Допустим, мы хотим применить отступ в 10 пикселей к прямому потомку F из E: 

* html body E F
{
    /* apply style here for IE 6 */
    padding-top: 10px;
    /* This applies the style to every F inside of E */
}
* html body E * F
{
    /* undo style here */
    padding-top: 0px;
    /* This will undo the style set above for every F that has something in between itself and E, that is, every F besides the direct children of E */
}

Я ценю ваши ответы до сих пор, но, несмотря на то, что мне неприятно принимать мой собственный ответ, это было решением, на котором я в итоге остановился. Спасибо, ребята!

4 голосов
/ 12 января 2009

Вы можете использовать jQuery, не очень хорошее решение, но это один из вариантов, который я использовал в прошлом: 

$("parent > child").each(function() {
    $(this).addClass("child-styles");
}

Вы, очевидно, захотите обернуть это в какую-то специализированную проверку IE6. И, возможно, вам понадобится таблица стилей, заключенная в оператор IF IE6, для добавления этих специализированных стилей.

1 голос
/ 19 мая 2010

В этом посте обсуждаются все различные варианты эмуляции дочерних селекторов CSS в IE6, включая небольшой трюк в конце работы с вложенными структурами: http://craftycode.wordpress.com/2010/05/19/emulating-css-child-selectors-in-ie6/

1 голос
/ 20 октября 2009

Вот хорошее решение, которое я нашел в книге: «Антология Javascript»

Примерно так: 

/* for all but IE */
#nav ul li.currentpage > a:hover {
  background-color: #eff;
}

И код для обслуживания IE: 

/* for IE */
* html #nav ul li.currentpage a:hover {
  background-color: expression(/currentpage/.test(this.parentNode.className)? "#eff" : "#ef0");
}

Хак для IE заключается в том, что только IE думает, что есть обертка над html, и IE поддерживает функцию expression ().

Выражение использует регулярное выражение (/ currentpage /) и проверяет его на соответствие классу родительского узла, поэтому прямым потомкам элемента li.currentpage будет присвоено значение #eff, другим потомкам - значение # EF0.

Обратите внимание, что используемые цвета являются поддельными, пожалуйста, не комментируйте их; -)

0 голосов
/ 08 июня 2011

Кросс-браузерное решение, которое я использовал, заключается в следующем. Он не использует взломы IE6 и правильно отображает встроенные списки (скажем, вам нужно по-разному стилизовать вложенные элементы OL и UL). 

ul, ol {
    /* Set margins, padding, and other generic styles */
}
ul li, ul ul li, ol ul li {
    list-style-type: disc; /* unordered lists */
}
ol li, ul ol li, ol ol li {
    list-style-type: decimal; /* ordered lists */
}

Это так же просто, как йодлирование CSS!

0 голосов
/ 11 февраля 2010

Используйте это 

div * { padding-left:20px; }
div * * { padding-left:0; }

Сначала вы нацеливаетесь на всех детей, а затем сбрасываете объявление css, нацеливаясь на всех внуков.

0 голосов
/ 12 января 2009

Помещение пользовательского класса в элемент. 

<ul>
<li class="first">Blah<li>
<li>Blah<li>
<li>Blah<li>
</ul>
0 голосов
/ 12 января 2009

Вам нужен прямой ребенок? IE6 поддерживает селекторы потомков, такие как 

div span { ... }

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

...