高级选择器复合选择器使用示例

最新推荐文章于 2022-12-21 09:37:00 发布

玖木

最新推荐文章于 2022-12-21 09:37:00 发布

阅读量338

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/qq_46510107/article/details/105206591

版权

高级选择器

标签选择器
类选择器:以class命名的同类标签
id选择器:以name命名的同类标签
id大于 class大于标签

后代：空格表示后代选择器在其下的所有元素:

<div>(父)
	<div>
		<div></div>(孙)
	</div>(子)                (子孙皆为后代皆被选中  为后代选择器)
	<div>
		<div></div>(孙)
	</div>(子)  
</div>

子元素：＞表示子元素选择器

<div>(父)
	<div>
		<div></div>(孙)
	</div>(子)                (子被选中  为子元素选择器)
	<div>
		<div></div>(孙)
	</div>(子)  
</div>

通用兄弟：～

<div>(父)
	<div>
		<div></div>(兄弟2)
	</div>(兄弟1)          (同级为兄弟  同级皆被选中为通用兄弟选择器)
	<div>
		<div></div>(兄弟2)
	</div>(兄弟1)  
</div>

相邻兄弟：+相邻兄弟选择器，只往下选责变色

<div>(父)
	<div>
		<div></div>(兄弟2)
	</div>(兄弟1) 	 (同级为兄弟  同级此元素此类元素之下被选中为相邻兄弟选择器)
	<div>
		<div></div>(兄弟2) 被选中
	</div>(兄弟1)  被选中
</div>

样式优先级：层级大优先相同比系数都相同后来居上

拓展:
cursor：help；设置超链接手势显示

替换元素：img audio video 修改某个属性值呈现效果内容可以被替换
非替换：直接展示内容 p…

样式单位：长度单位为0可以不写单位
px像素相对单位

关注