代码之家 › 专栏 › 技术社区 › user979331

CSS第一个孩子绝对不行

css html

-5

user979331 · 技术社区 · 6 年前

.form-group:first-child {
  display: none;
}

#form-group:first-child {
  display: none;
}

#my-form #form-group:first-child {
  display: none;
}

#my-form .form-group:first-child {
  display: none;
}

<form id="my-form">
  <div class="form-group" id="form-group">first</div>
  <div class="form-group" id="form-group">second</div>
  <div class="form-group" id="form-group"></div>
  <div class="form-group" id="form-group"></div>
  <div class="form-group" id="form-group"></div>
  <div class="form-group" id="form-group"></div>
  <div class="form-group" id="form-group"></div>
  <div class="form-group" id="form-group"></div>
  <div class="form-group" id="form-group"></div>
  <div class="form-group" id="form-group"></div>
</form>

这些都不管用,我做错什么了?

3 回复 | 直到 6 年前

Paulie_D 6 年前

首先,ID应该是唯一的,但是

#my-form .form-group:first-child {

display: none;
}

…不管怎样都能工作

#my-form .form-group:first-child {
  display: none;
}

<form id="my-form">
  <div class="form-group" id="form-group">1</div>
  <div class="form-group" id="form-group">2</div>
  <div class="form-group" id="form-group">3</div>
  <div class="form-group" id="form-group">4</div>
  <div class="form-group" id="form-group">5</div>
  <div class="form-group" id="form-group">6</div>
  <div class="form-group" id="form-group">7</div>
  <div class="form-group" id="form-group">8</div>
  <div class="form-group" id="form-group">9</div>
  <div class="form-group" id="form-group">10</div>
</form>

searlea 6 年前

所有这些变化都应该起作用。你可能有一个错误 <style> <link> 标记,或者文档加载和引用外部样式表时出现问题。

正确语法示例:

<link rel="stylesheet" href="./styles.css">

或者内联样式表。

<style>
.form-group:first-child {
    display: none;
}

#form-group:first-child {
    display: none;
}

#my-form #form-group:first-child {
    display: none;
}

#my-form .form-group:first-child {
    display: none;
}
</style>

-2

Peter Darmis 6 年前

请检查下面代码片段中的示例。

.form-group:first-child {
color: blue;
}

div[id^=form-group]:nth-child(2) {
color:red;
}
form > div:last-child {
color:magenta;
}
#my-form .form-group:nth-child(9) {
color:cyan;
}
.form-group:first-of-type {
font-size:2rem;
}
.form-group:last-of-type {
font-size:2rem;
}

<!-- 
The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). 
-->
<form id="my-form">
    <div class="form-group" id="form-group1">1</div>
    <div class="form-group" id="form-group2">2</div>
    <div class="form-group" id="form-group3">3</div>
    <div class="form-group" id="form-group4">4</div>
    <div class="form-group" id="form-group5">5</div>
    <div class="form-group" id="form-group6">6</div>
    <div class="form-group" id="form-group7">7</div>
    <div class="form-group" id="form-group8">8</div>
    <div class="form-group" id="form-group9">9</div>
    <div class="form-group" id="form-group10">10</div>
</form>