css 通用兄弟选择器( ~ )

2022-07-11 15:25:44

stylus设置兄弟元素样式：

鼠标浮动在 .video-li 元素上时，.video-li 兄弟中 .video-info 下的 .word 显示。

           .video-li

                &:hover

                    ~ .video-info

                        .word

                            visibility visible

设置 h1 兄弟元素中，class 为 p1 的元素样式：

<!DOCTYPE HTML>

<html>

<head>

<style type="text/css">

h1 ~ .p1 {margin-top:50px;}

</style>

</head>

<body>

<h1>This is a heading.</h1>

<p>This is paragraph.</p>

<p>This is paragraph.</p>

<p>This is paragraph.</p>

<p>This is paragraph.</p>

<p class="p1">This is paragraph.</p>

</body>

</html>