css 选择器

最新推荐文章于 2024-10-02 15:35:50 发布

huihuangdiao

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量70

点赞数

分类专栏：前端技术文章标签： css

本文链接：https://blog.csdn.net/huihuangdiao/article/details/118862270

版权

前端技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS选择器的基本类型，包括通配符选择器、元素选择器、类选择器、ID选择器以及各种扩展选择器。同时，讨论了属性选择器和伪类选择器的使用，如`:hover`、`:active`、`:focus`等，以及在表单元素中的应用。此外，还涵盖了结构性伪类在网页布局中的作用。

摘要由CSDN通过智能技术生成

Css选择器

基本选择器

/* 通配符选择器 - 选择所有元素 */
* {
	margin: 0;
	padding: 0;
	border: none;
}
/* 元素选择器 - 选择body标签 */
body {}
/* 类选择器 - 选择class="box"的元素 */
.box {}
/* id选择器 - 选择id="box"的元素 */
#box {}
/* 后代选择器 - 选择class="box" 里面所有标签为li的元素 */
.box li {}

扩展选择器

/* 子元素选择器 - 选择class="box"里面以及子元素标签为li的元素 */
.box>li {}
/* 相邻兄弟选择器 - 选择class="box"的同级别的下一个div */
.box+div {}
/* 兄弟元素选择器 - 选择class="box"的同级别的所有div */
.box ~ div {}
/* 选择器分组 - 选择class="box"和id="box1"的元素 */
.box, #box1 {}

属性选择器

伪类选择器

常用伪类

/* :target uri 片段标识符 - 从uri取对应的字符串进行元素选择 */
:target {}
/* .box:hover 选择鼠标移入样式 */
.box:hover {}
/* .box:active 选择鼠标点击不放样式 */
.box:active {}
/* a:link 选择超链接未访问时样式 */
a:link {}
/* a:visited 选择超链接访问后样式 */
a:visited {}

表单伪类

/* :enabled 选择表单中启用的元素 */
:enabled {}
/* :disable 选择表单中禁用的元素 */
:disable {}
/* :checked 选择表单中选中的元素 - 针对于单选多选框 */
:checked {
	width: 100px;
	height: 100px;
}
/* :focus 选择表单中获取焦点的元素 */
:focus {}