CSS에는 어떤 유형의 선택기가 있습니까?

6913 단어 csswebdevbeginners
사진 작성자Nick Karvounis가 Unsplash
CSS 선언의 복잡한 부분은 스타일을 적용할 적절한 선택기를 제공하는 것입니다.이러한 선택기가 어떻게 작동하는지 이해하는 것이 디자인 전문 사이트의 첫걸음이다.CSS에서 스타일을 적용하는 데 사용할 요소를 선택할 수 있는 방법에는 여러 가지가 있습니다.본고는 흔히 볼 수 있는 선택기를 열거하고 설명하고자 한다.
무엇이 선택기입니까?
선택기는 CSS 선언에서 스타일을 설정하는 요소를 식별합니다.CSS 선언에서 선택기는 중괄호 앞의 초기 부분입니다.예를 들어, 섹션 HTML 요소는 아래 선언의 선택기입니다.
section {
   font-size: 1rem;
   padding: 0.5rem;
   margin: 0.5rem;
 }
DOM이란?
일반적인 CSS 선택기에 대해 자세히 설명하기 전에 브라우저가 HTML 페이지를 어떻게 설명하는지 알아야 합니다.브라우저에서 HTML 페이지를 DOM으로 해석하여 내용을 설명하려고 합니다.DOM은 문서 객체 모델을 나타냅니다.DOM에 대한 빠른 설명here을 찾을 수 있습니다.
다양한 유형의 선택기
다음은 가장 일반적인 CSS 선택기 유형입니다.
공통 선택기
일반 선택기를 사용하여 적용된 스타일은 HTML 페이지의 모든 요소에 적용됩니다.이러한 방식으로 스타일을 적용하는 것은 브라우저가 HTML 문서의 모든 요소를 해석해야만 스타일을 적용할 수 있기 때문에 비효율적으로 여겨진다.
* {
   color: red;  
 }
요소 선택기
HTML 요소는 태그 이름을 사용하여 스타일을 설정할 수 있습니다.아래 CSS를 사용하면 모든 레이블<h2>이 빨간색으로 표시됩니다.
h2 {
   color: red;  
 }
클래스 선택기
만약 비슷한 양식이 응용 프로그램의 다른 부분에 적용되어야 한다면, 클래스 선택기는 매우 유용하다.클래스 선택기 사용. 및 class name 정의는 다음과 같습니다.
.a-class {
   color: red;  
 }
ID 선택기
HTML의 id 속성은 HTML 요소를 고유하게 식별하는 데 사용됩니다.이러한 ID는 요소의 스타일을 설정하는 데 # 뒤꿈치id를 사용할 수도 있습니다.
#my-id {
   color: red;  
 }
속성 선택기
속성 선택기를 사용하여 속성의 존재에 따라 HTML 요소의 스타일을 설정할 수 있습니다.예를 들어 다음 설명은 disabled 속성이 있는 모든 요소에 경계선을 추가합니다.
[disabled] {
   border: 2px solid black;     
 }
그룹 선택기
여러 클래스나 요소가 같은 스타일을 공유하는 경우 쉼표로 구분하고 단일 선언으로 해당 유형을 정의하여 중복을 방지할 수 있습니다.
#my-id, 
.b-class {
   color: red;  
 }
복합 선택기
만약 우리가 명칭 클래스를 포함하는 특정 요소의 스타일만 설계하고 싶다면,compund 선택기를 사용할 수 있습니다.아래의 스타일 성명에서 클래스 div 의 a-class 요소만 스타일화됩니다.<h1> 요소가 정확히 같은 a-class를 가지고 있다면 아래의 스타일은 적용되지 않습니다.
div.a-class {
   color: red;  
 }
후대 선택기
주어진 원소에 끼워 넣은 모든 원소를 하위 원소라고 한다.예를 들어 아래 선택기를 사용하면 <body> 태그에 중첩된 모든 단락 요소의 스타일을 설정할 수 있습니다.
body p {
   color: red;  
 }
모/자 선택기
부자 선택기는 하위 선택기보다 좀 구체적이다.이것은 왼쪽에 정의된 선택기의 직접 하위 요소에만 스타일을 설정합니다.다음 선언은 단락 태그의 직접 자 피쳐인 앵커 태그에만 적용됩니다.<a> 태그가 다른 <span> 태그에 잘 끼워져 있으면 스타일을 받지 않습니다.
p > a {
   color: blue;     
 }
일반 동급 선택기
일반 동급 선택기 도움말은 선택한 다음에 정의된 모든 동급 스타일을 설정합니다.다음 선택기를 사용하면 <div> 다음에 정의된 모든 단락 요소의 스타일을 설정할 수 있습니다. 이 요소들은 <div> 요소의 동급 요소입니다.
div ~ p {
   color: red;  
 }
이웃 형제 선택기
인접 형제 선택기 스타일은 일반 형제 선택기와 유사하지만 선택기 뒤의 형제에만 적용됩니다.
div + p {
   color: red;  
 }
위류 선택기
위조 클래스 선택기는 원소의 주어진 상태에 대한 스타일을 설정하는 데 도움이 됩니다.앵커 태그 위에 마우스를 올려 놓으면 다음 스타일이 적용됩니다.
a:hover {
   color: red;
   text-decoration: none;   
 }
위원소 선택기
위조 요소 선택기는 요소의 일부분에 대한 스타일을 설정하는 데 도움이 된다.유사 요소 스타일은 CS3에서 사용됩니다::.다음 선택기는 모든 단락 요소의 첫 번째 행에 대한 스타일을 설정합니다.
   p::first-line {
      color: red;
   }
마지막 생각
CSS 선택기를 숙지하면 웹 페이지에 필요한 부분을 전문적으로 디자인하기 위해 정확한 CSS 성명을 제시하는 데 도움이 될 것이다.값비싼 스타일링을 피하는 데도 도움이 된다.
VB6 red write DB using Microsoft DAO 3.6 Object Library
순환 for, while, until

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage