css高级选择器中属性选择器

回复

您需要登录才可以下载或查看，没有帐号？立即注册

x

一.属性选择器:

能够将元素附带的属性用于选择器中，对带有指定属性的元素设置样式

1.语法：

1.[属性名：选择带有指定属性的元素

[title]:匹配包含title属性的所有元素

2.元素[属性名：

p[id]:匹配所有包含id的p元素

div[title]:匹配所有包含title的div元素

<!DOCTYPE html>
<head>
<title> 属性选择器 </title>
<meta charset="utf-8" />
<style>
div{
width:100px;
height:100px;
}
div[id]{
background-color:red;
}
div[class]{
background-color:green;
}
</style>
</head>
<body>
<div class="border"></div>
<div id="d1"></div>
</body>
</html>
3.元素[属性1][属性2]...... 匹配既具备属性1又具备属性2的元素 div[id][class] 4.元素[属性=值 input[type=text]:匹配所有type属性值为text的input元素 input[type="text"] input[type='text'] input[class="text"] input[id="text"] 5.元素[属性~=值 <div class="content"></div> <div class="content important"></div> <div class="content important border"></div> div[class~=important] 注意：”~=”符号是指定属性中，包含【独立】【值】单词的元素
<!DOCTYPE html>
<head>
<title> 属性选择器 </title>
<meta charset="utf-8" />
<style>
div{
width:100px;
height:100px;
}
div[id]{
background-color:red;
}
div[class~=border]{
width:200px;
height:200px;
background-color:yellow;
}
</style>
</head>
<body>
<div class="border"></div>
<div id="d1"></div>
<div class=" border content important"></div>
</body>
</html>