CSS를 사용하여 요소의 모든 하위 요소(마지막 요소 제외)를 선택하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS를 사용하여 요소의 모든 하위 요소(마지막 요소 제외)를 선택하는 방법은 무엇입니까?

PHPz

Sep 16, 2023 am 08:45 AM

如何使用 CSS 选择元素的所有子元素（除了最后一个子元素）？

CSS는 일반적으로 사용되는 웹페이지 스타일입니다. 웹 애플리케이션을 개발할 때 때로는 요소마다 서로 다른 스타일을 적용해야 하는 경우가 있습니다. 이 일반적인 요구 사항은 마지막 요소를 제외한 요소의 모든 하위 요소를 선택하는 것입니다! CSS를 적용하여 요소의 모든 하위 요소를 선택합니다(마지막 하위 요소 제외).

이 글에서는 다양한 방법을 사용하여 CSS의 마지막 하위 요소를 제외한 모든 요소를 선택하는 방법을 알아봅니다. 작동 방식을 이해하는 데 도움이 되는 예제와 함께 각 방법과 해당 구문을 자세히 설명하겠습니다.

마지막 요소를 제외한 모든 하위 요소를 선택하는 첫 번째 방법은 :not() 선택기를 사용하는 것입니다. 이 선택기를 사용하면 특정 선택기와 일치하지 않는 모든 요소를 선택할 수 있습니다. 두 번째 방법은 :nth-last-child() 선택기를 사용하는 것입니다. 이 선택기는 상위 요소 끝에서 n번째 하위 요소를 모두 선택합니다. 이 방법에서는 요소의 모든 하위 요소(HTML의 마지막 하위 요소 제외)를 선택하는 데 도움이 되는 n+2 매개변수를 지정합니다.

이 두 방법 모두 웹 애플리케이션을 개발할 때 매우 유용하며 웹 페이지에 필요한 UI를 구현하는 데 도움이 될 수 있습니다. 위에서 설명한 선택기를 사용하면 이러한 선택기의 작동 방식을 이해하는 데 도움이 되며 웹 페이지의 기능 및 UI에 대한 사용자 정의 스타일을 만들 수 있습니다.

방법 1: 선택기 아님 :사용

- not 선택기는 특정 조건과 일치하는 요소를 제외한 모든 요소를 선택할 수 있는 강력한 CSS 선택기입니다. 마지막 요소를 제외한 모든 하위 요소를 선택하려면 :last-child 선택기와 함께 :not 선택기를 사용할 수 있습니다.

- not() 선택기를 사용하여 요소의 모든 자식(마지막 자식 제외)을 선택하려면 :last-child 선택기와 함께 사용합니다. :last-child 선택자는 요소의 마지막 하위 요소를 선택하는 데 도움이 됩니다. 두 개의 선택기와 이 접근 방식을 조합하여 사용하면 마지막 요소를 제외한 요소의 모든 하위 항목을 선택할 수 있습니다.

다음은 :not() 선택기를 사용하여 상위 요소의 모든 하위 요소를 선택하는 방법에 대한 구문입니다(마지막 하위 요소 제외) -

문법

아래 구문에서 .parent는 상위 요소의 선택자이고, >는 모든 직계 하위 요소를 선택하고, *는 모든 하위 요소를 선택하고, :not(:last-child)는 선택에서 마지막 하위 요소를 제외합니다.

으아악

예

이 예에서 CSS 선택기 .parent > *:not(:last-child)는 .parent 클래스 요소(예: h1, h2, p 및span 요소)의 모든 직계 하위 요소를 선택합니다. 단, 마지막 하위 요소는 제외됩니다. 요소. CSS를 사용하여 .parent 요소의 처음 세 하위 요소(예: h1, h2 및 p 요소)에 "색상" 속성을 적용하지만 네 번째 하위 요소(예: 요소)는 영향을 받지 않습니다. 跨度>跨度>

이제 HTML 페이지의 코드에 CSS 코드를 적용하는 방법을 살펴보겠습니다 -

으아악

방법 2: :nth-last-child() 선택기 사용

- nth-last-child() 선택기는 요소의 하위 목록에서의 위치에 따라 요소를 선택할 수 있는 CSS의 또 다른 유용한 도구입니다. :nth-last-child(n+2)를 사용하여 마지막 자식을 제외한 모든 자식을 선택함으로써 이를 사용하여 마지막 자식을 제외한 모든 자식을 선택할 수 있습니다.

:nth-last-child() 선택기를 사용하여 마지막 하위 요소를 제외한 모든 하위 요소를 선택하려면 n+2 매개변수를 지정할 수 있습니다. 정의된 매개변수는 CSS를 사용하여 마지막 하위 요소인 마지막 하위 요소를 제외한 HTML의 모든 요소를 선택합니다.

다음은 :nth-last-child() 선택기를 사용하여 상위 요소의 모든 하위 요소를 선택하는 방법에 대한 구문입니다(마지막 하위 요소 제외) -

문법

다음 구문에서 .parent는 상위 요소의 선택자입니다. > 모든 직계 하위 요소를 선택하고, *는 모든 하위 요소를 선택하고, :nth-last-child(n+2)는 마지막 요소를 제외한 모든 하위 요소를 선택합니다. Elemental children .

으아악

예

이 예에서 CSS 선택기 .parent > *:nth-last-child(n+2)는 마지막 자식을 제외하고 .parent 클래스 요소의 모든 직계 자식을 선택합니다. 여기서는 .parent 요소 내의 모든 버튼 요소가 선택되지만 마지막 버튼 요소는 선택되지 않습니다.

처음 3개 버튼에는 여러 CSS 속성이 적용되었지만 마지막 하위 버튼에는 CSS 스타일이 추가되지 않았습니다.

이제 HTML 페이지의 코드에 CSS 코드를 적용하는 방법을 살펴보겠습니다 -

<!DOCTYPE html>
<html >
   <head>
      <style>
         .parent > *:nth-last-child(n+2) {
            background-color: green;
            padding: 10px;
            color: white;
            border-radius: 10px;
            width: 10em;
            text-decoration: none;
            font-family: sans-serif;
            border: none;
         }
      </style>
   </head>
   <body>
      <div class="parent">
      <button>First</button>
      <button>Second</button>
      <button>Third</button>
      <button>Fourth</button>
   </div>
   </body>
</html>

结论

在本文中，我们了解了如何使用不同的方法选择元素的所有子元素（除了最后一个子元素）。在 CSS 选择器的帮助下，选择子项是一个轻松的过程，因为它提供了多个可用于执行此任务的选择器，例如 :not() 选择器和 :nth-last-child() 选择器。上面讨论的两个示例都展示了 CSS 在将不同样式应用于元素的所有子元素（最后一个元素除外）方面的作用。这两个选择器都可以帮助我们轻松地将不同的 CSS 样式应用于不同的 HTML 元素，不仅如此，它还有助于轻松创建动态网站。

위 내용은 CSS를 사용하여 요소의 모든 하위 요소(마지막 요소 제외)를 선택하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

이 기사는 tutorialspoint에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

관련 기사