CSS 선택자에 대한 간략한 소개

서문: 저자가 공부한 후의 나름의 이해와 정리이다. 혹시 오류나 궁금한 점이 있으면 수정해 주시면 계속 업데이트하도록 하겠습니다!

선택기 무게

선택기 무게가 4자리 숫자로 표시되는 경우:

• 요소 선택기 의 가중치는 1이고,

• id 선택기의 가중치는 100입니다. 클래스

클래스 선택기
• 의 가중치는 10이고,

  인라인 스타일(JS

  도 인라인 스타일을 작동함)의 가중치는 1000입니다. ;

• 물론 특정

  속성
값이 설정된 경우입니다! 중요하지만 여전히 가장 중요합니다.

CSS 선택기

소개: 와일드카드 선택기, *{...}, 별표는 모든 요소와 일치할 수 있는 와일드카드 선택기를 나타냅니다.

• 요소 선택기, html{...}, body{...}, p{...}, 문서의 요소는 가장 기본적인 선택기, 요소 선택기 ;

• id 선택기, #value, 요소에 id 속성을 설정합니다. 값은

• class class selector, .value {...}입니다. 클래스 속성을 요소에 설정하면 값은

• 속성 선택기

  이며, 속성 선택기는 요소의 속성 및 속성 값을 기반으로 합니다. 요소를 선택하는 방법은 다양합니다.

• 간단한 속성 선택기: img[title], alt 속성이 설정된 img 요소 가져오기, #wrapper[outter] 가져오기 ID가 래퍼이고 속성이 래퍼인 요소

1. 특정 속성 선택기: input[type="button"], 속성 값 버튼의 입력 요소 가져오기; = "abc"], ID가 래퍼이고 외부 속성의 값이 abc인 요소를 가져옵니다.

2. 부분 속성 선택기: p[class ^="a"] , 클래스 속성 값이 a로 시작하는 p 요소를 가져옵니다. p[class $="b"], 클래스 속성 값이 b로 끝나는 p 요소를 가져옵니다.

3. 그룹

   선택기, 쉼표로 그룹화할 선택기를 구분합니다. #wrapper, #content{...}, ID가 래퍼인 요소와 ID가 다음인 요소를 가져옵니다. content, two 모두 가져오기

   하위 선택기
, 요소에서 공백, #wrapper #content{...}로 그룹화할 선택기를 구분합니다. 래퍼의 ID

내에서 콘텐츠의 ID가 있는 요소를 가져옵니다.
• 는 하위 요소이거나

하위 요소 선택기
• , 래퍼 ID가 있는 요소 개체 내에서 보다 큰 기호, #wrapper > #content{...}로 그룹화할 선택기를 구분합니다.

  는 하위 요소, 한 수준 아래로만 검색 하위 요소 선택자와 하위 항목 선택자는 동일하지 않습니다. 하위 항목 선택자에는 하위 요소 선택자가 포함되며 하위 항목 선택자는 계속해서 아래쪽으로 검색;

형제 요소 선택기:

• 인접 형제 선택기 ( IE6 이하 지원 안 함), 클래스 래퍼가 있는 요소, 클래스 콘텐츠가 있는 다음 요소, 를 가져온 후 더하기 기호 .wrapper + .content{...}로 그룹화할 선택자를 구분합니다. 범용 형제 선택자 의 차이점은

  인접 형제 선택자는 현재 요소만 얻고 나중에
뒤에 오는
• 요소를 가져오더라도 선택할 수 없다는 점입니다. ;

범용 형제 선택자(IE7 이하에서는 지원되지 않음), 물결표로 그룹화할 선택자를 구분하고, .wrapper ~ .content{...}, 클래스 가져오기 래퍼 요소가 된 후
1. 클래스 콘텐츠가 있는 모든

   요소는 인접한 형제 선택자와 다릅니다.

• 의사 클래스 선택기(IE8 이하에서는 지원되지 않음):

1. :root는 문서의 루트 요소, 즉

2. input:focus을 선택합니다.

3. 요소:hover, 마우스가 현재 요소 위로 이동합니다.

4. p:nth- of-type(n), 선택 항목은 상위 요소의 n번째 p 요소 입니다. 이는 계산된 n입니다. 🎜> 상위 요소 내부의 p 요소. 그런 다음 get; n은 정수 이고 1부터 시작하며 수식일 수도 있고 짝수(짝수), 홀수(홀수)라는 키워드일 수도 있습니다. number);

5. p

   :first-of-type, p:nth-of와 동일한 효과를 갖는 상위 요소의 첫 번째 p 요소를 선택합니다. -type(1);

6. p

   :last-of-type, 선택 항목은 상위 요소의 마지막 p 요소입니다. n번째 요소는 없습니다.

7. p:nth-last -of-type(n), 선택 항목은 상위 요소의 n번째 p 요소이지만

   은 마지막 하위 요소부터 계산됩니다. 앞으로 , 앞에 n번째

8. p:nth-child(n)가 있음에 유의하세요. 선택 항목은 n번째

   하위 요소 입니다. 상위 요소 중 p 요소여야 하며, 이는 상위 요소에 따라 입니다. n 요소 내에서 하위 요소의 순서를 계산한 다음 여부를 확인합니다. n번째 하위 요소는 p 요소입니다. 이로 인해 n번째 하위 요소가 p가 아닐 수 있고 을 얻을 수 없는 상황이 발생하므로 n번째-를 사용하는 것이 좋습니다. of-type(n);

9. p

   :first-child, 선택 항목은 상위 요소입니다. and의 첫 번째 요소는 p 요소입니다. :nth-child(1);

10. p:last-child, 상위 요소의 마지막 요소를 선택하며 이는 p 요소입니다.

    p:nth-last-child(n), 선택 항목은 상위 요소의 n번째 하위 요소이고 p 요소여야 하지만

    는 마지막 하위 항목
부터 앞으로 계산됩니다. 앞에 n번째가 있다는 점에 유의하세요.

11. 다른 것들이 많이 있습니다...

의사 요소 선택기:

, 요소의 첫 글자 스타일을 지정합니다. 모든
1. 선두 구두점에는 이 스타일이 적용되어야 합니다. 첫 번째 문자

   와 은 블록 수준 요소 와만 연관될 수 있습니다. 요소의 첫 번째 줄 스타일

   은 블록 수준 요소

2. :after에만 연결할 수 있습니다. IE7 이하에서는 생성된 콘텐츠를 요소 콘텐츠의 시작 부분에 삽입합니다.

3. :before 요소 콘텐츠 마지막으로 생성된 콘텐츠를 삽입합니다.

   ::selection은 사용자가 선택한 부분과 일치합니다.
은 이중 콜론 쓰기만 지원합니다.
4. 은만 지원합니다. 색상 및 배경 색상 스타일 모두

위 내용은 CSS 선택자에 대한 간략한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!