当前位置： 首页 > backend >正文

css样式中的选择器和盒子模型

backend 2025/7/18 21:49:11

目录

  • 一、行内样式
  • 二、内部样式
  • 三、外部样式
  • 四、结合选择器
  • 五、属性选择器
  • 六、包含选择器
  • 七、子选择器
  • 八、兄弟选择器
  • 九、选择器组合
  • 十、伪元素选择器
  • 十一、伪类选择器
  • 十二、盒子模型

相关文章

  • 学习标签、属性、选择器和外部加样式
  • 积累CSS样式属性：padding、margin、display:flex、font、position、cursor、:hover、:nth-child()、border-radius

一、行内样式

  • 在html文件中，直接加在元素标签后面
  • 缺点：耦合度太高

基本格式

<元素 style="属性1:属性值1;属性2:属性值2"></元素>

示例

<body><div style="color: red;background: blue;">demo</div><div style="color: red;background: blue;">demo</div><div style="color: red;background: blue;">demo</div>
</body>

效果图：
行内样式

二、内部样式

  • 在<head></head>中写内部样式
  • 写在<style>标签里
  • 需要使用选择器

基本格式

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>选择器{属性1:属性值1;属性2:属性值2;}</style>
</head>

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{background: blue;color: red;}</style>
</head>
<body><div>demo</div><div>demo</div><p>标签</p><p>标签</p><p>标签</p>
</body>
</html>

效果图：
内部样式

三、外部样式

  • 在css文件中写样式
  • 在<head></head>中写外部样式的地址，写相对应的css文件地址
  • 使用<link>标签链接

基本格式

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css文件地址">
</head>

选择器{属性1:属性值1;属性2:属性值2;
}

<link>标签的属性

  • rel：角色
    • stylesheet：样式单
  • href：写css文件地址
    • 使用相对路径

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="../css/css选择器.css">
</head>
<body><div>demo</div><div>demo</div><p>标签</p><p>标签</p><p>标签</p>
</body>
</html>

p{background: gold;color: red;
}

效果图：
外部样式

三种样式可以相互合作。
相互合作中，如果样式相同，但是属性值不同，会按照优先级高的执行。
三种样式的优先级：行内样式>内部样式=外部样式
示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{background: blue;color: red;}</style><link rel="stylesheet" href="../css/css选择器.css">
</head>
<body><div>demo</div><div>demo</div><p style="background: gold;color: green;">标签</p><p>标签</p><p>标签</p>
</body>
</html>

div{background: gold;color: red;
}

效果图：
样式
可以从上面代码中看出：行内样式和内部样式有些冲突，根据优先级高的先执行，所有先执行行内样式，在执行其他的样式。

通用选择器、元素选择器、class选择器、id选择器可以查看学习标签、属性、选择器和外部加样式的相关内容。
选择器写的越长（越准确），优先级越高。
id选择器>class选择器>元素选择器
优先级相同，css按照diamagnetic顺序执行
特殊场景不适用自行测试

四、结合选择器

  • 两个选择器紧紧的挨在一起，中间没有空格
  • 注意：不能两个元素选择器使用

基本格式

选择器1选择器2{属性1:属性值1;属性2:属性值2;属性3:属性值3;
}

示例

<body><div class="aa">demo</div><div>demo</div><div>demo</div><p class="aa">标签</p><p>标签</p><p>标签</p>
</body>

div.aa{background: gold;color: red;
}
/* 只找div元素并且是.aa的选择器的元素，进行样式添加 */

效果图：
结合选择器

五、属性选择器

  • 可以针对任何属性
  • 使用中括号[]

属性选择器的类型

  • 根据属性添加：[属性]
  • 根据属性值添加：[属性=属性值]
  • 根据属性值开头添加：[属性^=属性值]
  • 根据属性值结尾添加：[属性$=属性值]
  • 根据属性值包含添加：[属性*=属性值]

根据属性添加

  • 中括号[]中是属性

基本格式

[属性]{属性1:属性值1;属性2:属性值2;属性3:属性值3;
}
示例
<body><div class="aa">demo1</div><div id="demo">demo2</div><div id="aax">demo3</div><p class="aa">标签1</p><p id="aa">标签2</p><p id="xaa">标签3</p>
</body>

[id]{background: gold;color: red;
}
/* 只找有id属性的元素，进行样式添加 */

效果图：
属性选择器

根据属性值添加

  • 中括号[]中是属性=属性值，是跟随在元素后面属性和属性值

基本格式

[属性=属性值]{属性1:属性值1;属性2:属性值2;属性3:属性值3;
}
示例
<body><div class="aa">demo1</div><div id="demo">demo2</div><div id="aax">demo3</div><p class="aa">标签1</p><p id="aa">标签2</p><p id="xaa">标签3</p>
</body>

[id=demo]{background: gold;color: red;
}
/* 只找属性是id，且属性值是demo的元素，进行样式添加 */

效果图：
属性选择器2

根据属性值开头添加

  • 中括号[]中是属性^=属性值，是跟随在元素后面属性和属性值

基本格式

[属性^=属性值]{属性1:属性值1;属性2:属性值2;属性3:属性值3;
}
示例
<body><div class="aa">demo1</div><div id="demo">demo2</div><div id="aax">demo3</div><p class="aa">标签1</p><p id="aa">标签2</p><p id="xaa">标签3</p>
</body>

[id^=aa]{background: gold;color: red;
}
/* 只找属性是id，且属性值以aa开头的元素，进行样式添加 */

效果图：
属性选择器3

根据属性值结尾添加

  • 中括号[]中是属性$=属性值，是跟随在元素后面属性和属性值

基本格式

[属性$=属性值]{属性1:属性值1;属性2:属性值2;属性3:属性值3;
}
示例
<body><div class="aa">demo1</div><div id="demo">demo2</div><div id="aax">demo3</div><p class="aa">标签1</p><p id="aa">标签2</p><p id="xaa">标签3</p>
</body>

[id$=aa]{background: gold;color: red;
}
/* 只找属性是id，且属性值以aa结尾的元素，进行样式添加 */

效果图：
属性选择器4

根据属性值包含添加

  • 中括号[]中是属性*=属性值，是跟随在元素后面属性和属性值

基本格式

[属性*=属性值]{属性1:属性值1;属性2:属性值2;属性3:属性值3;
}
示例
<body><div class="aa">demo1</div><div id="demo">demo2</div><div id="aax">demo3</div><p class="aa">标签1</p><p id="aa">标签2</p><p id="xaa">标签3</p>
</body>

[id*=aa]{background: gold;color: red;
}
/* 只找属性是id，且属性值只要包含aa的元素，进行样式添加 */

效果图：
属性选择器5

六、包含选择器

  • 两个选择器之间有空格
  • 在符合选择器1元素的后代中找符合选择器2的元素
  • 后代中不光是‘儿子’，‘孙子’等后辈也会被找到

基本格式

选择器1 选择器2{属性1:属性值1;属性2:属性值2;属性3:属性值3;
}

示例

<body><div class="container"><p>demo</p></div><div class="demo"><p>标签</p></div>
</body>

.container p{background: gold;color: red;
}

效果图：
包含选择器

七、子选择器

  • 两个选择器之间使用的是>
  • 在符合选择器1元素的子元素中找符合选择器2的元素

基本格式

选择器1>选择器2{属性1:属性值1;属性2:属性值2;属性3:属性值3;
}

示例

<body><div class="container"><p>demo</p><div class="demo"><p>标签</p></div></div>
</body>

.container>p{background: gold;color: red;
}

效果图：
子选择器

八、兄弟选择器

  • 两个选择器之间使用的是~
  • 在符合选择器1元素的弟弟中找符合选择器2的元素
  • 选择器1与选择器2拥有同一个父级

基本格式

选择器1~选择器2{属性1:属性值1;属性2:属性值2;属性3:属性值3;
}

示例

<body><div class="container"><p>demo</p><p class="aa">demo</p><p>demo</p><span>xxx</span><br><span>xxx</span><p>demo</p></div>
</body>

.aa~span{background: gold;color: red;
}

效果图：
兄弟选择器

九、选择器组合

  • 两个选择器之间使用的是逗号,
  • 在符合选择器1元素的或者符合选择器2的元素

基本格式

选择器1,选择器2{属性1:属性值1;属性2:属性值2;属性3:属性值3;
}

示例

<body><div class="container"><p>demo</p><p class="aa">demo</p><p>demo</p><span>xxx</span><br><span>xxx</span><p>demo</p></div>
</body>

p,span{background: gold;color: red;
}

效果图：
选择器组合

十、伪元素选择器

  • 在html中没有添加，但是根据伪元素选择器进行添加
  • 不能设置宽高

伪元素选择器的类型

  • 元素后追加：::after
  • 元素前追加：::before
  • 内容中首字母加样式：::first-letter
  • 内容中首行母加样式：::first-line

元素后追加：::after

基本格式

选择器::after{content: "";属性1: 属性值1;属性2: 属性值2;
}
示例
<body><div>demo</div>
</body>

div::after{content: "xxx";background: gold;color: red;
}

效果图：
元素后追加

元素前追加：::before

基本格式

选择器::before{content: "";属性1: 属性值1;属性2: 属性值2;
}
示例
<body><div>demo</div>
</body>

div::before{content: "xxx";background: gold;color: red;
}

效果图：
元素前追加

内容中首字母加样式：::first-letter

  • 只能用在第一个字母
  • 只适用于块级元素，能够对宽高识别的元素

基本格式

选择器::first-letter{属性1: 属性值1;属性2: 属性值2;
}
示例
<body><div>demo</div>
</body>

div::first-letter{font-size: 20px;color: red;
}

效果图：
首字母加样式

内容中首行母加样式：::first-line

  • 首行的样式会随着浏览器窗口的缩放而变化
  • 只适用于块级元素，能够对宽高识别的元素
  • 如果是英文，要么空格，要么中间加~，使用work-break：break-all英文会断开

基本格式

选择器::first-line{属性1: 属性值1;属性2: 属性值2;
}
示例
<body><div>demo首行效果首行效果首行效果首行效果首行效果首行效果首行效果首行效果首行效果首行效果首行效果</div>
</body>

div::first-line{font-size: 20px;color: red;
}

效果图：
首行加样式

十一、伪类选择器

  • 结构性伪类选择器
  • UI元素状态伪类选择器
  • 其他伪类选择器

结构性伪类选择器

伪类选择器类型基本格式顺序
:nth-child()选择器:nth-child(){属性1: 属性值1;}正着数只认数字，不认类型
:first-child第一个选择器:first-child{属性1: 属性值1;}正着数的第一个只认数字，不认类型
:last-child最后一个选择器:last-child{属性1: 属性值1;}正着数的最后一个只认数字，不认类型
:nth-last-child()选择器:nth-last-child(){属性1: 属性值1;}倒着数只认数字，不认类型
:nth-of-type()选择器:nth-of-type(){属性1: 属性值1;}正着数同类型下的某个元素
:first-of-type第一个选择器:first-of-type{属性1: 属性值1;}正着数的第一个同类型下的某个元素
:last-of-type最后一个选择器:last-of-type{属性1: 属性值1;}正着数的最后一个同类型下的某个元素
:nth-last-of-type()最后一个选择器:nth-last-of-type(){属性1: 属性值1;}倒着数同类型下的某个元素

括号中可以写的参数：

  • 数值：从一开始
  • odd：奇数个，even：偶数个
  • 表达式：3n+1，2n+4，需要有规律

示例1

<body><ul><li>demo1</li><li>demo2</li><li>demo3</li><li>demo4</li><li>demo5</li></ul>
</body>

ul li:nth-child(3){background: gold;color: red;
}

效果图：
nth1

示例2

<body><ul><div>demo</div><li>demo1</li><li>demo2</li><li>demo3</li><li>demo4</li><li>demo5</li></ul>
</body>

ul li:nth-of-type(){background: gold;color: red;
}

效果图：
nth-of

UI元素状态伪类选择器

类型
:hover鼠标悬停状态
:checked选中状态
:focus焦点状态

示例

<body><ul><div>demo</div><li>demo1</li><li>demo2</li><li>demo3</li><li>demo4</li><li>demo5</li></ul>
</body>

li:hover{font-size: 15px;background: gold;color: red;
}

效果图：
hover

其他伪类选择器

:not()排除选择器

示例

<body><ul><li>demo1</li><li class="aa">demo2</li><li>demo3</li><li class="aa">demo4</li><li class="bb">demo5</li></ul>
</body>

li:not(.aa):not(.bb){font-size: 15px;background: gold;color: red;
}

效果图：
排除选择器

十二、盒子模型

  • 块级元素：独占一行，对宽高支持
  • 内联级元素：不独占一行，对换宽高不支持
  • 内联块级元素：不独占一行，对宽高支持

修改对宽高的支持：

  • display:inline：修改为内联级元素
  • display:block：修改为块级元素
  • display:inline-block：修改为内联块级元素

弹性盒子

还可以查看积累CSS样式属性：padding、margin、display:flex、font、position、cursor、:hover、:nth-child()、border-radius的相关内容。

  • 如果一个元素是弹性盒子，那么子元素默认始终横向布局。
  • 使用的是dispay:flex

盒子结构

盒子组成
有里往外设置

border：复合属性

  • border-color：边框的颜色
  • border-width：边框的宽度
  • border-style：边框的样式
    注意： 这三个一个都不能少，否则，设置不成边框。

简写

border:plum dotted 5px;/* 不分先后顺序 */

方位词

  • border-top：上边框的设置
  • border-bottom：下边框的设置
  • border-left：左边框的设置
  • border-right：右边框的设置
http://www.xdnf.cn/news/15651.html

相关文章：

  • 《汇编语言：基于X86处理器》第8章 高级过程（2）
  • QT跨平台应用程序开发框架（10）—— Qt窗口
  • PyCharm 高效入门指南（引言 + 核心模块详解）
  • C++拷贝构造
  • 【数据结构】栈和队列
  • 李宏毅《生成式人工智能导论》 | 第15讲-第18讲：生成的策略-影像有关的生成式AI
  • 【读论文】AgentOrchestra 解读：LLM 智能体学会「团队协作」去解决复杂任务
  • 河南萌新联赛2025第一场-河南工业大学
  • Python--plist文件的读取
  • 【Linux】LVS（Linux virual server）
  • python-字典、集合、序列切片、字符串操作（笔记）
  • 大型语言模型的白日梦循环
  • Git简介与特点：从Linux到分布式版本控制的革命
  • Python 网络爬虫 —— 代理服务器
  • github不能访问怎么办
  • echart设置trigger: ‘axis‘不显示hover效果
  • C 语言基础第 08 天：数组与冒泡排序
  • HTTPS的工作原理及DNS的工作过程
  • 相位中心偏置天线的SAR动目标检测
  • 基于Echarts的气象数据可视化网站系统的设计与实现（Python版）
  • 【LeetCode 热题 100】108. 将有序数组转换为二叉搜索树
  • Git 多人协作实战：从基础操作到分支管理全流程记录
  • 深入了解linux系统—— 信号的捕捉
  • 如何将 ONLYOFFICE 文档集成到使用 Laravel 框架编写的 PHP 网络应用程序中
  • Nginx/OpenResty HTTP 请求处理阶段与 Lua 实践全解20250717
  • Java 大视界 -- Java 大数据在智能交通智能公交站台乘客流量预测与服务优化中的应用（349）
  • Zabbix 分布式监控系统架构设计与优化
  • iOS 构建配置与 AdHoc 打包说明
  • Spring Boot整合阿里云OSS企业级实践：高可用文件存储解决方案
  • 川翔云电脑：云端算力新标杆，创作自由无边界