css属性选择器

 

CSS [attribute] 选择器

<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>CSS [attribute] 选择器</h1>

<p>带有 target 属性的链接获得颜色背景：</p>

<a href="https://www.baidu.com">baidu.com.cn</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

</body>
</html>

 

 

 

 

CSS [attribute="value"] 选择器

<!DOCTYPE html>
<html>
<head>
<style>
a[target=_blank] {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>CSS [attribute="value"] 选择器</h1>
<p>target="_blank" 的链接会有黄色背景：</p>

<a href="https://www.baidu.com.cn">baidu.com.cn</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

</body>
</html>

 

 

 

 

CSS [attribute|="value"] 选择器

<!DOCTYPE html>
<html>
<head>
<style>
[class|=top] {
  background: red;
}
</style>
</head>
<body>

<h1>CSS [attribute|="value"] 选择器</h1>

<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world</p>
<p class="topcontent">CSS</p>

</body>
</html>

 

 

 

将　　[class|=top]{}　　改成　　[class^=top]{}　　就可以实现全选了

 

CSS [attribute$="value"] 选择器（选择带有test结尾的class属性值的元素）

<!DOCTYPE html>
<html>
<head>
<style> 
[class$="test"] {
  background: yellow;
}
</style>
</head>
<body>

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>

</body>
</html>

 

CSS [attribute*="value"] 选择器（选择带有包含“te”的class属性值的所有元素）

<!DOCTYPE html>
<html>
<head>
<style> 
[class*="te"] {
  background: yellow;
}
</style>
</head>
<body>

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>

</body>
</html>

 







            

            
posted @ 
2022-02-07 22:20 
kuaiquxie 
阅读(33) 
评论(0) 
 
收藏 
举报