>웹 프론트엔드 >프런트엔드 Q&A >CSS 선택기는 무엇을 의미합니까?

CSS 선택기는 무엇을 의미합니까?

藏色散人
藏色散人원래의
2020-12-11 09:41:552611검색

css 선택기는 웹 페이지에서 DOM 요소를 일치시키는 데 사용되는 CSS 선택기를 의미합니다. 일반적으로 사용되는 선택기는 태그 이름 선택기, 클래스 선택기, ID 선택기, 파생 선택기, 하위 요소 선택기, 그룹 선택기 및 의사 선택기로 나눌 수 있습니다. 요소 선택자.

CSS 선택기는 무엇을 의미합니까?

이 기사의 운영 환경: windows10 시스템, CSS3, thinkpad t480 컴퓨터.

추천: "css 비디오 튜토리얼"

css 선택기는 웹 페이지의 DOM 요소를 일치시키는 데 사용되는 CSS 선택기를 나타냅니다. CSS 스타일은 선택기 {style}로 정의됩니다. "선택기"는 {}의 "스타일" 객체, 즉 웹페이지에서 "스타일"이 작동하는 요소를 지정합니다.

CSS를 사용하여 HTML 페이지의 요소에 대한 일대일, 일대다 또는 다대일 제어를 구현하려면 CSS 선택기를 사용해야 합니다. HTML 페이지의 요소는 CSS 선택기를 통해 제어됩니다.

각 CSS 스타일 정의는 다음 형식의 두 부분으로 구성됩니다.

selector {property: value}
选择器{属性:属性值}
//即 选择器{样式}

{} 앞의 부분은 "선택기"입니다. "선택기"는 {}의 "스타일()" 객체, 즉 "스타일"이 작동하는 웹페이지의 요소를 지정합니다. 이는 HTML 태그일 수도 있고 특정 ID나 클래스가 있는 태그일 수도 있습니다.

간단히 말하면 CSS의 주요 기능은 웹 페이지의 dom 요소에 대한 스타일을 설정하는 것이며 선택기는 dom 요소를 일치시키는 데 사용됩니다.

일반적으로 사용되는 선택기는 태그 이름 선택기, 클래스 선택기, ID 선택기, 파생 선택기, 하위 요소 선택기, 그룹 선택기, 의사 요소 선택기로 나눌 수 있습니다.

CSS 선택기 사용 시 주의 사항:

CSS의 해석은 하향식이므로 요소의 동일한 속성 설명에 대해 아래에 배치된 속성 설명은 위에 있는 속성 설명을 덮어쓰므로 요소를 선택할 때 다음과 같은 쓰기 순서에 주의해야 합니다.

a:visited {color: #00FF00; text-decoration: none}
a:hover {color: #FF00FF; text-decoration: underline}

이 쓰기 순서를 사용하면 링크 방문 여부에 관계없이 마우스를 링크 위로 이동하는 한 링크가 파란색으로 바뀌고 밑줄이 그어집니다. 그러나 다음 쓰기 순서를 사용하는 경우:

a:hover {color: #FF00FF; text-decoration: underline}
a:visited {color: #00FF00; text-decoration: none}

링크를 방문한 경우 링크 위에 마우스를 올려도 파란색으로 바뀌지 않고 밑줄이 그어지지만 녹색으로 유지됩니다.

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.