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

上课有困难

2 个答案: