首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

: not (:placeholder-shown)不使用相邻同级组合符

:not(:placeholder-shown)是CSS伪类选择器,用于选择不为空且未被填充的输入字段。它可以用于验证表单中的输入是否为空。

分类: :not(:placeholder-shown)是CSS伪类选择器,属于CSS选择器的一种。

优势:

  1. 简洁明了:使用:not(:placeholder-shown)可以轻松选择未被填充的输入字段,使得代码更加简洁明了。
  2. 提高用户体验:通过选择未被填充的输入字段,可以对用户进行输入验证,提高用户体验。

应用场景: :not(:placeholder-shown)可以应用于各种表单验证场景,例如:

  1. 必填字段验证:可以通过该选择器选择未填写的必填字段,并提示用户进行填写。
  2. 表单提交验证:在表单提交前,可以使用该选择器选择未填写的字段,并给予用户相应的提示。

推荐的腾讯云相关产品和产品介绍链接地址: 腾讯云提供了丰富的云计算产品和服务,以下是一些与CSS选择器相关的产品和服务:

  1. 云服务器(CVM):提供弹性计算能力,满足各种计算需求。产品介绍链接:https://cloud.tencent.com/product/cvm
  2. 云数据库MySQL版(CDB):提供高性能、可扩展的MySQL数据库服务。产品介绍链接:https://cloud.tencent.com/product/cdb_mysql
  3. 云存储(COS):提供安全、稳定、低成本的对象存储服务。产品介绍链接:https://cloud.tencent.com/product/cos
  4. 人工智能机器翻译(AI翻译):提供高质量的机器翻译服务,支持多种语言。产品介绍链接:https://cloud.tencent.com/product/tmt

请注意,以上链接仅供参考,具体产品选择应根据实际需求进行评估和选择。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CSS快速入门(一)

特征为+加号,这个查找的是同级别下面紧挨着的第一个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 [

94020

又一个布局利器, CSS 伪类 :placeholder-shown

:placeholder-shown vs ::placeholder 我们可以使用:placeholder-shown设置input元素的样式。...这是因为:placeholder-shown仅会针对input本身。对于实际的占位文本,必须使用伪元素::placeholder。...:placeholder-shown vs :empty :placeholder-shown是专门用于确定元素是否显示占位的对象,我们主要使用它来检查input 内容是否为空(假设所有的input都有一个占位...所以我们可以这样说:不要使用:empty检查输入元素是否为空。 如果检查 input 内容是否为空(在没有点位的情况下)? 我们检查输入是否为空的唯一方法是使用:placeholder-shown。...组合其它选择器 我们可以使用:not伪类对某些事物进行逆运算。 在这里,我们可以在输入不是空的情况下进行定位。

2K20
  • 使用 :has() 选择前一个相邻元素

    选择前第 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

    34730

    【CSS】381- 提升你的CSS选择器技巧

    组合选择器 让我们从熟悉的领域开始。组合选择器用于选择后代元素、子元素以及兄弟元素,并且已经存在了很长一段时间。...后代选择器 A B 子元素选择器 A>B 相邻兄弟选择器 A+B 通用兄弟选择器 A~B 相邻兄弟选择器 A+B 你应该很熟悉,选择紧跟在 A 之后的元素 B,但是通用兄弟选择器 A~B 呢?...还有要注意一点是伪类选择器是可以组合使用,例如: :required:invalid。 接下来的两个伪类选择器匹配拥有取值范围(支持 min 和 max 属性)的元素。...最后, :placeholder-shown 匹配占位文字处于显示状态的元素,当输入内容后,占位文字不再显示时,该元素将不会被匹配;应谨慎使用此选择器,因为它尚未得到广泛支持。...::placeholder 匹配表单元素中的占位文本。 杂项选择器 我们再拿出点时间了解一下那些不属于任何类别的选择器,这其中有部分是实验性的,所以你必须等待一段时间才能在生产中使用

    1.1K40

    如何不用一行 JS 代码做一个现代化可交互网站

    导航按钮 导航按钮里面那个 icon 是使用纯 CSS 来实现的,相关 SASS 代码如下。...:after { top: 0; transform: rotate(-135deg); } 这里其实就是利用上面介绍到的 checkbox 元素的 :checked 状态,利用 + 选择,...不能和卡片按钮同级,需要放到外面,但是 CSS 中是 没有父级选择器 的,也就是我们不能和导航那里一样用相邻兄弟选择器之类的选到模态框。 这里用的是另一个 CSS 小技巧。...这里主要是用到 :placeholder-shown 伪类,它在输入框的 placeholder 文字在显示时激活。...总结 这篇文章介绍了如何不使用 JS 的情况下来实现一些交互效果,这里主要是使用的 checkbox 的 :checked 伪类来实现,除此之外还介绍了各种炫酷的 UI 效果的实现思路。

    1.7K10

    前端面试题-CSS选择器

    二、选择器类型 基本选择器 组合选择器 属性选择器 伪类选择器 伪元素选择器 三、基本选择器 选择器 含义 作用 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相似。

    70240

    软件测试|selenium 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定义的拓展描述属性选择器

    72320

    分享 16 个常用的自定义表单组件样式代码片段(上)

    ,将其包含在内,原生的复选框默认隐藏,使用 :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 伪类实现了个性化的表单组件,灵活使用

    1.8K50

    可能是最全最易记的CSS选择器分类大法

    本文细说「选择器」的性能问题,先来对选择器做一个功能性的分类。当然,熟悉全部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 在元素后插入的内容

    83140

    jquery nextsibling_javascript中预编译

    JavaScript中的nextSibling和previousSibling和作用类似于jquery的next()和prev(),都是获取下一个/上一个同胞元素,如果下一个同级节点不存在,则此属性返回值是...但是具体的使用中还是有差异的,如果注意。就会引起错误 html结构中的各种空格,换行都可能会把文本节点当做同胞元素处理。这就会导致错误。 例如下面代码 <!...); 弹出他的节点类型,如果按常理,元素p下一个相邻的同胞元素为是span,弹出的数字应该为“1”,但我再火狐,谷歌,IE浏览器(网上说只有火狐才会把换行,空格当做文本节点处理,但是我测试谷歌,IE浏览器效果都是一样的...这是因为换行被当做文本节点来处理,成为了p元素的下一个同胞元素。 如果我要获取我是span的文本值,需要这样写 <!...但坏消息是IE6,7,8兼容这些属性。IE9以上和火狐谷歌支持。

    58820
    领券