如何设置第一个类为xxx的元素的样式？

如何设置第一个类为xxx的样式？
问题：比如我要设置第一个拥有red的元素的样式，css如何选中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .red:first-child {
    color: red;
    }
  </style>
</head>
<body>
  <div id="test">
    <span >我是span</span>
    <h1 class="red">我是h1，只设置我的样式为红色</h1>
    <h1 class="red">我是h1</h1>
    <h1 class="red">我是h1</h1>
    <h1>我是h1</h1>
</div>
</body>
</html>

html

html5 css3 css

阅读 1.2k

5 个回答

得票最新

3.8k1623

发布于
1 月 22 日江西

更新于
1 月 22 日

document.querySelector('.red').style.color = 'red'

或使用 css

:nth-child(1 of .red) {
  color: red;
}

/** 以及最后一个 */
:nth-last-child(1 of .red) {
  color: blue;
}

兼容性感人：

青衣ay

1227

发布于
1 月 22 日河北

first-child

未签收

83211

发布于
1 月 22 日福建

适用示例的结构，.red前后有其他元素

class:last-of-type {}//最后一个
class:first-of-type {}//第一个

陟上晴明

21.1k124691

发布于
1 月 22 日浙江

<style>
#test .red:nth-of-type(1) { color:red }
// 或者
#test .red { color: red }
#test .red ~ .red { color: inherit }
</style>
<div id="test">
  <span >我是span</span>
  <h1 class="red">我是h1，只设置我的样式为红色</h1>
  <h1 class="red">我是h1</h1>
  <h1 class="red">我是h1</h1>
  <h1>我是h1</h1>
</div>

图片.png