Question

考虑一个html元素

<input type="text" class="name-input" />

样式表有以下css

.name-input {
  //some styles here
}


[type="text"] {
  //other styles here
}

但在输出中它显示元素的两种样式。我试着给#id输入元素，但它仍然是级联的。有人可以解释我只有.name-input样式才能获得元素。提前致谢

Answer 1

选择器具有优先级。

资源：https://developer.mozilla.org/en/docs/Web/CSS/Specificity

id selector的优先级高于class Selector和attribute Selector。优先级class Selector与attribute Selector相同，而其他每个优先级都是高优先级。

使用.name-input {之后的[type="text"]{：

[type="text"] {
  //other styles here
}

.name-input {
  //some styles here
}

执行此操作时，.name-input{会规则覆盖[type="text"]{规则。

[type="text"] {
  background-color: blue;
}

.name-input {
  background-color: red;
}

<input type="text" name="" class="name-input">

如果您使用Id Selector，则放置规则并不重要，因为id具有高优先级。

#myId {
  background-color: green;
}

[type="text"] {
  background-color: blue;
}

.name-input {
  background-color: red;
}

<input id="myId" type="text" name="" class="name-input">

Answer 2

如果所有其他文本框都需要此样式，并且只有此文本框是例外，请使用ID，如下所示

<!DOCTYPE html>
<html>
<Style>
.name-input {
  background-color: #45a049;
}
input[type="text"] {
   width: 100%;
}
#id1{
width: 50%;
}
</Style>
<body >
<input id="id1" type="text" class="name-input" />
</body>
</html>

id1选择器中的

为编写类型选择器提供了所需的一切。

css级联如何在这里工作？

2 个答案: