점(.)과 적합한 문자열로 클래스 선택기를 정의할 수 있습니다. 예:
.antzone
위 코드는 클래스 선택기입니다. 하지만 클래스 선택기가 효과적이려면 해당 클래스를 html 요소에 정의해야 합니다. 코드는 다음과 같습니다.
<div id="antzone">< / div>
코드 예시는 다음과 같습니다.
<style type="text/css">
.antzone{
width:100px;
height:100px;
}
</style>
<div class="antzone"></div>위 코드는 읽기 쉽도록 단순화되었습니다. 클래스 속성 값 앞에는 문자가 올 수 없습니다. 점(.). 동일한 요소에 여러 클래스 선택기를 적용할 수도 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
.antzone{
width:100px;
height:100px;
border:1px solid black;
}
.a{
color:red;
}
.b{
font-weight:bold;
}
</style>
</head>
<body>
<div class="antzone a b">php中文网</div>
</body>
</html>클래스 속성 값은 각 클래스 앞에 점을 추가할 수 없습니다.
클래스 선택기는 요소 선택기와 함께 사용할 수도 있습니다. 예를 들어 페이지에 "antzone" 클래스를 동시에 사용하는 여러 요소가 있지만 때로는 다음과 같은 div 요소만 타겟팅하려는 경우가 있습니다. 클래스 속성 값은 antzone입니다. 스타일을 수정하려면 다음과 같이 작성할 수 있습니다.
div.antzone{
color:blue;
} 위 코드는 클래스 속성 값 antzone을 사용하여 div 요소의 글꼴 색상을 파란색으로 설정할 수 있습니다.
위 코드에서 소개한 것처럼 요소는 공백으로 구분된 여러 클래스 이름을 가질 수 있습니다. 실제로 선택기는 여러 클래스를 연결할 수도 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>hp中文网</title>
<style type="text/css">
.antzone{
width:100px;
height:100px;
border:1px solid black;
}
.antzone.a{
color:blue;
}
</style>
</head>
<body>
<div class="antzone a b">php中文网</div>
<div class="antzone b">php中文网</div>
</body>
</html> 위의 코드는 antzone과 클래스가 모두 유효한 요소를 만들 수 있습니다.
때때로 여러 선택기가 다음과 같이 동일한 스타일 속성을 정의합니다.
.a{
width:100px;
height:100px;
}
.b{
width:100px;
height:100px;
color:red;
}위 코드는 다음과 같이 수정할 수 있습니다.
.a,.b{
width:100px;
height:100px;
}
.b{
color:red;
}다음 섹션