CSS property selector

CSS Attribute Selector

CSS 2 introduces attribute selector.

Attribute selector can select elements based on their attributes and attribute values.

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

1: [att*=val];Explanation: If the attribute value of the element's attribute represented by att contains the character specified by val, then the element uses this style.

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

Operation effect: except ie Others can be displayed normally. .

2:[att^=val];Explanation: If the attribute value of the element represented by att starts with the character specified by val, then the element uses this style. (In fact, you can understand that in the regular expression, ^ matches the beginning, so...)

Operation effect: Except for IE, everything else can be displayed normally. .

3:[att$=val];Explanation: If the attribute value of the element's attribute represented by att ends with the character specified by val, then the element uses this style. ($ matches the end of the regular expression...)

Running effect: Except for IE, everything else can be displayed normally. .

Let’s look at another example:

<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>

Running effect: Except for ie, everything else can be displayed normally. .

Continuing Learning

new file

<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>

submit Reset Code

Automatic operation

CSS property selector

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]