CSS属性选择器
CSS 属性选择器就是指可以根据元素的属性以及属性值来选择元素。
一共有7中用法。
[attribute] 选择器
- 选择具有指定属性的元素
- 根据指定的属性是否存在来选择任何元素，而不管属性的值
- 简单属性选择器
语法
element[attribute]
or
[attribute]
代码示例
<!DOCTYPE html>
<html>
<head>
<style>
a[href] /* or [href]*/
{
background-color:yellow;
}
</style>
</head>
<body>
<a href="https://blog.csdn.net/devin_xin">万万君</a>
<a href="https://blog.csdn.net/devin_xin" target="_blank">Devin Xin</a>
</body>
</html>
[attribute=value] 选择器
- 选择具有指定属性和值的元素
- 基于属性的精确和完整值选择任何元素
- 精确属性值选择器
语法
element[attr =“value"]
or
[attr =“value"]
代码实例
<!DOCTYPE html>
<html>
<head>
<style>
a[target=_blank]
{
background-color:yellow;
}
</style>
</head>
<body>
<a href="https://blog.csdn.net/devin_xin" target="_blank">万万君</a>
<a href="https://blog.csdn.net/devin_xin" target="_top">Devin Xin</a>
</body>
</html>
[attribute~=value] 选择器
- 选择具有包含指定单词（以空格分割的单词）的属性值的元素
- 部分属性值选择器
语法
element[attr〜=“value”]
or
[attr〜=“value”]
代码实例
在这里插入代码片<!DOCTYPE html>
<html>
<head>
<style>
img[title~=flower]
{
border:5px solid yellow;
}
</style>
</head>
<body>
<p>The image with the title attribute containing the word "flower" gets a yellow border.</p>
<img src="https://www.w3cschool.cn/statics/images/course/klematis.jpg" title="klematis flower" width="150" height="113" />
<img src="https://www.w3cschool.cn/statics/images/course/img_flwr.gif" title="flowers" width="224" height="162" />
<img src="https://www.w3cschool.cn/statics/images/course/landscape.jpg" title="landscape" width="160" height="120" />
</body>
</html>
[attribute|=value] 选择器
- 选择指定属性具有指定值开始的元素
- 语言属性选择器, 选择任何具有lang属性的元素
- 值是整个单词，无论是单独像lang=“en”，或者像连字符(-)连接的如lang ="en-us"都可以
语法
element[attribute|=value]
or
[attribute|=value]
代码实例
<!DOCTYPE html>
<html>
<head>
<style>
[class|=top]
{
background:yellow;
}
</style>
</head>
<body>
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="content">Do you want to give me good hint?</p>
</body>
</html>
[attribute^=value] 选择器
匹配元素属性值带指定的值开始的元素
语法
[attribute^=value]
or
element[attribute^=value]
代码实例
<!DOCTYPE html>
<html>
<head>
<style>
div[class^="test"]
{
background:#ffff00;
}
</style>
</head>
<body>
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="test">The third div element.</div>
<p class="test">This is some text in a paragraph.</p>
</body>
</html>
[attribute$=value] 选择器
匹配元素属性值带指定的值结尾的元素
语法
[attribute$=value]
or
element[attribute$=value]
代码实例
<!DOCTYPE html>
<html>
<head>
<style>
[class$="test"]
{
background:#ffff00;
}
</style>
</head>
<body>
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="test">The third div element.</div>
<p class="test">This is some text in a paragraph.</p>
</body>
</html>
[attribute*=value] 选择器
匹配元素属性值包含指定值的元素
语法
[attribute*=value]
or
element[attribute*=value]
代码实例
<!DOCTYPE html>
<html>
<head>
<style>
[class*="test"]
{
background:#ffff00;
}
</style>
</head>
<body>
<div class="first_test">The first div element.</div>
<div class="sec-test-ond">The second div element.</div>
<div class="test">The third div element.</div>
<div><p class="test">This is some text in a paragraph.</p></div>
</body>
</html>
