Кто подскажет, кто расскажет...

gordi · January 17, 2012

Благодаря собственной ошибке выявил занятную вещицу

Посмотреть - http://trifler.ru/blog/i/hackcss/hackcss.htm

Загляните в html-код

sigma77 · January 17, 2012

gordi,

В чем занятность?

psywalker · January 17, 2012

Пока увидел только надпись Crome, вместо Chrome, но разве это занятно? :unsure:

SelenIT · January 17, 2012

А в чем прикол? У меня (Хром 16, ФФ10б, IE9, дальше не проверял), вроде бы, всё работает ожидаемо: первый див (подпадающий только под селектор класса) - синий, второй (подпадающий также под соседский селектор) - красный жирный. Или я в упор не вижу чего-то очевидного?

gordi · January 17, 2012

А в чем прикол? У меня (Хром 16, ФФ10б, IE9, дальше не проверял), вроде бы, всё работает ожидаемо: первый див (подпадающий только под селектор класса) - синий, второй (подпадающий также под соседский селектор) - красный жирный. Или я в упор не вижу чего-то очевидного?

А должно ли быть так, что

*~*.XXX {...}
или 
*+*.XXX {...}

Меняет оформление блока с одним и тем же классом?

SelenIT · January 17, 2012

Насколько я понимаю, да. Соседний селектор применяется, если перед элементом с классом в рамках того же предка есть что угодно (сразу перед ним во втором случае и неважно где перед ним - в первом). В коде он идет последним (при одинаковой специфичности), поэтому перекрывает просто селектор по классу...

gordi · January 17, 2012

Насколько я понимаю, да. Соседний селектор применяется, если перед элементом с классом в рамках того же предка есть что угодно (сразу перед ним во втором случае и неважно где перед ним - в первом). В коде он идет последним (при одинаковой специфичности), поэтому перекрывает просто селектор по классу...

Возможно вы и правы, но любой другой символ вместо "~" или "+", все это дело для второго по html-коду блока отменяет.

Также, если сразу после

</body>

добавить хотя бы , начинает работать только

*~*.XXX {...}

и это не понятно

Edited January 17, 2012 by gordi

psywalker · January 17, 2012

Насколько я понимаю, да. Соседний селектор применяется, если перед элементом с классом в рамках того же предка есть что угодно (сразу перед ним во втором случае и неважно где перед ним - в первом). В коде он идет последним (при одинаковой специфичности), поэтому перекрывает просто селектор по классу...

Меня единственное смущает, это последняя звёздочка после "+".

*+* - выходит это можно расценивать, как Применять к любому элементу, перед которым идёт любой другой элемент?

Насколько я понимаю, да. Соседний селектор применяется, если перед элементом с классом в рамках того же предка есть что угодно (сразу перед ним во втором случае и неважно где перед ним - в первом). В коде он идет последним (при одинаковой специфичности), поэтому перекрывает просто селектор по классу...
Возможно вы и правы, но любой другой символ вместо "~" или "+", все это дело для второго по html-коду блока отменяет.
Также, если сразу после
</body>
добавить хотя бы , начинает работать только
*~*.XXX {...}
и это не понятно

После закрывающего тега body?

sigma77 · January 17, 2012

Меня единственное смущает, это последняя звёздочка после "+".
*+* - выходит это можно расценивать, как Применять к любому элементу, перед которым идёт любой другой элемент?

*+*.hackcss - любой элемент с классом hackcss следующий после любого элемента.

Звездочку можно использовать в любом месте.

gordi · January 17, 2012

Насколько я понимаю, да. Соседний селектор применяется, если перед элементом с классом в рамках того же предка есть что угодно (сразу перед ним во втором случае и неважно где перед ним - в первом). В коде он идет последним (при одинаковой специфичности), поэтому перекрывает просто селектор по классу...
Меня единственное смущает, это последняя звёздочка после "+".
*+* - выходит это можно расценивать, как Применять к любому элементу, перед которым идёт любой другой элемент?
Насколько я понимаю, да. Соседний селектор применяется, если перед элементом с классом в рамках того же предка есть что угодно (сразу перед ним во втором случае и неважно где перед ним - в первом). В коде он идет последним (при одинаковой специфичности), поэтому перекрывает просто селектор по классу...
Возможно вы и правы, но любой другой символ вместо "~" или "+", все это дело для второго по html-коду блока отменяет.
Также, если сразу после
</body>
добавить хотя бы , начинает работать только
*~*.XXX {...}
и это не понятно
После закрывающего тега body?

Да.

Можно вопрос поставить иначе.

Почему и первый и второй блок оформлены по разному?

По идее, с учетом последней строки стилей с *+*, визуал обоих блоков должен быть одинаковым, а это не так

psywalker · January 17, 2012

Меня единственное смущает, это последняя звёздочка после "+".
*+* - выходит это можно расценивать, как Применять к любому элементу, перед которым идёт любой другой элемент?
*+*.hackcss - любой элемент с классом hackcss следующий после любого элемента.
Звездочку можно использовать в любом месте.

Да, но есть всё таки одно НО. Зацени, я ставлю в начале и всё обламывается. http://jsfiddle.net/qvVUU/

Хотя не, тут я уже тупанул вроде, тогда непонятно, где же подвох?

Можно вопрос поставить иначе.
Почему и первый и второй блок оформлены по разному?
По идее, с учетом последней строки стилей с *+*, визуал обоих блоков должен быть одинаковым, а это не так

Нее, не, тут есть подвох какой-то))

Дружище, а приведи свой пример с непоняткой плз

gordi · January 17, 2012

Меня единственное смущает, это последняя звёздочка после "+".
*+* - выходит это можно расценивать, как Применять к любому элементу, перед которым идёт любой другой элемент?
*+*.hackcss - любой элемент с классом hackcss следующий после любого элемента.
Звездочку можно использовать в любом месте.
Да, но есть всё таки одно НО. Зацени, я ставлю в начале и всё обламывается. http://jsfiddle.net/qvVUU/
Хотя не, тут я уже тупанул вроде, тогда непонятно, где же подвох?
Можно вопрос поставить иначе.
Почему и первый и второй блок оформлены по разному?
По идее, с учетом последней строки стилей с *+*, визуал обоих блоков должен быть одинаковым, а это не так
Нее, не, тут есть подвох какой-то))

Так и я о том же

Причем IE6 все эти выкрутасы по фигу

Типа антихак для него на рисовался

Сам не знаю что с этим делать, вроде и ни к чему фишка, где ее, когда использовать, но есть проблема и как быть не понятно

Edited January 17, 2012 by gordi

sigma77 · January 17, 2012

Почему и первый и второй блок оформлены по разному?
По идее, с учетом последней строки стилей с *+*, визуал обоих блоков должен быть одинаковым, а это не так

К обоим блокам применяется правило .hackcss {}

Ко второму блоку применяется правило *+*.hackcss {} поскольку только у этого элемента с этим классом есть предшествующий сестринский элемент.

Причем IE6 все эти выкрутасы по фигу

Естественно пофигу. Точно также как и div > p или div[class]

gordi · January 17, 2012

Почему и первый и второй блок оформлены по разному?
По идее, с учетом последней строки стилей с *+*, визуал обоих блоков должен быть одинаковым, а это не так
К обоим блокам применяется правило .hackcss {}
Ко второму блоку применяется правило *+*.hackcss {} поскольку только у этого элемента с этим классом есть предшествующий сестринский элемент.
Причем IE6 все эти выкрутасы по фигу
Естественно пофигу. Точно также как и div > p или div[class]

Тогда почему добавление сразу после </body>

меняет оформление первого блока?

psywalker · January 17, 2012

Почему и первый и второй блок оформлены по разному?
По идее, с учетом последней строки стилей с *+*, визуал обоих блоков должен быть одинаковым, а это не так
К обоим блокам применяется правило .hackcss {}
Ко второму блоку применяется правило *+*.hackcss {} поскольку только у этого элемента с этим классом есть предшествующий сестринский элемент.
Причем IE6 все эти выкрутасы по фигу
Естественно пофигу. Точно также как и div > p или div[class]
Тогда почему добавление сразу после </body>
меняет оформление первого блока?

У меня такого не происходит. В фф по крайней мере. Приведи пример.

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

sigma77 · January 17, 2012

Тогда почему добавление сразу после </body>
меняет оформление первого блока?

В смысле?


<body>
  ....
</body>
<br>

Так?

psywalker · January 17, 2012

Тогда почему добавление сразу после </body>
меняет оформление первого блока?
Потому что у первого блока также появляется предшествующий сестринский элемент -

Да лана? У меня такого не происходит. Покажите примерчик, люди)

Парсер в Хроме и ФФ, как минимум, вставляет в конец, перед закрывающим body

Тогда почему добавление сразу после </body>
меняет оформление первого блока?
В смысле?
<body>
 ....
</body>
 
Так?

Ага)

sigma77 · January 17, 2012

Да лана? У меня такого не происходит. Покажите примерчик, люди)

Смотри исправленную версию поста

Я думала он имеет ввиду


<body>
  <br>
  <div></div>
  <div></div>
</body>

Ага)

Да мне такое и в голову не могло придти

psywalker · January 17, 2012

Да лана? У меня такого не происходит. Покажите примерчик, люди)
Смотри исправленную версию поста
Я думала он имеет ввиду
<body>
 
 <div></div>
 <div></div>
</body>
Ага)
Да мне такое и в голову не могло придти

Да, в том-то и дело, поэтому я его спецом. переспросил

gordi · January 17, 2012

Стоп, ошибся надо после <body> ставить

Должно быть так


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>hackcss</title>
<style type="text/css">
* {margin:0;padding:0;}
.hackcss {border:#00a 1px solid;color:#00a;margin:10px auto;padding:7px;width:400px;}
*+*.hackcss {border:#a00 1px solid;color:#a00;font:bold 12px arial;}
</style>
</head>
<body>
<br>
<div class="hackcss">
<p>Google Crome, FireFox, OPERA, IE7(8)</p>
<p>.hackcss {border:#00a 1px solid;color:#00a;}</p>
</div>

<div class="hackcss">
<p>Google Crome, FireFox, OPERA, IE7(8)</p>
<p>*~*.hackcss {border:#a00 1px solid;color:#a00;}</p>
<p>*+*.hackcss {border:#a00 1px solid;color:#a00;}</p>
</div>
</body>
</html>

И все блоки будут оформлены по последней строке стилей.

Поэтому вопрос остается прежним. Почему добавление меняет оформление блоков?

Хочу сказать ответа не знаю, потому и тему завел.

Edited January 17, 2012 by gordi

psywalker · January 17, 2012

Стоп, ошибся надо после <body> ставить

Должно быть так


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>hackcss</title>
<style type="text/css">
* {margin:0;padding:0;}
.hackcss {border:#00a 1px solid;color:#00a;margin:10px auto;padding:7px;width:400px;}
*+*.hackcss {border:#a00 1px solid;color:#a00;font:bold 12px arial;}
</style>
</head>
<body>
<br>
<div class="hackcss">
<p>Google Crome, FireFox, OPERA, IE7(8)</p>
<p>.hackcss {border:#00a 1px solid;color:#00a;}</p>
</div>

<div class="hackcss">
<p>Google Crome, FireFox, OPERA, IE7(8)</p>
<p>*~*.hackcss {border:#a00 1px solid;color:#a00;}</p>
<p>*+*.hackcss {border:#a00 1px solid;color:#a00;}</p>
</div>
</body>
</html>

И все блоки будут оформлены по последней строке стилей.

Поэтому вопрос остается прежним. Почему?

У меня такого не происходит. Приведи пример, не издевайся

Тупанул. Оксана уже чуть выше объяснила, почему.

Потому что теперь первым элементом становиться

SelenIT · January 17, 2012

.hackcss — любой элемент с классом "hackcss"

* + *.hackcss (эквивалентно * + .hackcss, звездочка специфичности не меняет) — любой элемент с классом "hackcss", непосредственно следующий за любым элементом (т.е. не первый ребенок у своего родителя).

* ~ *.hackcss (эквивалентно * ~ .hackcss, звездочка специфичности не меняет) — любой элемент с классом "hackcss", идущий после любого элемента (т.е. тоже не первый ребенок у своего родителя).

Если первый див является первым ребенком родителя, к нему применяется только правило для .hackcss. Если перед ним идет — он уже не первый ребенок, поэтому к нему применются оба правила. Второй див всегда не первый ребенок, поэтому к нему всегда применяются оба правила.

IE6 соседских селекторов тупо не понимает. IE7-8, по идее, понимает +, но не должен понимать ~ (насколько мне известно).

По-моему, всё логично

gordi · January 17, 2012

Сделал пример таблицей -

С - http://trifler.ru/blog/i/hackcss/hackcss01.htm

Без него - http://trifler.ru/blog/i/hackcss/hackcss02.htm

Совсем все не понятно

SelenIT · January 17, 2012

У td родитель - tr. Соответственно, в каждом tr к первой td применяется только правило по классу, ко второй (как к не первому ребенку) — оно же + правило с соседским селектором. А br им ни разу не старший брат (а всего лишь двоюродный прадедушка — брат table, родителя tbody, который родитель tr-кам), поэтому ни на что не влияет.

gordi · January 17, 2012

Как бы там ни было, для таблицы этот трюк может быть полезен, часто не имея возможности поменять класс в html, можно стилями при помощи добавки *+* к одноименному классу, оформление в одном из столбцов изменить

Edited January 17, 2012 by gordi

Sign In

Кто подскажет, кто расскажет...

Question

Link to comment

Share on other sites

24 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information