因此, input:not(:empty) 永远不会匹配正确 HTML 文档中的任何内容。 (它仍然可以在定义了一个可以接受文本或子元素的 <input> 元素的假设 XML 文档中工作。) 我不认为您可以仅使用 CSS 动态地设置空 <input> 字段的样式(即,只要字段为空就适用的规则,一旦输入文本就不会)。如果它们有一个空的 value 属性...
:placeholder-shown是专门用于确定元素是否显示占位符的对象,我们主要使用它来检查input内容是否为空(假设所有的input都有一个占位符)。 这里你可能会想,使用empty也是可以的吧?我们来看看。 代码语言:javascript 代码运行次数:0 运行 AI代码解释 // html<input value="not empty"><input><!--empty-->// cssin...
当我们想要根据元素内部是否有内容来显示特定的样式时 我们可以使用:not 与:empty结合来实现这个效果 代码如下 代码语言:javascript 代码运行次数:0 .handle_menu_content:not(:empty){width:90px;position:fixed;z-index:999999;top:0;z-index:9999999;left:38px;background:#fff;border-radius:3px;border:1px s...
属性选择器可以根据属性名和属性值进行选择。 如下代码,input[type="text"]选择器将选择所有type属性为"text"的 <input> 元素。 input[type="text"]{border:1pxsolid gray;} 后代选择器(Descendant Selector):通过指定元素的后代关系选择 HTML 元素。 后代选择器使用空格分隔元素名称。 如下代码,div p 选择器将...
选择空元素: 使用 :empty 伪类可以选择没有任何子代的元素。 它是CSS唯一 一个匹配时考虑文本节点的选择符。 你也许想使用它匹配所有空元素,但是这里有一个陷阱,那就是 :empty 是匹配 HTML 文档中的空元素,例如 img 和 input , 但是还能匹配里面没有内容的 textarea 。就匹配效果而言,img 和 img:empty 其实...
1 p:empty {display: none;} 3.3 否定伪类 否定选择器和jq中的:not选择器一模一样,就拿form中的元素来说明这个选择器的用法,比如你想对form中所有input加边框,但又不想submit也起变化,此时就可以使用:not为实现: 1 input:not([type="submit"]) {border: 1px solid red;} 3.4 状态伪类 状态伪类主要针...
:empty p:empty 选择没有子元素的每个 <p> 元素。 :enabled input:enabled 选择每个已启用的 <input> 元素。 :first-child p:first-child 选择作为其父的首个子元素的每个 <p> 元素。 :first-of-type p:first-of-type 选择作为其父的首个 <p> 元素的每个 <p> 元素。 :focus input:focus 选择获得焦...
:not()表示否定选择器,及排除或者过滤掉特定的元素。 <style> input:not([type="submit"]){ border: 1px solid red; } </style> <div id="header"> <label> 邮箱: <input type="email"/> <br> 用户: <input type="text"/> <br> 密码: <input type="password"/> <br> <input type="submit...
当input元素具有required属性时,可以使用:required伪类选择它们。 :optional 伪类 :optional伪类用于选择没有required属性的输入元素,这意味着它们不是必填项。 当input元素没有 required 属性时,可以使用:optional伪类选择它们。 :first-child 伪类 :first-child伪类用于选择父元素中的第一个子元素。
您可以使用:placeholder-shown伪类。从技术上讲，需要占位符，但您可以使用空格。input:not(:placeholder-...