属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器</title>
<style>
/*
[属性名] 选择含有指定属性元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性名^=属性值] 选择属性值以指定属性值开头的元素
[属性名$=属性值] 选择属性值以指定属性值结束的元素
[属性名*=属性值] 选择属性值中含有某值的元素的元素
属性选择器优先级:
[属性名*=属性值]-> [属性名$=属性值]-> [属性名^=属性值]-> [属性名=属性值]-> [属性名]
*/
p[title]{
color: orange;
}
p[title=abc]{
color: red;
}
p[title^=abc]{
color: green;
}
p[title$=c]{
color: blue;
}
p[title*=c]{
color: skyblue;
}
</style>
</head>
<body>
<!-- title属性可以设置鼠标放在上面,可以显示出title里面的值 -->
<p title="abc">少小离家老大回</p>
<p title="abcdef">乡音无改鬓毛衰</p>
<p title="hello">儿童相见不相识</p>
<p>笑问客从何处来</p>
<p>秋水共长天一色</p>
<p>落霞与孤鹜齐飞</p>
</body>
</html>
It's never too late to be the person you want to be.
去做你想成为的那个人永远都不会晚
浙公网安备 33010602011771号