CSS에는 여러 가지 파생 선택기가 있습니다.

CSS에는 세 가지 유형의 파생 선택기가 있습니다: 1. 하위 선택기, 구문 "E F{스타일 코드}" 2. 하위 요소 선택기, 구문 "E > F {스타일 코드}"; 구문 "E + F {스타일 코드}".

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS 파생 선택자(컨텍스트 선택자)

선택자(선택자)는 CSS 지식에서 매우 중요한 부분입니다.

제가 간단히 이해한 바에 따르면 CSS는 HTML 코드의 요소에 다양한 스타일을 적용하는 것입니다.

그래서 첫 번째 단계는 스타일을 지정하려는 요소를 정확하게 찾는 것입니다.

CSS는 다양한 선택기를 사용하여 요소를 배치합니다. CSS에는 다양한 종류의 선택자가 있습니다. 오늘은 "파생 선택자"에 대해 이야기하고 싶습니다.

"파생 선택자"라는 이름을 들었을 때 어떤 종류의 선택자인지 정말 이해가 되지 않았습니다. 얼핏 보면 영어 이름은 "contextual selectors"인데, 직역하면 "contextual selector"라고 합니다. 이름이 우아하지는 않지만 나는 이 이름을 더 좋아한다.

컨텍스트 선택기는 해당 위치에 있는 요소의 컨텍스트 관계를 기반으로 스타일을 정의합니다.

컨텍스트 선택자에는 하위 선택자, 하위 요소 선택자, 인접 형제 선택자의 세 가지 유형이 있습니다.

descendant selector

eg:

HTML 코드:

    <h1>This is a<em>important</em>heading</h1>

CSS 코드:

    h1 em {color:red;}

구문 규칙은 h1과 em 사이에 있습니다. 공백입니다. 그러면 이 CSS 코드는

태그에 포함된 모든 요소에 적용됩니다.
후손 선택자에 대한 중요한 점은 첫 번째 매개변수와 두 번째 매개변수 사이의 세대 수가 무한할 수 있다는 것입니다.

예:

HTML 코드:

<ul> 
    <li>
        <ul>
            <li>
                <em>This will be styled.</em>
             </li>
        </ul>
    </li>
    <li>
        <em>This will be styled too.</em>
    </li>
</ul>

CSS 코드:

ul em{color:red;}

위 CSS 스타일은 HTML 코드의 두 주황색 요소에 적용됩니다.

자식 선택자(자식 선택자)

자식 선택자는 특정 요소의 하위 요소만 선택하고 하위 요소로 확장되지 않습니다.

예:

HTML 코드:

<h1>This is <strong>This will be styled.</strong> important.</h1>
<h1>This is <em>really <strong>This will not be styled.</strong></em> important.</h1>

CSS 코드:

h1 > strong {color:red;}

구문 규칙은 h1과 Strong 사이에 ">" 기호가 있다는 것입니다. 이 ">"와 앞의 h1 또는 다음 강호 사이의 공백은 선택 사항입니다.

위 예에서 HTML 코드의 첫 번째 줄에서 요소는

의 하위 요소이며 모든 h1 >

HTML 코드의 두 번째 줄에서 은

의 하위 요소가 아니라

의 손자이므로 h1 >

인접 형제 선택자

相邻兄弟选择器会选择某一元素紧随其后的元素，但是前提是他们拥有相同的父级。 

eg：

HTML代码：

<h1>
    <h2>This is a heading<h2>
    <strong>This will be styled.</strong>
    <strong>This will not be styled.</strong>
<h1>

CSS代码：

h2 + strong {color:red;}

语法规则是h2和strong之间有一个“＋”，“＋”和前面的h1或者后面的strong之间的空格都是可有可无的。

在 以上例子中，第一个strong紧邻着h2并且他们拥有相同的父级(h1)，所以h2 + strong会选择到第一个而不会选到第二个.

eg2:

HTML代码：

<p> 
    <ul>     
        <li>List item 1</li> 
        <li>List item 2</li> 
        <li>List item 3</li> 
    </ul> 
     <ol> 
         <li>List item 1</li> 
         <li>List item 2</li> 
         <li>List item 3</li> 
    </ol> 
</p>

CSS代码：

li + li {color:red;}

在以上的例子中li+li是选择紧挨着li后面的第一个

，所以第一个

不会被选择；而第二个

是紧挨着第一个li的，所有会被选择；第三个

是紧挨着第二个

的，也会被选择。

（学习视频分享：css视频教程）

위 내용은 CSS에는 여러 가지 파생 선택기가 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!