CSS笔记（一）CSS选择器和组合选择符

最新推荐文章于 2024-11-12 22:56:44 发布

_wand1

最新推荐文章于 2024-11-12 22:56:44 发布

阅读量221

点赞数

分类专栏： web 文章标签： css html 前端 css3

本文链接：https://blog.csdn.net/m0_46743327/article/details/106340171

版权

4 篇文章 0 订阅

订阅专栏

选择器

使用方式：#id名{style}
效果：所有指定id名的元素变为这个样式

html文件：
在这里插入图片描述
css文件：

输出：

在这里插入图片描述

使用方式：.classname{style}
效果：指定class名元素变成该样式

html文件：
在这里插入图片描述 Css文件：
输出：

HTML：
在这里插入图片描述输出

在这里插入图片描述

使用方法： 用空格分隔
作用：	选取某元素的后代元素
解释：如代码，它会选取所有包含于div元素里的p元素，
	无论中间有多少层包含关系，只要p包含于div就被选择

在这里插入图片描述

使用方法： 用>分隔
作用：	选取某元素的直接后代元素
解释：如代码，它会选取直接包含于div元素里的p元素，
	如果中间相隔有别的包含关系，就无法被选择

在这里插入图片描述

使用方法： 用~分隔
作用：	选取某元素之后的所有相邻兄弟元素
解释：如代码，它会选取与div具有同一父元素的所有后面的元素，
	两者必须是同一个父元素，中间不能有别的包含关系

在这里插入图片描述
使用方法：用+分隔
作用：选取某元素之后的第一个相邻兄弟元素
解释：与后继兄弟选择器基本相同，不过只能选择指定元素之后的第一个兄弟元素

关注

专栏目录