선택기를 사용하여 CSS에서 요소를 제외하는 방법

CSS는 프론트엔드 개발에서 중요한 기술 중 하나이며, 기본적인 요소 선택과 스타일 수정 외에도 선택과 제외도 CSS에서 매우 중요한 지식 포인트입니다. 이 글에서는 CSS의 선택 제외에 대해 설명하고 참고할 수 있는 실제 사례를 제공합니다.

선택자 소개

선택과 제외를 배우기에 앞서 먼저 CSS 선택자의 기본을 이해해 봅시다.

CSS 선택기는 HTML 요소를 선택하는 데 사용됩니다. CSS에는 기본 선택자, 계층적 선택자, 의사 클래스 선택자 등과 같은 다양한 종류의 선택자가 있습니다. 이러한 선택자는 용도와 구문이 다릅니다.

다음은 여러 유형의 기본 선택기입니다.

• 태그 선택기: HTML 요소의 태그 이름을 통해 선택합니다. 예: p{color:red}
p{color:red}
• 类选择器：通过HTML元素的class属性进行选择，例如：.myclass{color:blue}
• ID选择器：通过HTML元素的ID属性进行选择，例如：#myid{color:green}
• 通配符选择器：选择所有HTML元素，例如：*{color:pink}
• 属性选择器：通过HTML元素的属性值进行选择，例如：[href="http://www.example.com"]{color:purple}

通过以上基本选择器的组合，我们可以精确地选择HTML元素，并通过CSS来修改其样式。

选择排除

有时候我们不仅要选择元素，还需要排除一些元素，这时候选择排除就非常有用了。

CSS中的选择排除有以下几个方法：

• :not伪类
• :first-child伪类
• :last-child伪类
• :only-child伪类

下面我们来依次介绍。

:not伪类

:not伪类用于排除某些元素，通过简单的语法，我们可以在选择器中排除指定的元素。

例如，我们想要选择所有p元素，但排除掉p元素中带有class="no"的元素，可以使用以下语法：

p:not(.no){color:blue}

这样就可以精确地选择到所有p元素，但是排除了带有class="no"的元素，将它们的文本字体颜色修改为了蓝色。

:first-child伪类

:first-child伪类表示选择第一个子元素，同样也可以用于排除某些元素。

例如，我们想要选择所有li元素的第一个子元素a，但排除掉带有class="no"的元素，可以使用以下语法：

li > a:first-child:not(.no){color:blue}

这样就可以精确地选择到所有li元素的第一个子元素a，但是排除了带有class="no"的元素，将它们的文本字体颜色修改为了蓝色。

:last-child伪类

:last-child伪类表示选择最后一个子元素，同样也可以用于排除某些元素。

例如，我们想要选择所有ul元素最后一个子元素li，但排除掉带有class="no"的元素，可以使用以下语法：

ul > li:last-child:not(.no){color:blue}

这样就可以精确地选择到所有ul元素最后一个子元素li，但是排除了带有class="no"的元素，将它们的文本字体颜色修改为了蓝色。

:only-child伪类

:only-child伪类表示选择唯一的子元素，同样也可以用于排除某些元素。

例如，我们想要选择所有div元素，但只选择唯一的子元素p，并排除掉带有class="no"的元素，可以使用以下语法：

div > p:only-child:not(.no){color:blue}

这样就可以精确地选择到所有div元素唯一的子元素p，但是排除了带有class="no"的元素，将它们的文本字体颜色修改为了蓝色。

实际案例

以下提供一个实际案例，来展示如何使用选择排除。

案例描述：有一个动态生成的导航栏菜单，其中有些菜单有下拉菜单，现在需要将所有菜单的字体颜色改为红色，但排除掉有下拉菜单的菜单及其下拉菜单的字体颜色。

HTML代码：

<ul class="menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品中心</a>
    <ul class="submenu">
      <li><a href="#">产品1</a></li>
      <li><a href="#">产品2</a></li>
      <li><a href="#">产品3</a></li>
    </ul>
  </li>
  <li><a href="#">解决方案</a></li>
  <li><a href="#">关于我们</a>
    <ul class="submenu">
      <li><a href="#">公司简介</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </li>
</ul>

CSS代码：

.menu li > a:not(.submenu > li > a){
  color: red;
}

解释：通过:not()伪类，我们可以将带有submenu的li元素及其子元素submenu > li排除在外，而只选择所有li元素子元素a클래스 선택 선택기: HTML 요소의 클래스 속성을 통해 선택합니다. 예: .myclass{color:blue}

ID 선택기: HTML 요소의 ID 속성을 통해 선택합니다. 예: #myid{color:green}

와일드카드 선택기: 모든 HTML 요소를 선택합니다. 예: *{color:pink}

속성 선택기: 통과 HTML 요소의 속성 값을 선택하세요. 예: [href="http://www.example.com"]{color:purple}🎜 위의 기본 선택 브라우저의 조합을 통해 HTML 요소를 정확하게 선택하고 CSS를 통해 스타일을 수정할 수 있습니다. 🎜🎜제외 선택🎜🎜때로는 요소를 선택해야 할 뿐만 아니라 일부 요소를 제외해야 할 때도 있습니다. 이때 제외를 선택하는 것은 매우 유용합니다. 🎜🎜CSS에서 선택을 제외하는 방법에는 여러 가지가 있습니다. 🎜🎜🎜:의사 클래스 아님🎜:first-child 의사 클래스🎜:last-child 의사 클래스🎜: 외동 의사 클래스🎜 차례로 소개하겠습니다. 🎜

:not pseudo-class

🎜:not pseudo-class는 특정 요소를 제외하는 데 사용되며 간단한 구문을 통해 선택기에서 지정된 요소를 제외할 수 있습니다. 🎜🎜예를 들어 모든 p 요소를 선택하고 p 요소에 class="no"가 있는 요소를 제외하려는 경우 다음 구문을 사용할 수 있습니다: 🎜rrreee🎜 이렇게 하면 정확히 모든 p 요소가 선택되지만 class="no"가 있는 요소는 제외되고 텍스트 글꼴 색상이 파란색으로 변경됩니다. 🎜

:first-child 의사 클래스

🎜:first-child 의사 클래스는 첫 번째 하위 요소를 선택하는 것을 의미하며 특정 요소를 제외하는 데 사용될 수도 있습니다. 🎜🎜예를 들어 모든 li 요소 중 첫 번째 하위 요소 a를 선택하고 class="no" 요소가 있는 요소는 제외하려고 합니다. , 다음 구문을 사용할 수 있습니다: 🎜rrreee🎜 이렇게 하면 모든 li 요소의 첫 번째 하위 요소 a를 정확하게 선택할 수 있지만 Class=가 있는 요소는 제외됩니다. "no" 요소인 경우 텍스트 글꼴 색상을 파란색으로 변경하세요. 🎜

:last-child pseudo-class

🎜:last-child pseudo-class는 마지막 하위 요소를 선택하는 것을 의미하며 특정 요소를 제외하는 데에도 사용할 수 있습니다. 🎜🎜예를 들어 모든 ul 요소의 마지막 하위 요소인 li를 선택하고 class="no"가 있는 요소는 제외하려고 합니다. 다음 구문을 사용할 수 있습니다: 🎜rrreee🎜이 방법으로 모든 ul 요소의 마지막 하위 요소 li를 정확하게 선택할 수 있지만 class가 있는 요소는 제외됩니다. =" no" 요소가 있는 경우 텍스트 글꼴 색상을 파란색으로 변경하세요. 🎜

:only-child 의사 클래스

🎜:only-child 의사 클래스는 유일한 하위 요소를 선택하는 것을 의미하며 특정 요소를 제외하는 데에도 사용할 수 있습니다. 🎜🎜예를 들어 모든 div 요소를 선택하고 하위 요소 p만 선택하고 class="no"가 있는 요소는 제외하려고 합니다. code> 요소의 경우 다음 구문을 사용할 수 있습니다. 🎜rrreee🎜 이렇게 하면 모든 div 요소 중 유일한 하위 요소 p를 정확하게 선택할 수 있지만 Class="no" 요소의 경우 텍스트 글꼴 색상을 파란색으로 변경하세요. 🎜🎜실제 사례🎜🎜다음은 선택 제외 사용 방법을 보여주는 실제 사례입니다. 🎜🎜사례 설명: 동적으로 생성된 탐색 모음 메뉴가 있으며 그 중 일부에는 드롭다운 메뉴가 있습니다. 이제 모든 메뉴의 글꼴 색상을 빨간색으로 변경해야 하지만 드롭다운 메뉴가 있는 메뉴와 글꼴은 제외됩니다. 드롭다운 메뉴의 색상입니다. 🎜🎜HTML 코드: 🎜rrreee🎜CSS 코드: 🎜rrreee🎜설명: :not() 의사 클래스를 통해 li하위 메뉴로 변환할 수 있습니다. /code> 요소와 해당 하위 요소 submenu > li는 제외되고 모든 li 요소 하위 요소 a만 선택되며 해당 글꼴도 선택됩니다. 색상은 빨간색으로 변경됩니다. 🎜🎜위 내용은 선택적 배제에 대한 기본 지식과 실제 적용입니다. 실제 개발에서 선택 제외는 HTML 요소를 선택하고 해당 스타일을 보다 효율적으로 수정하는 데 도움이 되는 매우 실용적인 기술입니다. 🎜

위 내용은 선택기를 사용하여 CSS에서 요소를 제외하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!