我应该使用CSS:禁用伪类还是[禁用]属性选择器还是意见问题？
Pet*_*ter 60 css css-selectors pseudo-class css3 disabled-input
我正在尝试设置禁用的输入.我可以用:
.myInput[disabled] { }
要么
.myInput:disabled { }
属性选择器是现代CSS3方式和前进的方式吗？我曾经使用伪类,但是我找不到任何关于它们是否旧的方式并且不会被支持的信息,或者它们是否相等而且你可以使用你最喜欢的任何东西.
我不需要支持旧的浏览器(它是一个内部网应用程序),所以它是:
- 属性更新更好
- 伪班仍然是要走的路
- 无论你最喜欢哪一个
- 有一个技术原因使用一个而不是另一个
Bol*_*ock 67
属性选择器是现代CSS3方式和前进的方式吗？
- 属性更新更好
没有; 实际上,自CSS2以来,属性选择器disabled一直存在,并且属性本身自HTML 4以来就存在.据我所知,:disabled伪类是在Selectors 3中引入的,它使伪类更新.
- 有一个技术原因使用一个而不是另一个
是的,在某种程度上.
使用属性选择器,您依赖于您正在构造的文档使用disabled属性来指示禁用字段的知识.从理论上讲,如果你设计的不是HTML的东西,禁用的字段可能不会使用disabled属性来表示,例如它可能是enabled="false"或类似的东西.即使将来的HTML版本也可能引入新元素,这些元素利用不同的属性来表示启用/禁用状态; 这些元素与[disabled]属性选择器不匹配.
该:disabled伪类解耦您正在使用的文件的选择.规范只是声明它定位被禁用的元素,并且元素是启用,禁用还是两者都不是由文档语言定义的:
构成启用状态,禁用状态和用户界面元素的内容取决于语言.在典型的文件中,大多数元素既不是
:enabled也不是:disabled.
换句话说,当您使用伪类时,UA会根据您正在构造的文档自动确定要匹配的元素,因此您不必告诉它如何.
就DOM而言,我认为disabled在DOM元素上设置属性也会修改HTML元素的disabled属性,这意味着两个选择器与DOM操作之间没有区别.我不确定这是否依赖于浏览器,但这是一个在所有主流浏览器的最新版本中演示它的小提琴:
// The following statement removes the disabled attribute from the first input
document.querySelector('input:first-child').disabled = false;
你最有可能会被造型HTML,所以没有这种可能作出的任何区别给你,但如果浏览器的兼容性不是一个问题,我会选择:enabled,并:disabled在:not([disabled])和[disabled]简单,因为伪类携带语义属性选择呢不.我是那样的纯粹主义者.
- 还应考虑禁用属性对HTML fieldset元素的影响.在FF和Chrome(但不是IE)中,将应用后代控件的禁用*状态*(由`:disabled`反映),但内容属性既不存在也不IDL属性(属性)为真.见http://jsfiddle.net/UH2S4/12/ (3认同)
GOT*_*O 0 15
事实证明,Internet Explorer 10和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元素,你应该没办法.在您希望支持的所有浏览器中测试最终结果仍然是一个很好的建议.
- 这在你的例子中并不重要,但像`disabled`这样的属性意味着取名字,空字符串或什么都没有,甚至没有`=`.在这里,你可以把`disabled ="禁用"`或者只是'禁用',而不是把`disabled ="true"`.这可能是IE失败的原因,尽管我对此表示怀疑. (3认同)
显然，您只能使用 ":(pseudoclass)" / ":disabled"选择和设置输入元素的样式，但其他元素，例如 DIV，必须改为使用 [disabled]。
我在编写 SCSS / SASS 并尝试选择禁用元素时经常遇到这个问题。
请参阅 禁用元素的 CSS 选择器