CSS 속성 선택기

CSS 2에는 속성 선택기가 도입되었습니다.

속성 선택기는 속성 및 속성 값을 기준으로 요소를 선택할 수 있습니다.

(1)[att*=val]; (2)[att^=val];(3)[att$=val];

1: [att*=val];설명: att로 표시되는 요소 속성의 속성 값에 val로 지정된 문자가 포함되어 있으면 요소는 이 스타일을 사용합니다.

<html> 
<head>
<style>
[id*=section]{
    background-color:red;
    }
    </style>
    </head>
    <body>
    <p id="sections9999">
    </p>
    </body>
    </html>

작동 효과: ie 제외 다른 것들은 정상적으로 표시될 수 있습니다. .

2:[att^=val];설명: att로 표시되는 요소 속성의 속성 값이 val로 지정된 문자로 시작하는 경우 요소는 이 스타일을 사용합니다. (실제로 ^는 정규식의 시작 부분과 일치한다고 이해하시면 됩니다...)

동작 효과: IE를 제외한 나머지는 모두 정상적으로 표시됩니다. .

3:[att$=val];설명: att로 표시되는 요소 속성의 속성 값이 val로 지정된 문자로 끝나는 경우 요소는 이 스타일을 사용합니다. (정규식에서 $는 끝과 일치합니다...)

동작 효과: IE를 제외한 나머지는 모두 정상적으로 표시됩니다. .

또 다른 예를 살펴보겠습니다:

<html> 
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<style>
a[href$=\/]:after,a[href$=html]:after,a[href$=htm]:after{
    content:"web网页";
    color:red;
}
a[href$=jpg]:after{
    content:"JPG图像素材";
    color:green;
}
</style>
</head>
<body>
<ul>
<li><a href="#">博客</a></li>
<li><a href="#">css选择器</a></li>
<li><a href="#">图像素材</a></li>
</ul>
</body>
</html>

작동 효과: IE를 제외하고 나머지는 모두 정상적으로 표시됩니다. .

지속적인 학습

새로운 파일

<html> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> <style> a[href$=\/]:after,a[href$=html]:after,a[href$=htm]:after{ content:"web网页"; color:red; } a[href$=jpg]:after{ content:"JPG图像素材"; color:green; } </style> </head> <body> <ul> <li><a href="#">博客</a></li> <li><a href="#">css选择器</a></li> <li><a href="#">图像素材</a></li> </ul> </body> </html>

코드 재설정

자동운전

제출하다

시사 Clear