CSS 선택기는 주어진 패턴의 각 요소를 일치시켜 HTML 요소를 선택하는 데 사용됩니다. 선택기 내에서 속성과 값을 선언하여 스타일을 정의합니다.
구문
스타일 선언 구문은 다음과 같습니다 -
Selector {
property: value; } CSS에는 단순 선택기, 속성 선택기, 의사 클래스, 의사 요소 및 표준 결합기를 통한 선택기 조합이 있습니다. 다음 표는 선택기의 일부를 나열합니다 -
| 선택기 | 선택기 유형 | 설명 |
|---|---|---|
| * | 범용 선택기 | 모든 요소와 일치 |
| e | 유형 선택기 | e 유형의 모든 요소와 일치 |
| e1e2 | 하위 항목 선택기 | e1 요소의 하위 항목인 모든 e2 요소와 일치합니다. |
| e1>e2 | 하위 선택기 | 요소 e1의 자식인 모든 e2 요소와 일치합니다. |
| e[bar="demo"] | 속성 선택기 | "bar" 속성 값이 "demo"와 정확히 동일한 모든 e 요소와 일치합니다. |
| #id | ID 선택기 | ID가 "id"인 요소와 일치합니다. |
예시
다음 예는 CSS 선택기를 보여줍니다 -
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
background-color: lightgreen;
color: white;
text-decoration: overline black;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is our demo text. Only the first line will have a different style. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p>
</body>
</html> 출력
이것은 다음과 같은 출력을 제공합니다 -
예시
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
background-color: lightgreen;
color: white;
text-decoration: overline red;
}
span {
font-size: 1.4em;
}
#demo {
box-shadow: inset 0 0 20px orange;
}
</style>
</head>
<body>
<h2>Student Details</h2>
<p><span>Student</span>details would be mentioned here. <span id="demo">Student Marks</span> includes the score of students in the final semester held July 2018. With that the ranks are also displayed.</p>
</body>
</html> 출력
이것은 다음 출력을 제공합니다 -
