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

🌟 前言

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

  • 🤖 洛可可白：个人主页

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

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

  • 🐱 代码获取：bestwishes0203

  • 📷 封面壁纸：洛可可白wallpaper

在这里插入图片描述

文章目录

  • 爆肝两千字！掌握CSS选择器与响应式设计：从基础到高级应用
    • CSS常见选择器
      • 1. 元素选择器（Type Selector）
      • 2. 类选择器（Class Selector）
      • 3. ID选择器
      • 4. 属性选择器
      • 5. 伪类选择器
      • 6. 伪元素选择器
      • 7. 组合器选择器
        • 后代选择器（Descendant Selector）
        • 子代选择器（Child Selector）
        • 相邻兄弟选择器（Adjacent Sibling Selector）
        • 通用兄弟选择器（General Sibling Selector）
      • 8. 否定伪类选择器（Negation Pseudo-class）
      • 9. 属性选择器的进阶用法
        • 属性存在
        • 属性值开头
        • 属性值结尾
        • 属性值包含
    • 使用CSS选择器来实现响应式设计
      • 1. 媒体查询（Media Queries）
      • 2. 弹性布局（Flexbox）
      • 3. 网格布局（CSS Grid）
      • 4. 可伸缩单位（如em、rem、vw、vh）
      • 5. 媒体查询与CSS函数结合
      • 6. 选择器和伪类
    • 🎉 往期精彩回顾

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

CSS常见选择器

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

1. 元素选择器（Type Selector）

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

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

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"的<a>标签将变为绿色 */

5. 伪类选择器

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

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

6. 伪元素选择器

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

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

7. 组合器选择器

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

后代选择器（Descendant Selector）

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

div p { margin-left: 20px; } /* 所有<div>元素内的<p>元素将有左边距 */
子代选择器（Child Selector）

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

ul > li { color: red; } /* 所有<ul>元素的直接子元素<li>将变为红色 */
相邻兄弟选择器（Adjacent Sibling Selector）

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

h2 + p { font-style: italic; } /* 紧跟在<h2>元素后的<p>元素将变为斜体 */
通用兄弟选择器（General Sibling Selector）

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

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

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

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

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

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

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

属性存在
a[href] { text-decoration: none; } /* 所有具有href属性的<a>标签 */
属性值开头
a[href^="http"] { color: blue; } /* 所有href属性以"http"开头的<a>标签 */
属性值结尾
a[href$=".pdf"] { font-weight: bold; } /* 所有href属性以".pdf"结尾的<a>标签 */
属性值包含
a[href*="example"] { background-color: yellow; } /* 所有href属性包含"example"的<a>标签 */

使用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收藏

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/544772.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

计算机网络----计算机网络的基础

计算机网络----计算机网络的基础

目录 一.计算机网络的相关概念 二.计算机网络的功能 三.计算机网络的发展 四.计算机网络的组成 五.计算机网络的分类 六.计算机的性能指标 1.速率 2.带宽 3.吞吐量 4.时延 5.时延带宽积 6.往返时延RTT 7.利用率 七.计算机的分层结构 八.ISO/OSI参考模型 九.OSI…
阅读更多...
【JAVA基础】算法与集合

【JAVA基础】算法与集合

1 查找 1.1 二分查找 public class Main {public static void main(String[] args) throws IOException, CloneNotSupportedException, ParseException { //数组必须有序int[] arr{1,2,4,5,6,24,123};System.out.println(binarySearch(arr,123));//6}public static int bina…
阅读更多...
java数据结构与算法刷题-----LeetCode376. 摆动序列

java数据结构与算法刷题-----LeetCode376. 摆动序列

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 文章目录 1. 贪心2. 动态规划3. 优化版动态规划 1. 贪心 解题思路&#x…
阅读更多...
ArcGIS分享图层数据的最佳方法

ArcGIS分享图层数据的最佳方法

在工作中&#xff0c;经常需要将图层数据分享给其他人。 如下图所示&#xff0c;需要分享的是【CJDCQ】和【GHDLTB】&#xff0c;图层带有符号系统&#xff1a; 一、分享gdb数据库及lyr文件 分享数据自然要找到源数据&#xff1a; 但是&#xff0c;gdb数据是不带符号系统的&a…
阅读更多...
接口幂等性问题和常见解决方案

接口幂等性问题和常见解决方案

接口幂等性问题和常见解决方案 1.什么是接口幂等性问题1.1 会产生接口幂等性的问题1.2 解决思路 2.接口幂等性的解决方案2.1 唯一索引解决方案2.2 乐观锁解决方案2.3 分布式锁解决方案2.4 Token解决方案(最优方案) 1.什么是接口幂等性问题 幂等性: 用户同一操作发起的一次或多…
阅读更多...
JMeter 面试题及答案整理，最新面试题

JMeter 面试题及答案整理，最新面试题

JMeter中如何进行性能测试的规划和设计&#xff1f; 进行JMeter性能测试的规划和设计主要遵循以下几个步骤&#xff1a; 1、确定测试目标&#xff1a; 明确性能测试的目的和目标&#xff0c;比如确定要测试的系统性能指标&#xff08;如响应时间、吞吐量、并发用户数等&#…
阅读更多...
html编辑器

html编辑器

HTML 编辑器推荐 html可以使用记事本编辑 但是更建议使用专业的 HTML 编辑器来编辑 HTML&#xff0c;我在这里给大家推荐几款常用的编辑器&#xff1a; VS Code&#xff1a;https://code.visualstudio.com/WebStorm: https://www.jetbrains.com/webstorm/Notepad: https://no…
阅读更多...
Golang协程详解

Golang协程详解

一.协程的引入 1.通过案例文章引入并发,协程概念 见:[go学习笔记.第十四章.协程和管道] 1.协程的引入,调度模型&#xff0c;协程资源竞争问题 通过上面文章可以总结出Go并发编程原理: 在一个处理进程中通过关键字 go 启用多个协程&#xff0c;然后在不同的协程中完成不同的子任…
阅读更多...
紫色星空月亮404网页模板源码

紫色星空月亮404网页模板源码

紫色星空月亮404网页模板源码&#xff0c;源码由HTMLCSSJS组成&#xff0c;记事本打开源码文件可以进行内容文字之类的修改&#xff0c;双击html文件可以本地运行效果&#xff0c;也可以上传到服务器里面 源码下载 紫色星空月亮404网页模板源码
阅读更多...
【网络】负载均衡

【网络】负载均衡

OSI模型每一层的负载均衡 在OSI模型中&#xff0c;每一层的负载均衡具体如下&#xff1a; 1. 第二层&#xff08;数据链路层&#xff09;&#xff1a;数据链路层的负载均衡通常涉及对MAC地址的操作。在这一层&#xff0c;可以使用虚拟MAC地址技术&#xff0c;外部设备对虚拟MA…
阅读更多...
专升本 C语言笔记-07 逗号运算符

专升本 C语言笔记-07 逗号运算符

1.逗号表达式的用法 就是用逗号隔开的多个表达式。逗号表达式&#xff0c;从左向右依次执行。 2.逗号表达式的特性 2.1.当没有括号时&#xff0c;第一个表达式为整个表达式的值。 代码 int x 3,y 5,a 0; a x,y; printf("a %d",a); 说明:因为逗号优先级最低,会…
阅读更多...
火车订票管理系统|基于springboot框架+ Mysql+Java+B/S结构的火车订票管理系统设计与实现(可运行源码+数据库+设计文档)

火车订票管理系统|基于springboot框架+ Mysql+Java+B/S结构的火车订票管理系统设计与实现(可运行源码+数据库+设计文档)

推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 目录 前台功能效果图 管理员功能登录前台功能效果图 用户功能模块 系统功能设计 数据库E-R图设计 lunwen…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023