기본 CSS: 요소, ID 선택 및 Class

CSS에서 요소를 선택 class 하고 id 웹 페이지에서 스타일을 적용하고 요소를 사용자 정의할 수 있습니다. 사용 방법에 대한 자세한 안내는 다음과 같습니다.

 

요소 선택

특정 HTML 요소의 모든 인스턴스를 선택하려면 요소 이름을 선택기로 사용하십시오. 예를 들어 문서의 p 모든 태그를 선택합니다. <p>

 

선택 Class

동일한 클래스의 요소를 선택하려면 점 "."을 사용하십시오. 클래스 이름이 뒤따릅니다. 예를 들어 .my-class 클래스가 있는 모든 요소를 ​​선택합니다 my-class.

여러 클래스가 있는 요소를 선택하려면 점 "."을 사용하십시오. 공백으로 구분된 클래스 이름을 나열합니다. 예를 들어 및 클래스 .class1.class2 가 모두 있는 요소를 선택합니다. class1 class2

 

선택 id

로 특정 요소를 선택하려면 id 해시 "#" 다음에 요소의 를 사용하십시오 id. 예를 들어 는 가 #my-id 있는 요소를 선택합니다 id my-id.

 

Element, Class 및 ID 선택 결합

class 요소, 및 id 선택을 결합하여 특정 클래스 및 를 사용하여 특정 요소를 대상으로 지정할 수 있습니다 ID.

예를 들어  및 가 있는 요소를 div.my-class#my-id 선택합니다. <div> class my-class ID my-id

다음은 CSS에서 요소 class 및 를 선택하는 구체적인 예입니다. id

/* Select all <p> tags */  
p {  
  color: blue;  
}  
  
/* Select elements with the class "my-class" */  
.my-class {  
  background-color: yellow;  
}  
  
/* Select the element with the ID "my-id" */  
#my-id {  
  font-weight: bold;  
}  
  
/* Combine element, class, and ID selections */  
div.my-class#my-id {  
  border: 1px solid black;  
}  

element, 및 id 선택을 사용하여 class 웹 페이지에서 특정 요소 또는 요소 그룹을 쉽게 선택하고 스타일을 지정할 수 있습니다.