CSS样式表的波浪线（~）选择器

于 2024-05-22 20:10:50 发布
阅读量236 收藏
点赞数 1
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panghuangang/article/details/139128460
版权

在CSS中，波浪线“~”选择器用于选择在同一个父级元素下的某个元素之后的所有兄弟元素。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     	/* 选择ul标签后面的所有p标签 */
        ul~p {
            color: pink;
        }
    </style>
</head>

<body>
    <ul>
        <li>我的订单</li>
        <li>会员中心</li>
    </ul>

    <p>第一个段落</p>
    <p>第二个段落</p>
</body>

</html>

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

听海边涛声
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3 SVG波浪线条动画特效
07-24
CSS3引入了许多新的特性和模块，例如选择器、布局模式、动画和过渡等，使得网页设计更加丰富和动态。 在本特效中，CSS3的动画功能起到了关键作用。CSS3的`@keyframes`规则允许开发者定义一个动画的过程，从起始状态...
纯CSS3网页底部波浪动画特效
06-24
CSS3是层叠样式表的第三版，它引入了许多新特性，如选择器、过渡、动画、阴影、渐变等，这些都极大地扩展了设计师的创意空间。在这个“纯CSS3网页底部波浪动画特效”中，我们主要会利用CSS3的动画（Animations）和...
css中的 +,~, ＞
weixin_43755104的博客
07-30 1万+
文章目录css中的选择器~(波浪号)+(加号）\>(大于号) css中的选择器 ~(波浪号) p~ul选择器 p之后出现的所有ul。 两种元素必须拥有相同的父元素，但是 ul不必直接紧随 p。 P~ul { background-color: pink; } <p>快乐生活</p> <ul> 　　 <li>生活</li> 　　 <li>生活</li> 　　 &
CSS波浪号选择器
qq_38152997的博客
06-03 1365
波浪选择器用来选择所有匹配到的兄弟元素 <ul> <li class="something-important">Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> .something-important { color: red; } .something-important ~ li { fo
CSS波浪选择器
FF_Chen的博客
06-05 390
~（波浪号）概念 ~（波浪号）：A ~ B表示选择A标签后的所有B标签，但是A和B标签必须有相同的父元素。 <style> h3~h5{ color: red; } </style> <body> <div> <h1>我是第1行</h1> <h2>我是第2行</h2> <div>
css选择器 ~ （波浪号）、+（加号）、＞（大于号）的用法解析和举例
树上骑个猴的博客
12-21 1万+
~（波浪号） ~（波浪号）：A ~ B表示选择A标签后的所有B标签，但是A和B标签必须有相同的父元素。 <style> h3~h5{ color: red; } </style> <body> <div> <h1>我是第1行</h1> <h2>我是第2行</h2> <div>
【译】谨慎使用CSS中的波浪选择器
sinolover的专栏
03-11 269
最近我的一些项目都遇到了一些类似的样式问题。它们都错误地使用了波浪选择器，并造成了很多地方的CSS代码臃肿(CSS Bloat)。大家可能以前也都遇到或者使用过波浪选择器，毕竟它作为CSS选择器已经很长时间了，甚至IE7都支持。波浪选择器用来选择所有匹配到的兄弟元素。 一个例子 <ul> <li class="something-important">Item...
css3属性选择器，css中“~”（波浪号）、“，”（逗号）、“+”（加号）和（大于号）详解
qq_45716607的博客
11-03 456
css3属性选择器，css中“~”（波浪号）、“，”（逗号）、“+”（加号）和（大于号）详解
纯CSS3一条波浪光线动画特效.zip
07-04
至于"css样式"，这通常指的是CSS3的其他样式规则，如选择器、盒模型、布局模式（如Flexbox或Grid）、边框和背景等。这些样式可以用来定制波浪光线的外观，如线条的粗细、颜色、阴影，以及背景的颜色和渐变，以营造出...
蓝色波浪线背景CSS模板
11-24
在这款模板中，CSS被巧妙地运用，通过定义不同的选择器（如类选择器、ID选择器等）来定制元素的外观。波浪线条的实现通常涉及CSS的伪元素（如::before和::after）和transform属性，通过这些技术可以创建出非直线的...
html css波浪线,css实现波浪线及立方体
weixin_39657662的博客
06-20 356
这里是利用linear-gradient来实现，也就是画圆，然后利用底色来遮住部分圆；利用css3属性perspective加旋转实现立方体1.css实现波浪线htmlcss.card-list{display:flex;padding:20px;width:100%;}.wave-container{position:relative;margin...
前端必学的CSS3波浪效果演示
最新发布
一步一个脚印，踏实努力，向着目标前进
08-12 3731
通过在浏览器中打开这个示例，你可以看到一个简单的CSS3波浪效果。你可以根据需要调整容器的大小、颜色和动画效果来创建自己的波浪效果。这些示例只是展示了一些基本的CSS3波浪效果，你可以根据自己的需求进行调整和扩展，创造出更加独特的波浪效果。属性为伪元素添加了一个阴影效果，通过调整阴影的位置和颜色，可以创建出不同的波浪阴影效果。根据不同的需求和浏览器兼容性要求，你可以选择适合的波浪效果来应用到你的项目中。属性将伪元素的形状设置为圆形，从而创建了一个波浪形状的效果。值，从而实现波浪的运动效果。
CSS 基础知识 选择器
wgchen
10-19 1514
CSS 基础知识 选择器
css中“~”（波浪号）、“，”（逗号）、“+”（加号）和“>”（大于号）详解
热门推荐
weixin_38606332的博客
07-04 5万+
p~ul{　　 background:#8e8e8e; } &lt;p&gt;段落P&lt;/p&gt; &lt;ul&gt;　　 &lt;li&gt;列表项1&lt;/li&gt;　　 &lt;li&gt;列表项2&lt;/li&gt;　　 &lt;li&gt;列表项3&lt;/li&gt;
css ~波浪线选择器连接符General Sibling Selector
ISaiSai的专栏
01-22 1万+
https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and b
“〜”（波浪号/波浪形/旋转）CSS选择器是什么意思？
asdfgh0077的博客
04-09 621
Searching for the ~ character isn't easy. 搜索~字符并不容易。 I was looking over some CSS and found this 我查看
网站的发布与推广.ppt
11-12
"该资源为一个关于网站发布与推广的PPT，主要讲解了如何使用CSS样式表进行网站设计，并介绍了CSS的选择器、样式规则及其应用到网页中的三种方式：内联式、内嵌式和外部链接式。" 在网站开发中，CSS（层叠样式表）起...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值