关于css选择器的问题 + * ~这三个有什么区别

+ * ~ 这三个符号有时候总会用混起来.

+:是表示相邻的兄弟下面的所有:比如: ul下面有N个li标签,不要第一个li标签,则可以用 li+li:{};

*和~一般用在属性选择器上使用:

*表示属性中有这类的字符串,举个例子:

[data*="abc"] 选择 data 属性值中包含子串 "abc" 的所有元素 <a data="def" ....> <a data="abcd" ...>

~这个表达不清楚,请意会: [data~="abc"] 选择 data 属性值等于“abc"的所有元素 <a data="def" ...> 不能选择 <a data="abcd" ...>

[data~="abc"] 选择 data 属性值等于“abc"的所有元素 <a data="def" ...> 可以选择 <a data="abc d" ...>

类似的还有 ^ $等

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏阮一峰的网络日志

CSS 变量教程

今年三月,微软宣布 Edge 浏览器将支持 CSS 变量。 这个重要的 CSS 新功能,所有主要浏览器已经都支持了。本文全面介绍如何使用它,你会发现原生 CSS...

33411
来自专栏IMWeb前端团队

jQuery中的DOM操作

Dom操作的分类:DOM Core,html-DOM,CSS-DOM 查找节点: 查找属性节点(通过jq选择器),操作属性节点(attr(‘属性名’,’属性值’...

1777
来自专栏全沾开发(huā)

学习zepto.js(Hello World)

学习zepto.js(Hello World) Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery...

4108
来自专栏前端侠2.0

HTMLDocument和XMLDocument 的children

document.children  或者 DOM元素的children都是可以访问的,它返回是该节点下的所有Element节点。 它们同样还有一个childN...

711
来自专栏练小习的专栏

CSS计数器 counter

适用场景: 当排序以及序号变动对服务端造成的压力大的情况下,使用css计数。 在早期,只有ol和ul可以对子元素li进行排序,,而CSS2.1规范中加入了co...

1649
来自专栏WindCoder

从li看html标签属性(attribute)和dom元素的属性(property)

从对象来说,attribute是html文档上标签属性,而property则是对应dom元素的自身属性。

1111
来自专栏君赏技术博客

ClangFormat语法1.0

AllowShortIfStatementsOnASingleLine (bool)

783
来自专栏前端那些事

JavaScript快速查找节点

我们在实际的开发中,经常要获取页面中某个html元素,动态更新元素的样式、内容属性等。 ? 我们已经知道在JavaScript中提供下面的方法获取子、父、兄节...

19111
来自专栏一枝花算不算浪漫

[jQuery学习系列一]1-选择器与DOM对象

33711
来自专栏对角另一面

读Zepto源码之样式操作

这篇依然是跟 dom 相关的方法,侧重点是操作样式的方法。 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版...

2050

扫码关注云+社区