遇到问题类

Question

我是新来的CSS，我想我要问一个愚蠢的问题， 在CSS

我写了这首=

input.text, input[type="text"], input.password, input[type="password"], textarea, select { border: 1px solid black; } 

，这我写了事后=

.HTMLWidget-2 input.text, input[type="text"], input.password, input[type="password"], textarea, select .subscribeInput { background-color: grey; } 

和一切都像第二个出来。 谢谢。

Answer 1

你写的是什么基本上等同于：

select { border: 1px solid black; } 

.HTMLWidget-2 input.text, 
select .subscribeInput { background-color: grey; } 

input[type="text"], 
input.password, 
input[type="password"], 
textarea{ 
    border: 1px solid black; 
    background-color: grey 
} 

如果您在.HTMLWidget-2只想投入有它需要在每一个选择的背景，例如：

input.text, 
input[type="text"], 
input.password, 
input[type="password"], 
textarea, 
select { 
    border: 1px solid black; 
} 

.HTMLWidget-2 input.text, 
.HTMLWidget-2 input[type="text"], 
.HTMLWidget-2 input.password, 
.HTMLWidget-2 input[type="password"], 
.HTMLWidget-2 textarea, 
.HTMLWidget-2 select { 
    background-color: grey; 
} 

虽然我回想... IE7（我认为）和IE6不会改变默认的select边框。

Answer 2

这是因为你更重视你的选择。

.HTMLWidget-2 input.text 

比

input.text 

更具体，我建议你看看W3规范 http://www.w3.org/TR/CSS21/cascade.html#specificity