如何定位一组长的相似的CSS选择器在一行上？ [英] How to target a group of long similar CSS selectors on one line?
问题描述
我目前经常在我的CSS中使用
I am currently often using in my CSS things like
table.form > tbody > tr > td > input[type=text],
table.form > tbody > tr > td > input[type=password],
table.form > tbody > tr > td > textarea ,
table.form > tbody > tr > td > select {width: 300px;}
这是一个正确的方法来做最小的CSS输出尺寸？是否有任何方式将这些元素分组，而不必重复其整个父结构，
Is this a correct way to do it with respect to minimal CSS output size? Is there any way to group those elements without having to reiterate their entire parent structure, something along the lines of
table.form > tbody > tr > td >
(input[type=text],input[type=password],textarea,select) {width: 300px;}
？
推荐答案
使用mozilla Firefox和Webkit的网络浏览器，可以使用 ：any（） pseudo-class
Using mozilla Firefox and Webkit based web browsers, you could use :any() pseudo-class to target a group of elements at once.
：any（）pseudo-class允许你通过建立组，
将包含的任何项目匹配，快速构建类似的
选择器的集合。
The
:any()pseudo-class lets you quickly construct sets of similar selectors by establishing groups from which any of the included items will match. This is an alternative to having to repeat the entire selector for the one item that varies.
选择器。 .mozilla.org / en-US / docs / Web / CSS /：anyrel =nofollow> Mozilla开发人员网络
Mozilla Developer Network
语法
Syntax
:-moz-any( selector[, selector]* )
:-webkit-any( selector[, selector]* )
此特殊情况：
/* For FF 4+ */
table.form > tbody > tr > td > :-moz-any(input[type=text],input[type=password],textarea,select) {width: 300px;}
/* For Chrome 12+, Safari 5.1.3+ */
table.form > tbody > tr > td > :-webkit-any(input[type=text],input[type=password],textarea,select) {width: 300px;}
EXAMPLE HERE
这是一项实验性技术，目前正在进行中 CSS Selectors Level 4 ，名称为：matches（）。
This is an experimental technology that is in progress to be standardized in CSS Selectors Level 4 under the name :matches().
这篇关于如何定位一组长的相似的CSS选择器在一行上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
