特征为+加号，这个查找的是同级别下面紧挨着的第一个span /*查找同级别下面紧挨着的第一个span(不能有其他标签间隔)*/ div + span { color:.../*标签查找div id查找d1 类查找c1*/ color: red; } /*不并列的情况*/ /*不并列同样可以使用组合选择器*/ .c1 p { /*...:nth-last-of-type() :nth-of-type() :only-child :only-of-type :optional :out-of-range :past (en-US) :placeholder-shown...标签属性选择器 a[title] { } 标签属性选择器 伪类选择器 p:first-child { } 伪类 伪元素选择器 p::first-line { } 伪元素 后代选择器 article p 后代运算符...子代选择器 article > p 子代选择器 相邻兄弟选择器 h1 + p 相邻兄弟 通用兄弟选择器 h1 ~ p 通用兄弟 网站分享 组件 | Element Bootstrap [
:placeholder-shown vs ::placeholder 我们可以使用:placeholder-shown设置input元素的样式。...这是因为:placeholder-shown仅会针对input本身。对于实际的占位符文本，必须使用伪元素::placeholder。...:placeholder-shown vs :empty :placeholder-shown是专门用于确定元素是否显示占位符的对象，我们主要使用它来检查input 内容是否为空（假设所有的input都有一个占位符...所以我们可以这样说：不要使用:empty检查输入元素是否为空。 如果检查 input 内容是否为空（在没有点位符的情况下）？ 我们检查输入是否为空的唯一方法是使用:placeholder-shown。...组合其它选择器 我们可以使用:not伪类对某些事物进行逆运算。 在这里，我们可以在输入不是空的情况下进行定位。
实际上，我们可以借助CSS :placeholder-shown伪类，纯CSS，无任何JS，实现这样的占位符交互效果。...兼容性还是很不错的，在移动端我们可以放心使用。因为就算一些老手机不支持，也不过是传统的placeholder占位符效果，并没有什么损失。...经典案例 下面展示使用几个:placeholder-shown实现label特性占位符案例。 ? 输入内容功能布局效果也是正常的： ?...然后，后面的.input-label这个label元素代替成为我们肉眼看到的占位符。我们可以采用绝对定位： ?...其他 demo页面还使用了其他一些CSS3属性，例如，外部容器宽度是跟着输入框宽度走的，使用的是width:fit-content这个声明。
查看示例程序 9.5 伪类:placeholder-shown :placeholder-shown { background: red; } 选中占位符为显示状态的元素并设置其背景色为红色。...11.3 逻辑组合伪类:not 负向逻辑组合伪类 :not() 是一个以多个选择器做为参数的函数，匹配不在其参数表中的元素。 目前兼容性较差。...button:not([DISABLED]) { color : red; } 匹配不包含 DISABLED 属性的 button 元素并设置其颜色为红色。...查看示例程序 12.3 相邻兄弟选择器-+ h1 + h2 { color: red; } 匹配 h1 的相邻兄弟元素 h2 并设置其颜色为红色。...查看示例程序 12.4 兄弟选择器-~ h1 ~ h2 { color: red; } 匹配 h1 的后面的同级结点 h2 并设置其颜色为红色。
具体效果：输入框处于聚焦状态时，输入框的占位符内容以动画形式移动到左上角作为标题。借助:placeholder-shown伪类就可以只用CSS实现这种效果。...placeholder="账号"> 账号 首先，让浏览器默认的placeholder效果不可见 .input-control:placeholder-shown...::placeholder { color: transparent; } 第二，使用.input-label元素代替浏览器原声的占位符 .input-box{ position: relative...input-label { position: absolute; left: 16px; top: 14px; pointer-events: none; } 最后，在输入框聚焦以及占位符不显示的时候对...元素进行重定位，效果是缩小并移动到上方 .input-control:not(:placeholder-shown) ~ .input-label, .input-control:focus
选择前第 n 个兄弟#https://tobiasahlin.com/blog/previous-sibling-css-has/#selecting-the-nth-previous-sibling 可以使用相邻同级组合器来选择另一个之前的任何特定元素...我们可以使用两个相邻的同级组合器来选择前第二个同级： .box:has(+ * + .circle) { width: 40px; height: 40px; } 如果您愿意，您可以将选择器的范围等同于一个类...如果你想选择前第三个同级，你可以使用三个相邻的同级组合器...... .box:has(+ * + * + .circle) { width: 40px; height: 40px; }...+您可以根据需要继续添加相邻同级组合器 ( )，以选择任意第 n 个前面的元素。...- except-the-most-adjacent-sibling 最后，我们可以将通用同级组合器 ( ~) 与相邻同级组合器 ( +) 组合起来，并选择除最相邻的元素之外的所有前面的元素： .box
组合选择器 让我们从熟悉的领域开始。组合选择器用于选择后代元素、子元素以及兄弟元素，并且已经存在了很长一段时间。...后代选择器 A B 子元素选择器 A>B 相邻兄弟选择器 A+B 通用兄弟选择器 A~B 相邻兄弟选择器 A+B 你应该很熟悉，选择紧跟在 A 之后的元素 B，但是通用兄弟选择器 A~B 呢？...还有要注意一点是伪类选择器是可以组合使用，例如： :required:invalid。 接下来的两个伪类选择器匹配拥有取值范围（支持 min 和 max 属性）的元素。...最后， :placeholder-shown 匹配占位文字处于显示状态的元素，当输入内容后，占位文字不再显示时，该元素将不会被匹配；应谨慎使用此选择器，因为它尚未得到广泛支持。...::placeholder 匹配表单元素中的占位符文本。 杂项选择器 我们再拿出点时间了解一下那些不属于任何类别的选择器，这其中有部分是实验性的，所以你必须等待一段时间才能在生产中使用。
导航按钮 导航按钮里面那个 icon 是使用纯 CSS 来实现的，相关 SASS 代码如下。...:after { top: 0; transform: rotate(-135deg); } 这里其实就是利用上面介绍到的 checkbox 元素的 :checked 状态，利用 + 选择符，...不能和卡片按钮同级，需要放到外面，但是 CSS 中是 没有父级选择器 的，也就是我们不能和导航那里一样用相邻兄弟选择器之类的选到模态框。 这里用的是另一个 CSS 小技巧。...这里主要是用到 :placeholder-shown 伪类，它在输入框的 placeholder 文字在显示时激活。...总结 这篇文章介绍了如何不使用 JS 的情况下来实现一些交互效果，这里主要是使用的 checkbox 的 :checked 伪类来实现，除此之外还介绍了各种炫酷的 UI 效果的实现思路。
示例： p { height: 50px; line-height: 50px; } 2、组合选择器 |选择器 | 含义 | | -------- |:------------- --...| 匹配E元素之后的相邻的同级元素F| |E~F 普通相邻选择器 | 用匹配E元素之后的同级元素F（无论直接相邻与否） | | .class1.class2 | id和class选择器和选择器连写的时候中间没有分隔符...和 # 本身充当分隔符的元素| |element#id | id和class选择器和选择器连写的时候中间没有分隔符，....或 :nth-of-type(1):nth-last-of-type(1)| | E:empty | 匹配一个不包含任何子元素的元素，文本节点也被看作子元素| | E:not(selector) |...从高到低分别是： 1、在属性后面使用 !
二、选择器类型 基本选择器 组合选择器 属性选择器 伪类选择器 伪元素选择器 三、基本选择器 选择器 含义 作用 CSS .class 类选择器 匹配 class 包含(不是等于)特定类的元素 1 #id...id选择器 匹配特定 id 的元素 1 * 通用元素选择器 匹配页面任何元素（这也就决定了我们很少使用） 2 element 元素选择器 选择HTML元素 1 四、组合选择器 选择器 含义 作用 CSS...匹配E元素之后的相邻的同级元素F 2 E~F 普通相邻选择器（弟弟选择器） 匹配E元素之后的同级元素F（无论直接相邻与否） 3 五、属性选择器 选择器 示例 示例说明 CSS [attribute]...[target] 选择所有带有target属性元素 2 [attribute=value] [target=-blank] 选择所有使用target="-blank"的元素 2 [attribute~...需要使用 content 属性来指定要插入的内容。被插入的内容实际上不在文档树中。 2 ::after/:after 在选被元素后插入内容 其用法和特性与:before相似。
"的元素 属性选择器4 属性名|='属性值' type|="submit" 选择所有type以"submit"开头的元素 备注：某些元素属性有多个值(如class属性)，值表现为以空格隔开，使用时需要单个取出使用...组合选择器 组合选择器就是同时使用多个基础选择器，从而更好地筛选出目标元素 选择器 格式 示例 示例说明 标签指定属性...选择所有父级是\的\元素 后代 元素1 元素2 div p 选择\中的所有\元素 相邻...元素1+元素2 div+p 选择\同级后的相邻\元素 同级 元素1~元素2...div~p 选择\同级后的所有\元素 伪属性选择器 伪属性选择器是指元素在html中实际并不存在该属性，是由css定义的拓展描述属性 选择器
1：在浏览器开发者模式的elements中，Ctrl+F搜索栏输入css表达式方法2：在浏览器开发者模式的console中，按如下格式验证表达式$("css表达式") # 注：表达式中存在引号，则使用单引号...submit"的元素属性选择器4属性名|='属性值' type|="submit" 选择所有type以"submit"开头的元素备注：某些元素属性有多个值(如class属性)，值表现为以空格隔开，使用时需要单个取出使用组合选择器组合选择器就是同时使用多个基础选择器...选择所有父级是\的\元素后代 元素1 元素2 div p 选择\中的所有\元素相邻...元素1+元素2 div+p 选择\同级后的相邻\元素同级 元素1~元素2...div~p 选择\同级后的所有\元素伪属性选择器伪属性选择器是指元素在html中实际并不存在该属性，是由css定义的拓展描述属性选择器
jQuery基础教程之选择器 一、元素选择 1.通配选择符 * Q $("*") 2.标签选择符 div $("div") 3.ID选择符 #id $("#eid") 4.class选择符 .class $(".item") 二、关系选择符 e f 包含选择符(...E F) 所有子集 $(".list .item") 匹配6个 子选择符(E>F) 只有一级子集 $(".list>.item") 匹配3个 相邻选择符(E+F) 只有隔壁的同级 令居 $("....a+.item") 结果为b 兄弟选择符(E~F) 同级都是 $(".a~.item") 结果为b、c 三、属性选择符 E[att] 匹配包含给定属性的元素 <div title="test2
，将其包含在内，原生的复选框默认隐藏，使用 :checked 属性，实现自定义复选框，代码如下（这里只是样式部分，选中部分需要你自行实现）： HTML部分 ...如下图所示： 这里运用了 :not(:placeholder-shown) 两个伪类结合，:placeholder-shown 是专门用于确定元素是否显示占位符的对象，示例代码如下，使用纯 CSS...the label at desired position when the placeholder of input isn't shown */ .container__input:not(:placeholder-shown...justify-content: center; } 7、Radio button group（单选按钮组） 很早以前的 IOS 版本有这样单选按钮组，用来切换和显示页面，示例如下图所示： 这里我们使用...fff; } .container__input { display: none; } 总结 今天的文章就分享到这里，上述大部分组件都用到 :checked 伪类实现了个性化的表单组件，灵活使用
同级相邻元素 .a:hover + .b{color:red}; 3. 同级不相邻元素 .a:hover ~ .b{color:red}; ps: 1. 同级相邻或者不相邻都可以使用 ~； 2....这里的同级指b标签必须在a的后面，若是前面，则不起效果，使用js控制。
本文不细说「选择器」的性能问题，先来对选择器做一个功能性的分类。当然，熟悉全部CSS选择器是玩转CSS的最最最最最基本功。...由于选择器的标准概念上没有作出明确的分类，以下的分类是为了方便记忆进行整理的，仅供参考不喜勿喷。...:focus-visible 输入聚焦的表单元素 4 :blank 输入为空的表单元素 4 :user-invalid 输入合法的表单元素 4 :indeterminate 选项未定的表单元素 4 :placeholder-shown...=val] 属性包含指定值的元素 3 [attr^=val] 属性以指定值开头的元素 3 [attr$=val] 属性以指定值结尾的元素 3 [attr~=val] 属性包含指定值(完整单词)的元素(不推荐使用...) 2 [attr\|=val] 属性以指定值(完整单词)开头的元素(不推荐使用) 2 ❝伪元素 ❞ 选择器 说明 版本 ::before 在元素前插入的内容 2 ::after 在元素后插入的内容
JavaScript中的nextSibling和previousSibling和作用类似于jquery的next()和prev()，都是获取下一个/上一个同胞元素，如果下一个同级节点不存在，则此属性返回值是...但是具体的使用中还是有差异的，如果注意。就会引起错误 html结构中的各种空格，换行符都可能会把文本节点当做同胞元素处理。这就会导致错误。 例如下面代码 <!...); 弹出他的节点类型，如果按常理，元素p下一个相邻的同胞元素为是span,弹出的数字应该为“1”，但我再火狐，谷歌，IE浏览器（网上说只有火狐才会把换行，空格当做文本节点处理，但是我测试谷歌，IE浏览器效果都是一样的...这是因为换行符被当做文本节点来处理，成为了p元素的下一个同胞元素。 如果我要获取我是span的文本值，需要这样写 <!...但坏消息是IE6,7,8不兼容这些属性。IE9以上和火狐谷歌支持。
a">红色 红色 Case-Sensitivity——不区分大小写匹配标识...Case-Sensitivity 用于声明某个匹配规则中，对字符串或者某个 value 的匹配不区分大小写。...值得注意的是，使用 :dir() 匹配元素和使用 [dir=...] 在某个程度上是一样的效果，但是一个区别是 [dir=...]...pseudo-class——:placeholder-shown :placeholder-shown 匹配 placeholder 文字显示时的 元素。...Selectors Level 4 中加入了 :blank，它和 :empty 类似，区别在于 :empty 只能匹配没有任何内容的元素，而 :blank 可以匹配带有 spaces（空格）, tabs（缩进符）
最近，被老大叫写一个kibana的使用方法给所有人用。...注意的一点： 能不用空格表示OR或者AND就不用空格表示，因为要么全用要么全部不用，否则会因为解析搜索同级的时候，若出现空格和OR，会冲突覆盖意义，虽不会报错，但是，得不到自己要的结果。...(7) 区间查询(Range) 区间查询包含两种，一种是包含边界，用[A TO B]指定，一种是不包含边界，用{A TO B}指定。...OR 默认的连接操作符。这意味着如果两个项之间没有布尔操作符，就是使用OR操作符。OR操作符连接两个项，意味着查找含有任意项的文档。这与集合并运算相同。符号||可以代替符号OR。...NOT和- 表示一个查询语句是不能满足的(prohibited), + 表示一个查询语句是必须满足的(required). (10) 组合 可以用括号，将查询语句进行组合，从而设定优先级。
:dir() 并不等于使用 [dir=…] 属性选择器。...这个伪类选择器可以使用在一个可输入的元素或 contenteditable 元素（HTML5 属性）。...:placeholder-shown :placeholder-shown 伪类 在 或 元素显示 placeholder text 时生效。...:blank :blank 伪类选择器 用于匹配如下节点： 没有子节点; 仅有空的文本节点; 仅有空白符的文本节点。 有点类似于:empty，但是比:empty宽松，目前还是没有任何一款浏览器支持。...网格选择器（Grid-Structural Selectors） || || 组合器选择属于某个表格行的节点。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
