Руководство по CSS

CSS @ правила (RULES)

Полный список свойств CSS

Функции CSS Полное руководство по селекторам CSS

CSS3 ~ общий sibling селектор

Общий sibling селектор, не обязательно быть相邻, только на одном уровне, A~B выбирает все элементы B на том же уровне после элемента A.

Полное руководство по CSS-селекторам

Онлайн пример

Установите цвет шрифта для каждого span элемента после p элемента в том же родительском контейнере:

Пример

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Основной учебник (oldtoolbag.com)</title>
<style>
p ~ span {
　　color: red;
}
</style>
</head>
<body>
<span>Это не красный.</span>
<p>Вот абзац.</p>
<code>Вот здесь есть код.</code>
<span>И здесь есть span.</span>
</body>
</html>

Проверьте, посмотрите <‹/›>

Определение и использование

former_element ~ target_element { style properties }

element1~element2 Выборка соответствует элементам element2,出现的 element1 之后。

element1 и element2 Эти два элемента должны иметь один и тот же родительский элемент, но element2 Не обязательно следовать сразу за element1 после.

Совместимость браузеров

IEFirefoxOperaChromeSafari

Все основные браузеры поддерживают element1~element2 Выборка.

Внимание:Чтобы использовать этот селектор в IE8 и более ранних версиях, необходимо声明 <!DOCTYPE>.

Полное руководство по CSS-селекторам

Функции CSS Полное руководство по селекторам CSS