您的位置:首页 > 其它

相邻选择器、兄弟选择器

2017-05-13 21:30 281 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/* #li3 + li{      !*相邻选择器(渲染后面的相邻元素):渲染列表项4*!
color: red;
}*/
#li3 ~ li{        /*兄弟选择器:渲染li3后面的所有元素*/
color: red;
}
</style>
<title>其他选择器</title>
</head>
<body>

<ul>
<li>列表项1</li>
<li>列表项2</li>
<li id="li3">列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
<li>列表项6</li>
<li>列表项7</li>
</ul>

</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: