[решено] Знак "~" в css [Версия для КПК] - Компьютерный форум OSzone.net

Показать полную графическую версию : [решено] Знак "~" в css

KrotMen

01-04-2012, 10:03

Что означает знак "~" в css, как его использовать?:mellow:

Coutty

01-04-2012, 10:07

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

Например, мы можем задать наш собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Так, мы можем указать, что ссылка является внешней и что она ссылается на изображение.
<a href="path/to/image.jpg" data-info="external image"> Click Me </a>

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

KrotMen

01-04-2012, 10:19

Coutty, а как использовать следующию конструкцию из примера:
li:hover ~ .class {background:red;}

Coutty

01-04-2012, 10:57

Есть элементы li, у которых заданы различные классы:
<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.

Sham

05-04-2012, 20:07

http://www.w3.org/TR/css3-selectors/#selectors