집 > 기사 > 웹 프론트엔드 > CSS 하위 선택자는 무엇입니까?

CSS 하위 선택자는 무엇입니까?

青灯夜游원래의: 2021-07-07 14:59:234176검색

CSS 하위 선택기는 다음과 같습니다. 1. "상위 요소 * {}", 상위 요소의 모든 하위 요소를 찾습니다. 2. "Parent Children {}"은 상위 요소에서 지정된 하위 요소를 찾는 것입니다. 3. "Parent Child 1 Child 2 {}"는 상위에서 하위 1을 찾은 다음, 1세대에서 하위 요소를 찾습니다. 2.

CSS 하위 선택자는 무엇입니까?

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

후손 선택자는 포함 선택자라고도 합니다.

후손 선택기는 요소의 후손인 요소를 선택할 수 있습니다.

하위 항목 선택기의 집중형:

1. Parent* {} 상위 항목의 모든 하위 항목을 찾습니다. 父代 * {}从父代中的找到所有子代。

2、父代子代1{} 是从父代中找到子代1 或者 父代子代2{} 是从父代中找到子代2 。

3、父代子代1 子代2{}

2. 상위 하위 1{}은 상위에서 하위 1을 찾거나, 상위 하위 2{}는 상위 2에서 하위를 찾는 것입니다.

3. Parent Generation Child 1 Child 2{} Parent Generation에서 Child 1을 찾고, Child 1에서 Child 2를 찾는 것입니다.

첫 번째 형태: 모두 선택되었으나 *의 우선순위가 낮습니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div{
                padding: 20px;
                background: rgba(255,0,0,0.2);     //这是给它一个红色，透明度为0.2
            } 
        .a *{
                border: 2px solid black;  //这里是选中类a的所有后代
            }
        </style>
    </head>
    <body>
        <div class="a">a
            <div class="b">b
                <div class="c">c</div>
            </div>
        </div>
    </body>
</html>

두 번째 형식:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div{
                
                padding: 20px;
                background: rgba(255,0,0,0.2);
            }
            
        .a .b{
                border: 2px solid black; //同理这里选择 .c 也是可以的因为他们都是 .a 的后代。
            }
            
            
        </style>
    </head>
    <body>
        <div class="a">a
            <div class="b">b
                <div class="c">c</div>
            </div>
        </div>
    </body>
</html>

세 번째 형식: .b와 .c를 동시에 선택할 수 없으며 .c.

만 선택할 수 있습니다. 으르르르르

다음 코드에서 주목해야 할 또 다른 사항이 있습니다. a p는 클래스 이름이 c인 p에 중첩되어 있고, 이 때 클래스 이름이 c인 p도 이 안에 중첩되어 있습니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div{
                
                padding: 20px;
                background: rgba(255,0,0,0.2);
            }
            
            .a .b .c{
                border: 2px solid black;
            }
            
            
        </style>
    </head>
    <body>
        <div class="a">a
            <div class="b">b
                <div class="c">c</div>
            </div>
        </div>
    </body>
</html>

(동영상 공유 학습:

css 동영상 튜토리얼🎜)🎜

위 내용은 CSS 하위 선택자는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：CSS 표현이 뭐죠?다음 기사：CSS 표현이 뭐죠?