深入理解 CSS 选择器:全面指南

简述:CSS(层叠样式表)选择器是网页设计和开发中至关重要的工具。它们用于选择 HTML 元素并应用样式,使得网页变得美观和具有交互性。这里来记录一下,各种 CSS 选择器及其使用方法。


一. Css各种选择器的权重

!important > 行内式 > id选择器 > 类/伪类/属性选择器 > 标签选择器 > 全局选择器

分别对应:无穷大 > 1000 > 100 > 10 > 1 > 0


二. 选择器类型

🟣⚫ Ⅰ. 基本选择器

1. 通配符选择器

通配符选择器 (*) 用于选择所有元素。

css 复制代码
* {
    margin: 0;
    padding: 0;
}

2. 元素选择器

元素选择器用于选择特定类型的 HTML 元素。

css 复制代码
p {
    color: blue;
}

3. 类选择器

类选择器用于选择具有特定类的元素。类名以 . 开头。

css 复制代码
.intro {
    font-size: 20px;
}

4. ID 选择器

ID 选择器用于选择具有特定 ID 的元素。ID 名以 # 开头。

css 复制代码
#header {
    background-color: grey;
}

🟣⚫ Ⅱ. 组合选择器

1. 后代选择器

后代选择器用于选择某元素的所有后代元素。

css 复制代码
div p {
    color: green;
}

2. 子选择器

子选择器用于选择某元素的直接子元素。

css 复制代码
ul > li {
    list-style-type: none;
}

3. 相邻兄弟选择器

相邻兄弟选择器用于选择紧接在某元素后的兄弟元素。

css 复制代码
h1 + p {
    font-weight: bold;
}

4. 普通兄弟选择器

普通兄弟选择器用于选择某元素后所有的兄弟元素。

css 复制代码
h1 ~ p {
    color: red;
}

🟣⚫ Ⅲ. 属性选择器

1. 存在属性选择器

选择具有某个属性的元素。

css 复制代码
a[href] {
    text-decoration: none;
}

2. 特定属性值选择器

选择具有特定属性值的元素。

css 复制代码
input[type="text"] {
    width: 200px;
}

3. 属性值以特定字符串开头的选择器

选择属性值以特定字符串开头的元素。

css 复制代码
a[href^="https"] {
    color: green;
}

4. 属性值以特定字符串结尾的选择器

选择属性值以特定字符串结尾的元素。

css 复制代码
a[href$=".pdf"] {
    color: red;
}

5. 属性值包含特定字符串的选择器

选择属性值包含特定字符串的元素。

css 复制代码
a[href*="example"] {
    color: blue;
}

🟣⚫ Ⅳ. 伪类选择器

1. 链接伪类选择器

用于选择不同状态下的链接元素。

css 复制代码
a:link {
    color: blue;
}
a:visited {
    color: purple;
}

2. 动态伪类选择器

用于选择鼠标与元素交互时的不同状态。

css 复制代码
a:hover {
    color: red;
}
a:active {
    color: yellow;
}

3. 结构性伪类选择器

用于选择特定结构中的元素。

css 复制代码
p:first-child {
    font-weight: bold;
}
p:last-child {
    font-style: italic;
}
p:nth-child(2) {
    text-decoration: underline;
}

🟣⚫ Ⅴ. 伪元素选择器

1. 首字母伪元素选择器

用于选择元素的首字母。

css 复制代码
p::first-letter {
    font-size: 2em;
    color: red;
}

2. 首行伪元素选择器

用于选择元素的首行。

css 复制代码
p::first-line {
    font-weight: bold;
}

3. 伪内容选择器

用于在元素的内容前后插入内容。

css 复制代码
p::before {
    content: "Note: ";
    font-weight: bold;
}
p::after {
    content: " (end of paragraph)";
}

🟣⚫ Ⅵ. 高级选择器

1. 否定伪类选择器

选择不匹配某选择器的元素。

css 复制代码
input:not([type="submit"]) {
    border: 1px solid black;
}
2. :nth-of-type 选择器

选择属于特定类型的第 N 个元素。

css 复制代码
li:nth-of-type(2) {
    color: green;
}
3. :only-child 选择器

选择父元素中唯一的子元素。

css 复制代码
p:only-child {
    font-size: 20px;
}

🟣⚫ Ⅶ. 组合复杂选择器

你可以组合各种选择器来创建更复杂的选择规则。

css 复制代码
div#content > p.intro::first-line {
    color: blue;
}

三. 所有选择器的类型,文字目录

1. [基本选择器](#1. 基本选择器)

2. 组合选择器

3. 属性选择器

4. 伪类选择器

5. 伪元素选择器

6. 高级选择器

  • 否定伪类选择器
  • [:nth-of-type 选择器](#:nth-of-type 选择器)
  • [:only-child 选择器](#:only-child 选择器)

7. 组合复杂选择器

组合各种选择器,来创建更复杂的选择规则。

相关推荐
街尾杂货店&19 小时前
css word属性
前端·css
Demoncode_y1 天前
前端布局入门:flex、grid 及其他常用布局
前端·css·布局·flex·grid
CoderYanger2 天前
前端基础——HTML练习项目:填写简历信息
前端·css·职场和发展·html
软件技术NINI2 天前
html css js网页制作成品——饮料官网html+css+js 4页网页设计(4页)附源码
javascript·css·html
软件技术NINI2 天前
html css js网页制作成品——HTML+CSS辣条俱乐部网页设计(5页)附源码
javascript·css·html
金梦人生2 天前
Css性能优化
前端·css
写代码的皮筏艇2 天前
CSS属性继承与特殊值
前端·css
我有一棵树2 天前
使用Flex布局实现多行多列,每个列宽度相同
前端·css·html·scss·flex
Light602 天前
像素退场,曲线登场:现代响应式 CSS 全家桶 | 领码课堂
前端·css·响应式设计·css函数·布局系统·相对单位·设计令牌
速易达网络2 天前
Vue3 原生移动应用开发来了
前端·javascript·css