前端学习---CSS---CSS 选择器介绍

CSS选择器是CSS中的核心概念，用于选择HTML文档中的元素并为其应用样式。通过选择器，我们可以精确地控制哪些元素应该被赋予特定的样式规则。

1. 基础选择器

基础选择器是CSS中最简单、最常用的选择器，包括元素选择器、类选择器、ID选择器和通配选择器。

① 元素选择器（类型选择器）

直接使用HTML标签名作为选择器，会选择页面中所有该标签的元素。

p{color: blue;}/* 所有<p>段落文本变为蓝色 */

② 类选择器

以点号.开头，后跟类名，选择所有具有该class属性的元素。一个元素可以有多个类，多个元素可以共享同一个类。

.highlight{background-color: yellow;}/* 所有class="highlight"的元素背景变黄 */

③ ID选择器

以井号#开头，后跟ID名，选择具有该ID的唯一元素。ID在页面中应该是唯一的。

#header {font-size: 24px;}/*id="header"的元素字体大小24像素 */

④ 通配选择器

使用星号*，选择页面中所有元素。通常用于全局重置样式，但需谨慎使用，因为会影响所有元素。

*{margin:0;padding:0;}/* 所有元素内外边距清零 */

2. 组合器与复杂选择器

组合器用于表达多个元素之间的关系。

① 后代选择器（空格）

选择某个元素内部的所有（不管层级深度）符合条件的后代元素。

div p{color: red;}/* 所有位于<div>内部的<p>元素，无论嵌套多深 */

② 子选择器（>）

只选择某个元素的直接子元素（第一层）。

ul>li{list-style: square;}/* 只有直接作为<ul>子元素的<li>，不包括更深层嵌套的<li>*/

③ 相邻兄弟选择器（+）

选择紧接在另一个元素后面的第一个兄弟元素。

h2 + p{text-indent: 2em;}/* 紧跟在<h2>后面且同级的第一个<p>*/

④ 通用兄弟选择器（~）

选择某元素后面所有同级的指定兄弟元素。

h2 ~ p{color: gray;}/*<h2>后面的所有同级<p>元素 */

3. 属性选择器

根据元素的属性及其值来选择元素，非常灵活。

模式	说明
[attr]	选择具有attr属性的所有元素
[attr=value]	属性值完全等于value
[attr~=value]	属性值是以空格分隔的单词列表，其中一个正好是value
[attr=value]	属性值等于value或以value-开头（常用于语言子代码）
[attr^=value]	属性值以value开头
[attr$=value]	属性值以value结尾
[attr*=value]	属性值包含value子串

a[target="_blank"]{background-color:#f0f0f0;}/* 所有在新标签页打开的链接 */ img[alt$="风景"]{border: 2px solid green;}/* alt属性以“风景”结尾的图片 */

4. 伪类选择器

伪类用于定义元素的特殊状态，以冒号:开头。

4.1、常用的结构性伪类

:first-child / :last-child / :nth-child(n)：根据元素在其父元素中的位置选择。
:first-of-type / :last-of-type / :nth-of-type(n)：根据元素类型和位置选择。
:root：文档根元素（HTML中即）。

li:first-child{font-weight: bold;}/* 每个父元素中的第一个<li>*/ tr:nth-child(even){background-color:#eee;}/* 表格的偶数行 */

4.2、动态伪类

:link：未访问的链接
:visited：已访问的链接
:hover：鼠标悬停的元素
:active：被激活（点击瞬间）的元素
:focus：获得焦点的元素（如表单输入框）

a:hover{text-decoration: underline;}/* 鼠标悬停时链接加下划线 */ input:focus{border-color: blue;}/* 输入框获得焦点时边框变蓝 */

4.3、其他常用伪类

:not(selector)：否定伪类，选择不符合括号内选择器的元素。
:empty：选择没有任何子元素（包括文本节点）的元素。
:checked：被选中的单选/复选框。
:target：当前URL片段标识符指向的元素。

p:not(.intro){color: gray;}/* 所有class不为"intro"的段落 */

5. 伪元素选择器

伪元素用于选择元素的特定部分，以双冒号::开头（CSS3规范，但单冒号也兼容）。

::before / ::after：在元素内容的前/后插入生成的内容，常与content属性配合。
::first-line：选择块级元素的第一行文本。
::first-letter：选择块级元素的首字母。
::selection：用户选中的文本部分。

blockquote::before{content:"“";font-size: 2em;}/* 在每个<blockquote>内容前插入一个左双引号 */ p::first-line{font-weight: bold;}/* 段落的第一行文字加粗 */

6. 分组选择器

多个选择器可以写在一起，用逗号分隔，表示同时对这些选择器应用相同的样式。

h1, h2, h3{font-family:"Microsoft YaHei", sans-serif;}/* h1、h2、h3使用相同的字体族 */