<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
css3中属性选择器测试
属性选择器,类选择器,伪类选择器权重都是10
</title>
<style>
/* 1测试书写 */
li[demo]{
color: red;
}
/* 2测试书写 */
li[class=test2]{
color: skyblue;
}
/* 3测试书写 */
li[class^=t3]{
color: blueviolet;
}
/* 4测试书写 */
li[class$=demo4]{
color: chartreuse;
}
/* 5测试书写 */
li[fd*=sss]{
border: 1px dotted darkkhaki;
}
</style>
</head>
<body>
<ol>
<!-- 属性选择器包含属性选中 -->
<li demo>测试案例1描述:存在独立属性,我的颜色是红色的</li>
<!-- 属性等于某个值选中 -->
<li class="test2">测试案例2描述:属性等于某个值,我的颜色是天蓝色的</li>
<li class="test2">测试案例2描述:属性等于某个值,我的颜色是天蓝色的</li>
<!-- 匹配属性值开头选中 -->
<li class="t3-12">测试案例3,描述:属性的值匹配开头,我的颜色是蓝色</li>
<li class="t3demo">测试案例3,描述:属性的值匹配开头,我的颜色是蓝色</li>
<!-- 匹配属性值结尾选中 -->
<li class="tuu-demo4">测试案例4,描述:属性的值匹配结尾,我的颜色是蓝色</li>
<li class="tuuyingdemo4">测试案例4,描述:属性的值匹配结尾,我的颜色是蓝色</li>
<!-- 匹配属性值中包含的所有元素 -->
<li fd="hsssd">1</li>
<li fd="sss213we">2</li>
<li fd="wewe-sss">3</li>
</ol>
</body>
</html>
css3中属性选择器测试
于 2022-03-18 11:21:26 首次发布