Hướng dẫn how do you add css to not your first child? - Làm thế nào để bạn thêm css để không phải là đứa con đầu tiên của bạn?

Question

Khi tôi đã sử dụng

div ul + ul {
  background-color: #900;
}

1 là một giải pháp hoàn hảo.

Nội dung chính Show

Ví dụ cơ bản
Tạo kiểu một danh sách
Tạo kiểu một danh sách
Bộ chọn cấp độ 4 #-con đầu tiên PSEUDO
Bảng BCD chỉ tải trong trình duyệt
Làm thế nào để tôi không bao gồm đứa con đầu lòng của tôi trong CSS?
Làm thế nào để tôi đề cập đến đứa trẻ thứ hai trong CSS?
Làm cách nào để áp dụng CSS cho mỗi đứa trẻ thứ ba?
Làm cách nào để sử dụng CSS với đứa con đầu lòng?

div ul:not(:first-child) {
    background-color: #900;
}

Tại sao điều này là hoàn hảo vì bằng cách sử dụng

div ul + ul {
  background-color: #900;
}

1, chúng ta có thể áp dụng CSS trên các yếu tố bên trong. Như thẻ

div ul + ul {
  background-color: #900;
}

3, v.v.

Nhưng khi sử dụng các giải pháp khác:

div ul + ul {
  background-color: #900;
}

và

div li~li {
    color: red;
}

và

ul:not(:first-of-type) {}

và

div ul:nth-child(n+2) {
    background-color: #900;
}

và

Những điều này chỉ hạn chế CSS cấp UL. Giả sử chúng ta không thể áp dụng CSS trên

div ul + ul {
  background-color: #900;
}

4 là `Div ul + ul li '.

div ul:not(:first-child) li{
        background-color: #900;
    }

Đối với các yếu tố cấp độ bên trong, giải pháp đầu tiên hoạt động hoàn hảo.

Các lớp giả CSS

div ul + ul {
  background-color: #900;
}

5 đại diện cho yếu tố đầu tiên trong số một nhóm các yếu tố anh chị em.
div ul + ul { background-color: #900; }
5 CSS pseudo-class represents the first element among a group of sibling elements.

Thử nó

Cú pháp

Ví dụ

Ví dụ cơ bản

HTML

<div>
  <p>This text is selected!</p>
  <p>This text isn't selected.</p>
</div>

<div>
  <h2>This text isn't selected: it's not a `p`.</h2>
  <p>This text isn't selected.</p>
</div>

CSS

p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

Kết quả

Tạo kiểu một danh sách

HTML

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ul>
  </li>
</ul>

CSS

ul li {
  color: blue;
}

ul li:first-child {
  color: red;
  font-weight: bold;
}

Kết quả

Tạo kiểu một danh sách

Thông số kỹ thuật
Sự chỉ rõ # first-child-pseudo

Bộ chọn cấp độ 4 #-con đầu tiên PSEUDO

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt

Xem thảo luận

Cải thiện bài viết

Lưu bài viết

Đọc

Bàn luận

Xem thảo luận

Cải thiện bài viết

Lưu bài viết

Đọc

Syntax:

div ul + ul {
  background-color: #900;
}

0

Example:

div ul + ul {
  background-color: #900;
}

6

div ul + ul {
  background-color: #900;
}

7

div ul + ul {
  background-color: #900;
}

8

div ul + ul {
  background-color: #900;
}

9

div li~li {
    color: red;
}

0

div ul + ul {
  background-color: #900;
}

7

div li~li {
    color: red;
}

2

div ul + ul {
  background-color: #900;
}

9

div li~li {
    color: red;
}

4

div ul + ul {
  background-color: #900;
}

7

div li~li {
    color: red;
}

6

div li~li {
    color: red;
}

7

div li~li {
    color: red;
}

6

div ul + ul {
  background-color: #900;
}

9

div li~li {
    color: red;
}

4

div ul + ul {
  background-color: #900;
}

7

ul:not(:first-of-type) {}

2

div ul + ul {
  background-color: #900;
}

9

ul:not(:first-of-type) {}

4

ul:not(:first-of-type) {}

5

ul:not(:first-of-type) {}

4

ul:not(:first-of-type) {}

7

ul:not(:first-of-type) {}

4

ul:not(:first-of-type) {}

9

ul:not(:first-of-type) {}

4

div ul:nth-child(n+2) {
    background-color: #900;
}

1

div ul:nth-child(n+2) {
    background-color: #900;
}

2

div ul:nth-child(n+2) {
    background-color: #900;
}

3

div ul:nth-child(n+2) {
    background-color: #900;
}

2

div ul:nth-child(n+2) {
    background-color: #900;
}

5

div ul:nth-child(n+2) {
    background-color: #900;
}

2

div ul:nth-child(n+2) {
    background-color: #900;
}

7

div ul:nth-child(n+2) {
    background-color: #900;
}

2

div ul:nth-child(n+2) {
    background-color: #900;
}

9

Bàn luận

div ul:nth-child(n+2) {
    background-color: #900;
}

2

div ul:not(:first-child) li{
        background-color: #900;
    }

3

ul:not(:first-of-type) {}

4

ul:not(:first-of-type) {}

9

ul:not(:first-of-type) {}

4

div ul:not(:first-child) li{
        background-color: #900;
    }

7

div ul:nth-child(n+2) {
    background-color: #900;
}

2

div ul:not(:first-child) li{
        background-color: #900;
    }

9

ul:not(:first-of-type) {}

4

ul:not(:first-of-type) {}

9

div li~li {
    color: red;
}

4

<div>
  <p>This text is selected!</p>
  <p>This text isn't selected.</p>
</div>

<div>
  <h2>This text isn't selected: it's not a `p`.</h2>
  <p>This text isn't selected.</p>
</div>

3

ul:not(:first-of-type) {}

2

div ul + ul {
  background-color: #900;
}

9

div li~li {
    color: red;
}

0

<div>
  <p>This text is selected!</p>
  <p>This text isn't selected.</p>
</div>

<div>
  <h2>This text isn't selected: it's not a `p`.</h2>
  <p>This text isn't selected.</p>
</div>

3

div li~li {
    color: red;
}

2

div ul + ul {
  background-color: #900;
}

9

div li~li {
    color: red;
}

0

div ul + ul {
  background-color: #900;
}

7

p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

2

div ul + ul {
  background-color: #900;
}

9

div li~li {
    color: red;
}

4

div ul + ul {
  background-color: #900;
}

7

p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

6

p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

7

p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

6

div ul + ul {
  background-color: #900;
}

9

div li~li {
    color: red;
}

4

div ul + ul {
  background-color: #900;
}

7

p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

6

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ul>
  </li>
</ul>

3

p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

6

div ul + ul {
  background-color: #900;
}

9

div li~li {
    color: red;
}

4

div ul + ul {
  background-color: #900;
}

7

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ul>
  </li>
</ul>

8

div ul + ul {
  background-color: #900;
}

9

Bộ chọn này được sử dụng để chọn mọi yếu tố không phải là con đầu tiên của phần tử cha. Nó được biểu diễn như một đối số dưới dạng: không phải phần tử (đầu tiên).

div ul:nth-child(n+2) {
    background-color: #900;
}

2

div ul:not(:first-child) li{
        background-color: #900;
    }

1

div ul:nth-child(n+2) {
    background-color: #900;
}

2

div ul + ul {
  background-color: #900;
}

7

div ul + ul {
  background-color: #900;
}

4

div ul + ul {
  background-color: #900;
}

06

div ul + ul {
  background-color: #900;
}

4

div ul + ul {
  background-color: #900;
}

9

div ul:nth-child(n+2) {
    background-color: #900;
}

2

div ul + ul {
  background-color: #900;
}

7

div ul + ul {
  background-color: #900;
}

4

div ul + ul {
  background-color: #900;
}

12

div ul + ul {
  background-color: #900;
}

4

div ul + ul {
  background-color: #900;
}

9

ul:not(:first-of-type) {}

4

<div>
  <p>This text is selected!</p>
  <p>This text isn't selected.</p>
</div>

<div>
  <h2>This text isn't selected: it's not a `p`.</h2>
  <p>This text isn't selected.</p>
</div>

3

ul li {
  color: blue;
}

ul li:first-child {
  color: red;
  font-weight: bold;
}

2

div ul + ul {
  background-color: #900;
}

9

ul:not(:first-of-type) {}

4

div ul + ul {
  background-color: #900;
}

7

ul li {
  color: blue;
}

ul li:first-child {
  color: red;
  font-weight: bold;
}

2

div ul + ul {
  background-color: #900;
}

9

div ul:nth-child(n+2) {
    background-color: #900;
}

2

div ul + ul {
  background-color: #900;
}

7

div ul + ul {
  background-color: #900;
}

4

div ul + ul {
  background-color: #900;
}

26

div ul + ul {
  background-color: #900;
}

4

div ul + ul {
  background-color: #900;
}

9

div ul:nth-child(n+2) {
    background-color: #900;
}

2

div ul + ul {
  background-color: #900;
}

7

div ul + ul {
  background-color: #900;
}

4

div ul + ul {
  background-color: #900;
}

32

div ul + ul {
  background-color: #900;
}

4

div ul + ul {
  background-color: #900;
}

9

div ul:nth-child(n+2) {
    background-color: #900;
}

2

div ul + ul {
  background-color: #900;
}

7

div ul + ul {
  background-color: #900;
}

4

div ul + ul {
  background-color: #900;
}

38

div ul + ul {
  background-color: #900;
}

4

div ul + ul {
  background-color: #900;
}

9

ul:not(:first-of-type) {}

4

<div>
  <p>This text is selected!</p>
  <p>This text isn't selected.</p>
</div>

<div>
  <h2>This text isn't selected: it's not a `p`.</h2>
  <p>This text isn't selected.</p>
</div>

3

ul li {
  color: blue;
}

ul li:first-child {
  color: red;
  font-weight: bold;
}

2

div ul + ul {
  background-color: #900;
}

9

div li~li {
    color: red;
}

4

<div>
  <p>This text is selected!</p>
  <p>This text isn't selected.</p>
</div>

<div>
  <h2>This text isn't selected: it's not a `p`.</h2>
  <p>This text isn't selected.</p>
</div>

3

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ul>
  </li>
</ul>

8

div ul + ul {
  background-color: #900;
}

9

div li~li {
    color: red;
}

0

<div>
  <p>This text is selected!</p>
  <p>This text isn't selected.</p>
</div>

<div>
  <h2>This text isn't selected: it's not a `p`.</h2>
  <p>This text isn't selected.</p>
</div>

3

p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

2

div ul + ul {
  background-color: #900;
}

9

ul:not(:first-of-type) {}

4

div ul + ul {
  background-color: #900;
}

7

ul li {
  color: blue;
}

ul li:first-child {
  color: red;
  font-weight: bold;
}

2

ul:not(:first-of-type) {}

2

ul li {
  color: blue;
}

ul li:first-child {
  color: red;
  font-weight: bold;
}

4__95

div ul:nth-child(n+2) {
    background-color: #900;
}

2
div ul + ul { background-color: #900; }
7
div ul + ul { background-color: #900; }
4
div ul + ul { background-color: #900; }
00____
div ul + ul { background-color: #900; }
4
div ul + ul { background-color: #900; }
9

Explanation: The above example shows that a

is a container Tag. It contains

tag except its first-child.

<div>
  <p>This text is selected!</p>
  <p>This text isn't selected.</p>
</div>

<div>
  <h2>This text isn't selected: it's not a `p`.</h2>
  <p>This text isn't selected.</p>
</div>

3
div ul + ul { background-color: #900; }
8
div ul + ul { background-color: #900; }
55 The browser supported by :not:(first-child) selectors are listed below:

Apple Safari 3.1
Google Chrome 4.0
Firefox 3.0
Opera 9.6
Internet Explorer 7.0

Làm thế nào để tôi không bao gồm đứa con đầu lòng của tôi trong CSS?

Bộ chọn này được sử dụng để chọn mọi yếu tố không phải là con đầu tiên của phần tử cha.Nó được biểu diễn như một đối số dưới dạng: không phải phần tử (đầu tiên).Giải thích: Ví dụ trên cho thấy A là thẻ container.:not(first-child) element. Explanation: The above example shows that a

is a container Tag.

Làm thế nào để tôi đề cập đến đứa trẻ thứ hai trong CSS?

Bất kể,: nth-of-type là cách đúng đắn để làm điều đó.Nếu bạn có một mỗi, thì bạn có thể muốn nói.container li: nth-of-type (2) a.Lưu câu trả lời này.

Làm cách nào để áp dụng CSS cho mỗi đứa trẻ thứ ba?

Có, bạn có thể sử dụng những gì được gọi là: Bộ chọn Nth-Child.Trong trường hợp này, bạn sẽ sử dụng: li: nth-child (3n) {// kiểu dáng cho mỗi yếu tố thứ ba ở đây.}li:nth-child(3n) { // Styling for every third element here. }

Làm cách nào để sử dụng CSS với đứa con đầu lòng?

Các: CSS Pseudo-Class duy nhất đại diện cho một yếu tố không có anh chị em.Điều này giống như: First-Child: Last-Chill hoặc: Nth-Child (1): Nth-Last-Child (1), nhưng với độ đặc hiệu thấp hơn.first-child:last-child or :nth-child(1):nth-last-child(1) , but with a lower specificity.