爆肝两千字！掌握CSS选择器与响应式设计：从基础到高级应用

前言

欢迎来到我的技术小宇宙！ 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。

• 洛可可白：个人主页

• 个人专栏：✅前端技术 ✅后端技术

• 个人博客：洛可可白博客

• 代码获取：bestwishes0203

• 封面壁纸：洛可可白wallpaper

爆肝两千字！掌握CSS选择器与响应式设计：从基础到高级应用

CSS常见选择器

CSS选择器是用来指定HTML文档中哪些元素应该应用特定的样式规则。以下是一些常见的CSS选择器及其用法：

1. 元素选择器（Type Selector）

选择所有特定类型的HTML元素。

p { color: blue; } /* 所有
元素的文本颜色将变为蓝色 */

2. 类选择器（Class Selector）

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

.my-class { font-size: 16px; } /* 所有class为"my-class"的元素将应用此样式 */

3. ID选择器

选择具有特定ID属性的单个元素。

#my-id { background-color: yellow; } /* ID为"my-id"的元素将有黄色背景 */

4. 属性选择器

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

a[target="_blank"] { color: green; } /* 所有target属性为"_blank"的标签将变为绿色 */

5. 伪类选择器

选择处于特定状态的元素，如悬停或聚焦。

a:hover { text-decoration: underline; } /* 鼠标悬停在标签上时，文本将有下划线 */

6. 伪元素选择器

选择元素的特定部分，如第一行或第一字母。

p::first-line { font-weight: bold; } /* 
元素的第一行文本将加粗 */
p::first-letter { font-size: 200%; } /* 
元素的第一个字母将放大 */

7. 组合器选择器

结合使用不同类型的选择器来选择元素。

后代选择器（Descendant Selector）

选择特定元素内部的后代元素。

div p { margin-left: 20px; } /* 所有
元素内的
元素将有左边距 */

子代选择器（Child Selector）

选择特定元素的直接子元素。

ul > li { color: red; } /* 所有
元素的直接子元素
将变为红色 */

相邻兄弟选择器（Adjacent Sibling Selector）

选择紧随特定元素后的兄弟元素。

h2 + p { font-style: italic; } /* 紧跟在
元素后的
元素将变为斜体 */

通用兄弟选择器（General Sibling Selector）

选择特定元素之后的所有兄弟元素。

h2 ~ p { background-color: lightgray; } /* 所有
元素之后的所有
元素将有浅灰色背景 */

8. 否定伪类选择器（Negation Pseudo-class）

选择不符合特定条件的元素。

input:not([type="checkbox"]) { border: 1px solid black; } /* 所有不是类型为"checkbox"的元素将有黑色边框 */

9. 属性选择器的进阶用法

可以更具体地选择具有特定属性值的元素。

属性存在

a[href] { text-decoration: none; } /* 所有具有href属性的标签 */

属性值开头

a[href^="http"] { color: blue; } /* 所有href属性以"http"开头的标签 */

属性值结尾

a[href$=".pdf"] { font-weight: bold; } /* 所有href属性以".pdf"结尾的标签 */

属性值包含

a[href*="example"] { background-color: yellow; } /* 所有href属性包含"example"的标签 */

使用CSS选择器来实现响应式设计

响应式设计是一种网页设计方法，旨在使网站能够适应不同设备和屏幕尺寸。CSS选择器在实现响应式设计中扮演着重要角色，特别是在使用媒体查询（Media Queries）时。以下是如何使用CSS选择器实现响应式设计的一些关键技术：

1. 媒体查询（Media Queries）

媒体查询是CSS3的一个特性，允许您根据设备的特定特征（如宽度、高度、分辨率等）来应用不同的样式规则。

/* 对于宽度小于600px的屏幕 */
@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
  .container {
    width: 100%;
  }
}

/* 对于宽度在600px到900px之间的屏幕 */
@media (min-width: 600px) and (max-width: 900px) {
  body {
    font-size: 16px;
  }
  .container {
    width: 80%;
  }
}

/* 对于宽度大于900px的屏幕 */
@media (min-width: 900px) {
  body {
    font-size: 18px;
  }
  .container {
    width: 70%;
  }
}

2. 弹性布局（Flexbox）

弹性布局是一种CSS3布局模式，它允许容器内的子元素能够伸缩以适应不同屏幕尺寸。

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 100px; /* 每个项目可以根据容器的大小伸缩，但至少保持100px宽 */
}

3. 网格布局（CSS Grid）

CSS Grid是一种强大的布局系统，可以创建复杂的响应式网格布局。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
}

4. 可伸缩单位（如em、rem、vw、vh）

使用相对单位而不是绝对单位，可以使元素的大小根据父元素或视口的大小进行伸缩。

/* 使用em单位，大小相对于父元素的字体大小 */
body {
  font-size: 1em; /* 16px */
  h1 {
    font-size: 2em; /* 32px */
  }
}

/* 使用vw单位，宽度相对于视口宽度 */
.container {
  width: 80vw; /* 视口宽度的80% */
}

5. 媒体查询与CSS函数结合

您可以在媒体查询中使用CSS函数（如minmax()、clamp()等）来创建更复杂的响应式规则。

/* 使用clamp()函数限制字体大小在一定范围内根据视口大小调整 */
body {
  font-size: clamp(1rem, 2vw + 1rem, 2rem);
}

6. 选择器和伪类

使用选择器和伪类（如:hover、:active等）来改变元素在不同设备上的交互状态。

/* 改变按钮在悬停时的背景色 */
.button:hover {
  background-color: blue;
}

/* 改变焦点元素的样式 */
.input:focus {
  border-color: red;
}

往期精彩回顾

在Vue中使用wangeditor创建富文本编辑器的完整指南

• 460阅读 · 13点赞 · 8收藏

Vue项目中使用ECharts构建交互式中国地图的详细指南

• 602阅读 · 12点赞 · 6收藏

米哈游一面前端开发岗面试题，你会做几道?

• 888阅读 · 21点赞 · 15收藏

程序员必备开发工具、程序员必备集成开发环境（IDE）

• 637阅读 · 14点赞 · 8收藏

Linux常用操作命令和服务器硬件基础知识

• 842阅读 · 29点赞 · 9收藏

C语言中大小写字母如何转化

• 818阅读 · 30点赞 · 29收藏

主流开发语言和开发环境、程序员如何选择职业赛道？

• 1015阅读 · 34点赞 · 16收藏

Spring Boot+Vue前后端分离项目如何部署到服务器

• 1053阅读 · 30点赞 · 25收藏

Spring Cloud原理详解、Spring Cloud发展历程

• 1038阅读 · 32点赞 · 9收藏

爬虫基本原理介绍、实现及问题解决、爬虫实战、爬取经典moba游戏英雄列表

• 812阅读 · 22点赞 · 21收藏

前端开发的发展史：框架与技术栈的演变

• 980阅读 · 18点赞 · 12收藏

打字通小游戏制作教程：用HTML5和JavaScript提升打字速度

• 1196阅读 · 31点赞 · 25收藏