Question

我是网络开发的新手，我尝试过简单HTML元素的css样式表，当我指定元素名称时，它运行良好：

label {
    color: green;
}

这将应用于所有标签标签，但有没有办法将样式表应用于单个元素？例如：有2个标签，一个是绿色，第二个是蓝色，如何实现？

Answer 1

如果要定位特定元素，请使用元素的id。例如：

#labelId{
    color: green;
}

<label id="labelId">Some Text</label>

或者，您也可以为元素提供特定的类名。例如：

.label-class{
    color: green;
}

<label class="label-class">Some Text</label>

Answer 2

有很多方法可以实现这一目标。有很多css选择器，如ID，类......请参阅css selectors reference

实现您想要的最佳方式是使用classss。见classes

.red {
      color: red;
}
.blue {
      color: blue;
}

<label class="blue">
    I'm blue
</label>
<label class="red">
  I'm red
</label>

Answer 3

你可以做到

    <label name="green">
    label[name=green]{
        color:green;
    }

Answer 4

您可以使用html属性执行此操作：

class，id，data-nameOFData适用于任何HTML元素

.class {
  color: blue
}

#id {
  color: green
}

div[data-test] {
  color: yellow
}

<div class="class">class</div>
<div id="id">id</div>
<div data-test>data</div>

name，type和for input元素

label[for="textInput"] {
  color: aqua
}

input[type="text"] {
  color: brown
}

<label for="textInput">label</label>
<br>
<input type="text" name="textInput" value="name" />

href代表锚点代码，src代表图片

a {
  padding: 10px;
  background-color: deepskyblue
}

a[href*="google"] {
  background-color: yellow
}

<a href="http://www.youtube.com">youtube</a>
<a href="http://www.google.com">google</a>

如果您使用CSS伪选择器:first-child，:nth-child(n)，:last-child，:first-of-type，{{知道他的索引，您也可以选择任何元素而不为其定义任何属性1}}，:nth-of-type(n)，:last-of-type，:nth-of-type(even) MDN，w3Schools。

:nth-child(odd)

div {
  width: 100px;
  height: 50px;
}

div:nth-of-type(even) {
  background-color: cornflowerblue
}

div:nth-child(3) {
  background-color: coral
}

如何将css样式表应用于单个特定元素？

4 个答案: