CSS 속성 선택기
특정 속성이 포함된 HTML 요소 스타일
특정 속성이 포함된 HTML 요소 스타일은 클래스 및 ID 그 이상입니다.
참고: IE7 및 IE8은 DOCTYPE만 속성 선택기를 지원해야 합니다! IE6 이하 버전은 속성 선택자를 지원하지 않습니다.
속성 선택기
다음 예에서는 제목이 포함된 모든 요소를 파란색으로 바꿉니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
[title]
{
color:blue;
}
</style>
</head>
<body>
<h2>我没有变</h2>
<h1 title="Hello world">Hello world</h1>
<a title="PHP中文网" href="http://www.php.cn">PHP中文网</a>
<hr>
<h2>PHP.cn</h2>
<p>Hello!</p>
</body>
</html>프로그램을 실행하고 사용해 보세요
속성 및 값 선택기
다음 예에서는 변경됩니다. 제목 제목의 테두리 스타일='php.cn' 요소:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
[title=w3cschool]
{
border:5px solid green;
}
</style>
</head>
<body>
<h2>将适用:</h2>
<img title="php.cn" src="/upload/course/000/000/006/5809800b44336872.jpg" width="270" height="50" />
<br>
<a title="php.cn" href="http://www.php.cnc">php中文网</a>
<hr>
<h2>将不适用:</h2>
<p title="greeting">Hi!</p>
<a class="php.cn" href="http://www.php.cn">php中文网</a>
</body>
</html>프로그램을 실행하여 사용해 보세요
속성 및 값 선택기 - 다중 값
다음에는 지정된 내용이 포함되어 있습니다. value 속성과 값을 구분하기 위해 (~)를 사용하는 제목 속성의 요소 스타일 예:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
[title~=hello]
{
color:blue;
}
</style>
</head>
<body>
<h2>将适用:</h2>
<h1 title="hello world">Hello world</h1>
<p title="student hello">Hello CSS students!</p>
<hr>
<h2>将不适用:</h2>
<p title="student">Hi CSS students!</p>
</body>
</html>프로그램을 실행하여 사용해 보세요
다음은 지정된 값을 포함하는 lang 속성의 요소 스타일 예입니다. , 속성과 값을 구분하려면 (|)를 사용하세요. 그리고 한번 해보세요
