CSS element1~element2选择器，选择某元素后的某批元素

最新推荐文章于 2023-04-20 16:19:50 发布

p_hao

最新推荐文章于 2023-04-20 16:19:50 发布

阅读量532

点赞数

本文链接：https://blog.csdn.net/p_hao/article/details/103490499

版权

CSS3 element1~element2 选择器

定义和用法

element1~element2
选择element1 之后出现的所有 element2。

两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1。

示例
为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置背景：

<!DOCTYPE html>
<html>
<head>
<style> 
p~ul
{
background:#ff0000;
}
</style>
</head>
<body>

<div>一个 div 元素。</div>
<ul>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ul>

<p>第一段。</p>
<ul>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ul>

<h2>另一个列表</h2>
<ul>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ul>

</body>
</html>

效果：
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

p_hao

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS element1~element2选择器，选择某元素后的某批元素

CSS3 element1~element2 选择器定义和用法element1~element2选择element1 之后出现的所有 element2。两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1。示例为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置背景：<!DOCTYPE html><html><...
复制链接

扫一扫