踩一下CSS属性选择器有没有坑

[att]

在方括号中放入 属性名 ，选出具有这个属性的元素

[att=val]

选出 属性值为val的元素

[att~=val]

选出 属性值中包含val的元素。属性值用空格分隔（测试中，不以空格分隔，选择器不生效）

[att*=val]

选出 属性值中包含val的元素。

[att|=val]

选出 属性值以val开头的元素（测试中，不以短线分隔，选择器不生效）

[att^=val]

选出 属性值以val开头的元素

[att$=val]

选出 属性值以val结尾的元素

测试一下：

<a href="">疫情数据</a>
<div class="virus-data-wraper">
	<div class="virus-item">
		<div type="num">311</div>
		<div class="text-num">现有确诊</div>
	</div>
	<div class="virus-item">
		<div type="sum num">317</div>
		<div class="textsum">累计确诊</div>
	</div>
	<div class="virusitem">
		<div type="cure-num">200</div>
		<div class="textcure">累计治愈</div>
	</div>
</div>

<style>
	.virus-data-wraper {
		width: 320px;
		padding: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	a[href] {
		line-height: 100px;
		text-decoration: none;
		font-weight: bold;
		font-size: 24px;
		color: black;
		cursor: pointer;
	}
	div[type ~= 'num']{
		padding: 10px;
		font-size: 40px;
		text-align: center;
	}
	div[type *= 'num']{
		color: red;
		text-align: center;
	}
	[class |= 'virus']{
		border: solid 2px green;		
	}
	[class ^= 'text']{
		font-size: 14px;
		color: orange;
		text-align: center;
	}
	[class $='item']{
        background-color: lightgray;
		border-radius: 10px;
	}
</style>

type属性仅为举栗需要，不是最佳实现方式。在实际应用中，主要使用id和class 来选择元素，可读性更好，更容易维护。

以上。