我正在尝试设置禁用输入的样式。我可以使用:
.myInput[disabled] { }
或
.myInput:disabled { }
属性选择器是现代的CSS3方式和前进的方向吗?我曾经使用伪类,但是我找不到任何信息来说明它们是不是老方法,不会被支持,或者它们是否都是相等的,你可以使用你最喜欢的任何东西。
我不需要支持较旧的浏览器(它是一个内部网应用程序),所以它是:
发布于 2013-11-22 22:12:39
是属性选择器现代CSS3的方式和前进的方向?
不是的;实际上,属性选择器从CSS2开始就存在了,而disabled
属性本身从HTML 4开始就存在了。据我所知,:disabled
伪类是在Selectors 3中引入的,这使得伪类更新。
是有技术原因的
是的,在某种程度上。
有了属性选择器,您就可以知道您正在设计样式的文档利用disabled
属性来指示禁用的字段。理论上,如果你的样式不是超文本标记语言,禁用的字段可能不会使用disabled
属性来表示,例如,它可能是enabled="false"
或类似的东西。即使是未来版本的超文本标记语言也可能引入新的元素,这些元素使用不同的属性来表示启用/禁用状态;这些元素不会与[disabled]
属性选择器匹配。
:disabled
伪类将选择器与您正在处理的文档解耦。该规范简单地声明它以被禁用的元素为目标,并且元素是否被启用、禁用或两者都不是,都是defined by the document language instead
构成启用状态、禁用状态和用户界面元素的内容与语言相关。在一个典型的文档中,大多数元素既不是
:enabled
也不是:disabled
。
换句话说,当您使用伪类时,UA会根据您设计的样式自动确定要匹配哪些元素,因此您不必告诉它如何匹配。相反,属性选择器将匹配任何具有disabled
属性的元素,而不管该元素实际上是否支持启用或禁用该元素,例如div
。如果您正在使用依赖于这种非标准行为的众多现代框架中的一个,那么使用属性选择器可能会更好。
就DOM而言,我认为在DOM元素上设置disabled
属性也会修改该元素的disabled
属性,这意味着使用DOM操作在这两个选择器之间没有区别。我不确定这是否依赖于浏览器,但在所有主要浏览器的最新版本中演示了它的here's a fiddle:
// The following statement removes the disabled attribute from the first input
document.querySelector('input:first-child').disabled = false;
您最有可能设置的是HTML样式,所以这些都不会对您造成任何影响,但是如果浏览器兼容性不是问题,我会选择:enabled
和:disabled
,而不是:not([disabled])
和[disabled]
,因为伪类包含属性选择器没有的语义。我就是那样的纯粹主义者。
发布于 2015-01-31 17:05:00
事实证明,Internet Explorer10和11无法识别某些元素上的:disabled
伪类,只能与属性选择器语法配合使用。
#test1:disabled { color: graytext; }
#test2[disabled] { color: graytext; }
<form>
<fieldset id="test1" disabled>:disabled</fieldset>
<fieldset id="test2" disabled>[disabled]</fieldset>
</form>
上面截取的代码在IE中呈现如下:
只要您只设计input
元素的样式,这两种方法都应该没问题。不过,在您希望支持的所有浏览器中测试最终结果仍然是一个很好的建议。
发布于 2020-10-05 14:00:01
显然,您只能使用“:(伪类)”/“::”禁用选择和样式输入元素,但其他元素,如DIVs,必须使用disabled。
在编写SCSS / SASS并尝试选择一个禁用的元素时,我经常遇到这个问题。
https://stackoverflow.com/questions/20141450
复制相似问题