CSS之选择器

Posted 2022-03-19 辉小歌

选择器作用: 选择页面上的某一个或者某一类元素
基本选择器：

• 标签选择器： 选择这一类所有的标签 标签
• 类选择器 class: 选择所有class属性一致的标签，跨标签 .类名
• id选择器: 全局唯一。 #id名

优先级是固定的：
id选择器>class选择器>标签选择器

层次选择器

• 后代选择器: 在某个元素的后面,所有的后代都选择

body p
	background: red;

/*body后面的p标签的后代都变色。*/

• 子选择器,只选择一代

body>p
	background: red;

• 相邻兄弟选择器，只有一个相邻(向下)

.cdc+p
	background: red;

/*将类名为cdc的下面的兄弟p标签变色*/

• 通用选择器，当前选中元素的向下的所有兄弟元素

.cdc~p
	background: red;

结构伪类选择器

属性选择器

p[id="123"]

		color: red;

/*将p标签中 id="123" 的变成红色*/


p[id]

		color: red;

/*将p标签中有id属性的变成红色*/

• = 绝对等于
• *= 包含这个元素
• ^= 以这个开头
• $= 以这个结尾