userContent.css - как зацепить элемент

vladmir · №1

Что-то не знаю как скрыть элемент на странице.

Такая тестовая страница

Код:

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">

div.info2[style="float:right;"]
{display:none !important}
</style>
<title>titled</title></head><body>

<table width="100%" id="changeTypeBlockTable">
 <tr>
<td>
<div id="changeTypeBlock" class="info2">
Вид форума:
</div>
<div id="changeTypeBlock" class="info2" style="float:right;">
<div class="content">
Поделиться ссылкой:
</div>
</div> 
</td>
</tr>
</table>
</body></html>

Хотелось бы скрыть блок, где "Поделиться ссылкой" и не трогать блок, где "Вид форума".
Они отличаются тем, что скрываемом есть style="float:right;" но что-то не получается зацепиться.

Infocatcher · №2

есть style="float:right;"

Выделить код

Код:

:after {
    content: attr(style);
}

=>

Выделить код

Код:

[style="float: right;"] {
    display: none;
}

vladmir · №3

Infocatcher
А простыми словами? :rolleyes: Впиши, плиз, сразу в:

</style>

Infocatcher · №4

С «content: attr(style);» можно увидеть, что «float:right;» в исходном коде превращается в «float: right;» – с пробелом.
Соответственно, если отличие только в значении атрибута style, то можно к нему и привязаться.
А под «[style="float: right;"]» попадают все элементы с таким значением атрибута style.

vladmir пишет

сразу в:

Выделить код

Код:

<style type="text/css">
[style="float: right;"] {
    display: none;
}
</style>

Но быстрее будет работать, по идее, вот так:

Выделить код

Код:

#changeTypeBlock[style="float: right;"] {
    display: none;
}

А универсальнее, пожалуй, «[style]» – чтобы было достаточно только наличия атрибута.

vladmir · №5

Infocatcher

С «content: attr(style);» можно увидеть, что «float:right;» в исходном коде превращается в «float: right;» – с пробелом.

Вот это разжуй ещё подробнее.
Как оно превращается? И где можно увидеть?

С пробелом всё начинает работать - там уже понятно, неск вариантов, вот хоть так
div#changeTypeBlock.info2

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

Infocatcher · №6

vladmir пишет

Вот это разжуй ещё подробнее.
Как оно превращается? И где можно увидеть?

Ну, где-то в движке берет и превращается. Там еще и «;» допишется, если без нее написать.
Наверное, делается преобразование в некий внутренний формат, а исходный тест из соображений производительности (или лень было что-то дополнительное делать ) не запоминается.
Увидеть можно в Firebug и DOM Inspector'е. Ну, и content: attr() показывает.
И «исходный код выделенного фрагмента» тоже показывает сгенерированный код.

Отредактировано Infocatcher (17-10-2010 01:40:07)

vladmir · №7

Infocatcher
Ну ладно, в общем где именно - фик с ним, но меня вводит в ступор такое открытие, что с пробелом и без в этом месте работает по-разному.
Ну это же без разницы всю жизь было, чё за фокусы.

Хорошо, спасибо за научное содействие.

Al_H · №8

Это CSS-селектор. Там пробел несет определенную нагрузку. Более того, это точное совпадение с подстрокой, без масок. Естественно при поиске строки по умолчанию есть разница, ищем мы с пробелом или нет. Если мы это делаем в программе, нужно специально обрабатывать поиск, чтобы учесть наличие пробелов, или переводить все в регулярные выражения.

Отредактировано Al_H (18-10-2010 05:25:39)

vladmir · №9

Al_H

Это CSS-селектор. Там пробел несет определенную нагрузку.

И где-нибудь в стандартах записано?
Я, правда, давненько не читывал.))

Al_H · №10

Вы 10 лет не читали стандартов?
Пробел - селектор потомков. Например, table tr не то же самое что tabletr. При упоминании селекторов списком через запятую, ее можно окружать или не окружать пробелами, потому что в конце и начале селектора пробел не учитывается, в том числе между селектором и открывающей фигурной скобкой.
В данном случае речь шла о селекторе атрибута. По действию атрибута style оба варианта идентичны, но поиск подстроки в значении атрибута ищет либо такую строку, либо такую. И тут уже есть разница, есть ли там пробел, потому что он либо есть, либо его нет.
Строки внутри блока стилей могут свободно форматироваться, в частности, можно добавлять пробелы около двоеточий и точек с запятой. Но принято ставить пробел после двоеточия и пробел или перевод строки после точки с запятой, если дальше идет еще одно свойство.

vladmir · №11

Al_H

Вы 10 лет не читали стандартов?

По действию атрибута style оба варианта идентичны

Это что, за 10 лет изменилось?
Простыми словами - оба варианта:
float:right;
float: right;
Должны срабатывать одинаково. Правильно?

но поиск подстроки в значении атрибута ищет либо такую строку, либо такую

А это почему?

Полезная информация

№114-10-2010 22:46:47