How to target a group of long similar CSS selector

问题:

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;}

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;}

?

回答1:

Using mozilla Firefox and Webkit based web browsers, you could use :any() pseudo-class to target a group of elements at once.

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 Developer Network

Syntax

:-moz-any( selector[, selector]* )
:-webkit-any( selector[, selector]* )

In this particular case:

/* 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

This is an experimental technology that is in progress to be standardized in CSS Selectors Level 4 under the name :matches().