[решено] Знак «~» в css

Опубликовано | Автор: Губарь Маргарита Александровна

Статья последний раз была обновлена 04.03.2023



Цитировать

[решено] Знак "~" в css


Пользователь


Сообщения: 78

Благодарности: 4

Профиль | Отправить PM | Цитировать
Что означает знак "~" в css, как его использовать?

Отправлено: 09:03, 01-04-2012 |
 



Кот Ти


Moderator


Сообщения: 6959

Благодарности: 1137

Профиль | Отправить PM | Цитировать

Первая ссылка из гугла говорит следующее:

Цитата:
Тильда (~) позволяет выделить определенный атрибут из списка атрибутов, разделенных запятой.


Например, мы можем задать наш собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Так, мы можем указать, что ссылка является внешней и что она ссылается на изображение.

HTML код:
<a href="path/to/image.jpg" data-info="external image"> Click Me </a>



Вот, Html-код на месте, теперь напишем стили.

HTML код:
/ * Выбираем ссылки с атрибутом data-info, содержащий значение "external" * /
a[data-info~="external"] { color: red; }
/ * И которые содержат значения "image" * /
a[data-info~="image"] { border: 1px solid black; }
Это сообщение посчитали полезным следующие участники:

Отправлено: 09:07, 01-04-2012 | | #2 |








Для отключения данного рекламного блока вам необходимо зарегистрироваться или войти с учетной записью социальной сети.

Если же вы забыли свой пароль на форуме, то воспользуйтесь данной ссылкой для восстановления пароля.
ЧИТАЙТЕ ТАКЖЕ:  Fluid Images · An A List Apart Article


Пользователь


Сообщения: 78

Благодарности: 4

Профиль | Отправить PM | Цитировать

Coutty, а как использовать следующию конструкцию из примера:

Код:
li:hover ~ .class {background:red;}

Отправлено: 09:19, 01-04-2012 | | #3 |



Кот Ти


Moderator


Сообщения: 6959

Благодарности: 1137

Профиль | Отправить PM | Цитировать

Есть элементы li, у которых заданы различные классы:

HTML код:
<html>
        <head>
                <style>
                        li:hover ~ .class {background:red;}
                </style>
        </head>
        <body>
                <ul>
                        <li class="first">1</li>
                        <li class="second">2</li>
                        <li class="second class">3</li>
                        <li class="class other">4</li>
                        <li class="class">5</li>
                </ul>
        </body></html>

В данном случае если написать просто li:hover .class {}, то будут выбраны только те элементы, у которых задан ТОЛЬКО один класс class, т.е. только элемент №5. А если li:hover ~.class {}, то все элементы, которые содержат класс class, т.е. 3, 4 и 5.
Это сообщение посчитали полезным следующие участники:

Отправлено: 09:57, 01-04-2012 | | #4 |



Дурик


Сообщения: 2116

Благодарности: 524

Профиль | Сайт | Отправить PM | Цитировать

——-
Бди и блюди!

Отправлено: 19:07, 05-04-2012 | | #5 |



Компьютерный форум OSzone.net » Компьютеры + Интернет » Вебмастеру » [решено] Знак "~" в css

Участник сейчас на форуме Участник вне форума Автор темы Сообщение прикреплено


Похожие темы
Название темы Автор Информация о форуме Ответов Последнее сообщение
IVT_Virtual_0000" http://i081.radikal.ru/1002/62/da9f223ee441t.jpg Это, насколько я понял, относится к установленной у меня программе BlueSoleil v6.4.249.0 Подскажите, пожалуйста, кто сталкивался, как…" style="color:rgb(0, 102, 204);">Драйвер — [решено] Восклицательный знак на "Другие устройства -> IVT_Virtual_0000" kigerman Microsoft Windows 7 2 11-02-2010 13:46
Интерфейс — [решено] Как удалить папку "Моя музыка","Мои Картинки", "Мое видео"? verdix Microsoft Windows 2000/XP 3 03-10-2009 22:46
Debian/Ubuntu — [решено] Пропали кнопки "свернуть","закрыть","во весь екран" в папках Alex.sys Общий по Linux 5 02-04-2009 10:13
Приоритет в диспетчере: "реального времени", "средний", "выше среднего" alhimik PC Хочу все знать 3 28-11-2006 04:29
Запретить/удалить пункт "Programs" ("Программы") из меню кнопки "Start" ("Пуск") submaster Microsoft Windows NT/2000/2003 5 13-09-2006 11:29





 
Переход


Часовой пояс GMT +3. Сейчас 18:48. | © OSzone.net 2001-2013
Powered by: vBulletin

Copyright ©2000 — 2013, Jelsoft Enterprises Ltd.


http://forum.oszone.net/nextoldesttothread-232144.html

Губарь Маргарита Александровна
Губарь Маргарита Александровна недавно публиковал (посмотреть все)
Рубрика: Веб-разработка | Метка: