CSS选择器

最新推荐文章于 2024-09-29 21:43:16 发布

相约天涯海角

最新推荐文章于 2024-09-29 21:43:16 发布

阅读量154

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_33172851/article/details/142617323

版权

1. 属性选择器

input[value]{}

属性说明：

input 元素(input, div, span …)
value 属性(class,type,id …)

代码示例：

div[class] {
	color: red;
}

<div class="ceshi" id="abc">123</div>

2. 属性等于值选择器

格式说明：

input[class="name"]{

}

属性说明：

input元素（div、p、span等）
属性type=“text” 元素中设置的属性；

代码实例：

input[class=name]::placeholder {
	color: red;
}

<input class="name">

3. 值以某些字母开头

格式说明：

input[class$=icon]

属性说明：

属性中class等于icon结尾的input元素

4. 值以val开头的元素

格式说明：

input[class*=icon]

属性说明：

属性中class等于icon开头的input元素

注意:

元素选择器的权重是1，
[]选择器权是10
类选择其权重是10

代码实例：

 <style>
div {
	height: 100px;
	width: 100px;
	border: solid 1px;
	margin: -1px;
}

div[class=abc1ab] {
	background-color: aqua;
}

div[class$=abc] {
	background-color: bisque;
}

div[class*=abc] {
	color: red;
}
</style>


<body>
	<div class="abc1ab">1</div>
	<div class="abc2ab">2</div>
	<div class="abc3ab">3</div>
	<div class="abc4abc">4</div>
	<div class="abc5abc">5</div>
</body>