CSS 선택자 학습: 복합 선택자에 대해 이야기해 보겠습니다(자세한 소개).

이 글에서는 CSS의 복합 선택자, 교차 선택자, 계층형 선택자, 의사 클래스 및 의사 요소 선택자, 속성 선택자에 대해 자세히 알아봅니다.

1. 교차점 선택기

• 태그별 선택기라고도 함

• 기능: 동시에 두 개의 태그와 일치하는 콘텐츠 선택

• 형식: 1. By two 선택자 구성, 첫 번째는 라벨 선택자, 두 번째는 클래스 선택자 또는 ID 선택자입니다. 2. 두 선택자 사이에는 공백이 있어서는 안 됩니다. 학교에서 머리를 빨간색으로 염색합니다

  div.student{
  				color: red;
  }

• 2. 결합 복합 선택기

기능: 선택한 모든 선택기에 대해 동일한 스타일을 정의합니다

형식: 각 선택기가 쉼표를 통과합니다
• Connected

• : 모든 선택자는 조합 선택자의 일부로 사용될 수 있습니다(공차가 더 큽니다)
  예: 교장은 학교 슬로건, 모든 교사 및 Guo Yue가 앞으로 노래 스타일로만 쓸 수 있도록 요구합니다

• p.slogn,.teacher,#gy{
  				font-family: "宋体";
  }

3. 레벨 선택기

1. 하위 요소 합성기

기능: 특정 요소의 하위 요소 선택

형식: 외부 레이블이 앞에 작성됩니다. 뒤에는 띄어쓰기로 구분

• 예: 우공의 후손들이 한꺼번에 머리를 염색하고 싶어

• #yuGong .people{
     			color: red;
     		}

• 참고: 이때 우공의 후손들 중에서

  모든 사람들의 후손들이 머리를 염색하게 됩니다

  , 유공의 아들, 손자, 증손자를 포함하여...

• 2. 하위 요소 복합 선택기

기능: 특정 요소의 하위 요소(아들)인 요소를 선택합니다

형식 : 부모 태그는 앞에 쓰고, 자식 태그는 뒤에 쓰고, 가운데는 >

• 으로 연결됩니다. 예: 유공의 아들들이 머리를 한꺼번에 염색하고 싶어

• #yuGong>.people{
     			color: red;
  }

• 참고: 이때 유공의 후손 중 모든 사람의

  아들

  은 머리를 염색합니다. 유공의 손자와 증손자는
아직 어리기 때문에 머리를 염색하지 않습니다.

여기서는 자식 요소(생물학적 아들)만 선택됩니다

• 3. 형제 선택기 닫기

기능: 다른 요소 바로 다음에 요소를 선택하고 두 요소 모두 동일한 상위 요소를 갖습니다.

형식: 선택기는 더하기 기호 "+"를 사용하여 연결합니다. 그 앞과 뒤의 두 개의 선택기. 선택자의 두 요소는

동일한 아버지
• 를 갖고, 두 번째 요소는 첫 번째 요소를

  따라야 합니다

• 예: 일곱 박 형제 중 세 번째 아이가 머리를 염색하려고 합니다. (두 번째 아이를 사용하여 세 번째 자식 찾기 )

  #secondBaby+#thirdBaby{
     			color: red;
  }

• 4. 일반 형제 선택기

기능: 다른 요소와 동일한 수준에 있는 요소를 선택하고 둘 다 동일한 상위 요소를 가집니다

형식 : "~"를 사용하여 두 선택기를 앞뒤로 연결합니다. 선택기의 두 요소는

동일한 상위 요소
• 를 가지지만 두 번째 요소

  는 첫 번째 요소

  를 따를 필요가 없습니다.

• 예: 호리병박 7형제 중 세 번째 아이가 머리를 염색하고 싶어 합니다. (큰 아이를 이용해 세 번째 아이를 찾습니다.)

  #bigBaby~#thirdBaby{
     			color: red;
  }

4. 의사 클래스 및 의사 요소 선택기

0. "유사"란 무엇입니까?

"유사"는 선택기가 문서 트리에 없는 부분을 수정하는 데 사용된다는 의미입니다.

필독: http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/#prettyPhoto

• 1.

기능: 특정 상태에 있는 기존 요소에 해당 스타일을 추가하는 데 사용됩니다. 이 상태는 사용자 행동에 따라 동적으로 변경됩니다. 다음은 위에서 자세히 설명하지 않은

상태 의사 클래스에 대해서만 소개합니다

• 1) link

기능: 이 요소의 방문하지 않은 스타일 설정(하이퍼링크)

형식:

• a:link{...}

  2) Visited
기능: 요소의 방문한 스타일 설정(하이퍼링크)

형식:

• a:visited{...}

  3) hover
기능 : 마우스를 올렸을 때 요소의 스타일 설정

형식:

• a:hover{...}

  4) activer
기능: 요소 활동 스타일 설정(마우스 누름)

Format :

• a:active{...}

  5) focus
기능: 포커스를 받을 요소의 스타일 설정

형식:

• a:focus{...}

  참고
: 의사 클래스의 순서를 바꾸지 마세요. , link-visited-hover -Active 순서를 따르세요. 그렇지 않으면 오류가 발생할 수 있습니다
2. 의사 요소 선택기

• 기능: 문서 트리에 없는 일부 요소를 만들고 스타일을 추가하는 데 사용됩니다. selector unfunction

format

:: First-Letterselect selector의 첫 글자 p :: First-Letter ::first-line::before선택기 앞에 콘텐츠를 추가하고, 콘텐츠를 사용하세요 삽입할 내용을 지정하는 속성입니다. (삽입된 내용은 실제로 문서 트리에 없습니다.)

선택기의 첫 번째 줄을 선택하세요	p::first-line	p::first-letter
::first-line	选取选择器的首行	p::first-line
::before	在选择器前增加内容，使用 content 属性来指定要插入的内容。（被插入的内容实际上不在文档树中）	p::before{content: "hello ";}
::after	在选择器后增加内容，使用 content 属性来指定要插入的内容。（被插入的内容实际上不在文档树中）	p::after{content: "hello ";}
::selection	匹配被用户选中或者处于高亮状态的部分	p::selection

p::before{content: "hello ";}

::after선택기 뒤에 내용을 추가하려면 다음을 사용하세요. 삽입할 내용을 지정하는 content 속성입니다. (삽입된 내용은 실제로 문서 트리에 없습니다.) p::after{content: "hello ";}::selection 일치 항목은 사용자가 선택하거나 강조 표시됨 상태의 일부 p::selection 5. 속성 선택기 Selector FunctionFormatE[ att ^=value]E 태그의 att 속성 값이 'value'

p[id^='yuan']{color: red;}

🎜E[att$=value]로 시작함을 나타냅니다. 🎜🎜 E 태그의 att 속성 값이 'value'로 끝나는 것을 나타냅니다.🎜🎜p[id$='chao']{ color: blue;}🎜🎜🎜🎜E[att*=value]🎜🎜는 att를 나타냅니다. E 태그의 속성 값에는 '값' 문자열이 포함되어 있습니다. 🎜🎜p[class*='shi']{font-size: 35px;}🎜🎜🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요. 🎜소개 프로그래밍🎜! ! 🎜

위 내용은 CSS 선택자 학습: 복합 선택자에 대해 이야기해 보겠습니다(자세한 소개).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!