CSS选择器

hyh2023090208

于 2024-10-08 21:18:06 发布

阅读量307

点赞数 12

文章标签： css 前端

本文链接：https://blog.csdn.net/qy_hell/article/details/142769483

版权

前言

CSS选择器用于匹配HTML中的元素，并为其添加样式。掌握各种选择器能让你更灵活地控制网页设计。

一. 基础选择器

1.类型选择器：直接匹配HTML标记，如：div, p。
2.ID选择器：匹配指定ID的唯一元素，如：#uniqueId。
3.类选择器：匹配具有某类名的一个或多个元素，如：.className。
4.通用选择器：匹配任何类型的元素，如：*。

二. 组合选择器

1.后代选择器：选择某个元素内部的所有子元素及后代元素，如：body p会选择<body>内所有的<p>标签。
2.子元素选择器：只选择作为其父级的直接孩子元素，如：ul > li。
3.相邻兄弟选择器：匹配紧接在另一个元素之后的第一个元素，如：h1 + p。
4.通用兄弟选择器：匹配所有后续的兄弟元素，如：h1 ~ p。

三. 属性选择器

根据元素属性及其值进行选择，如：[type=radio]。

四. 结构伪类

如first-child, last-child, nth-child(n), only-child。

五.伪类

描述元素的状态，如hover, active, focus.

示例代码

/* 基础选择器 */
body { background-color: #f5f5f5; }
#header { padding: 20px; }
.content { font-family: Arial, sans-serif; }

/* 组合选择器 */
.container > div { margin-bottom: 20px; }
nav a + a { border-left: 1px solid #ddd; }
article ~ aside { float: right; width: 30%; }

/* 属性选择器 */
a[target="_blank"] { color: blue; }
input[type="email"] { border-color: green; }

/* 结构伪类 */
section article:first-child { border-top: none; }
footer ul li:last-child { margin-right: 0; }
aside nav li:nth-child(odd) { background: #eee; }

/* 伪类 */
button:hover { cursor: pointer; }
a:focus { outline: 2px solid yellow; }