CSS 속성 선택기
1. 속성 선택자란 무엇인가요?
속성 선택자는 html의 속성 태그를 선택자로 사용하는 것을 말합니다. 지정된 속성은 HTML 요소의 스타일을 설정합니다.
속성 선택기는 클래스 및 ID 속성뿐만 아니라 지정된 속성을 사용하여 HTML 요소의 스타일을 설정할 수 있습니다.
참고: IE 브라우저를 사용하는 경우 IE6 이하 버전에서는 속성 선택이 지원되지 않습니다. IE7은 !DOCTYPE이 지정된 경우에만 속성 선택기 사용을 지원합니다.
2. 속성 선택기 구문
다음 예는 제목 속성이 있는 모든 요소에 대해 설정됩니다. 스타일:
[제목]
{
색상: 빨간색;
}
간단한 속성 선택자
이름만 중요하고 값은 고려하지 않는 것이 단순 속성 선택자의 특징입니다.
h1[class] {color: silver;}는 클래스 값에 관계없이 클래스가 있는 모든 h1 요소에 적용됩니다. 따라서 <h1 class="hoopla">Hello</h1>, <h1 class="severe">Serenity</h1>, <h1 class="fancy">Fooling</h1>의 h1은 ; 이 규칙의 영향을 받습니다.
물론 이 "속성"은 클래스나 ID뿐만 아니라 img의 alt와 같은 요소의 모든 합법적인 속성일 수 있으므로 img[alt]{css 선언은 여기에서;}가 모든 요소에 적용됩니다. alt 속성이 있는 img 요소가 있는 파일입니다. [href][제목] {font-weight:bold;}는 어떻습니까? 당신이 똑똑하다면 이것이 <a href="http://php.cn/" title="php Home">< /a>
정확한 속성 값 선택기
id와 class는 본질적으로 정확한 속성 값 선택기입니다. 예, h1#logo는 h1[id="logo"]와 같습니다. 앞서 언급했듯이 ID나 클래스에 국한되지 않고 모든 속성을 사용할 수 있습니다! 예를 들어, a[href="http://php.cn/"][title="W3C Home"] {font-size: 200%;}는<a href="http://php.cn에서 작동합니다. /" title="php 홈"></a>.
부분 속성 값 선택기
이름에서 알 수 있듯이 속성 값이 부분적으로 일치하는 한(여기서 부분이 실제로 전체 단어와 일치하는 경우) 요소. 예를 살펴보겠습니다.
<p class="긴급 경고">플루토늄을 취급할 때는 임계 질량이 형성되지 않도록 주의해야 합니다.</ p> ;p[class~="warning"] {font-weight:bold;}
및
p[class~="urgent"] {font-weight:bold;}
중 어떤 것이든 이 p의 글꼴을 더 두껍게 만들 수 있습니다.
예를 들어 일러스트레이션의 스타일을 지정하고 제목에 "Figure"라는 문자열이 포함된 경우(예: title = "Figure 5: xxx 설명) 이 선택기는 매우 유용합니다. "이면 img[title~="Figure"]를 사용할 수 있습니다.
[title]: 제목 속성이
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
h1[title]{
color:red;
}
</style>
</head>
<body>
<h1 title = "属性选择器">标题<h1>
<p>这是内容</p>
<h1>标题<h1>
<p>这是内容</p>
</body>
</html>[title='hello']인 요소를 선택하세요. 속성이 title이고 값이 hello인 요소를 선택하세요
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
h1[title = "hello"]{
color:red;
}
</style>
</head>
<body>
<h1 title = "属性选择器">标题<h1>
<p>这是内容</p>
<h1 title = "hello">标题<h1>
<p>这是内容</p>
</body>
</html>[title*='hello']: 속성이 title이고 hello가 포함된 요소를 선택하세요
