CSS学习选择器

qq_53302633

已于 2024-08-27 10:29:11 修改

阅读量282

点赞数 5

文章标签： css 学习前端

于 2024-08-21 14:01:36 首次发布

本文链接：https://blog.csdn.net/qq_53302633/article/details/141390128

版权

文章目录

通配选择器

*{

}

选中所有的html元素，清除样式会很有用

类选择器

用来选中特定类名，使用频率最高

.speak {
	color:red;
}
.anwser{
	font-size=40px;
}
<body>
	<p class="speak">nhao</p>
</body>

一个标签只能写一个class,但是一个class可以有多个属性,用空格做分隔

<body>
	<p class="speak anwser">nhao</p>
</body>

class的属性值不可以是中文，不可以全是数字，可以使用-例如left-menu

id选择器

选中特定元素

#earthy {

}
<body>
	<p id="earthy" class="speak">nhao</p>
</body>

id不能是数字开头

交集选择器

.beauty{
}
p.beauty#wc{
}

第2个的意思是说查找元素为p的且类名为beauty,标签为wc,通常不需要id因为id已经是唯一的了，像身份证一样。
正常来说就是标签名加类名

并集选择器

.rich，
.beauty,
.pig {
	color:red;
}

意思是以上三类都加了相同的样式
用于集体声明，缩小样表体积
任何形式的选择器都可以作为并集选择器的一部分

后代选择器

ul li {

}
.beayty li .rich {

}

代表ul标签中的li
选中指定元素的后代元素
可以是任何选择器

子代选择器

选择器1>选择器2

兄弟选择器

div+p{

}
div~p{
}

与div紧紧相连的p元素
与div同级的所有p元素

属性选择器

<style>
	[title] {
		color: ewd;
		}
	[title="tu"] {
		color: ewd;
		}
	[title^="a"] { 属性值以a开头
		color: ewd;
		}	
	[title$="a"] { 属性值以a结尾
		color: ewd;
		}
	[title*="a"] { 属性值含a
		color: ewd;
		}
</style>
<body>
	<div title="at">asd</div>
</body>