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

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

news 2025/7/18 10:04:24

目录

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

相关文章

  • 学习标签、属性、选择器和外部加样式
  • 积累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.dtcms.com/a/284816.html

相关文章：

  • JoditEditor编辑与预览模式
  • 电碳表：精准计量每一度电的碳排放
  • Python--plist文件的读取
  • 使用CosyVoice-300M实现零样本语音克隆：Xinference部署与实战
  • nginx代理websocket请求
  • Android设备标识符详解：IMEI、ANDROID_ID与OAID
  • 产品经理如何绘制服务蓝图（Service Blueprint）
  • 企业级AI智能体架构落地：工程化能力设计的全景指南
  • docker重新搭建redis集群
  • ubuntu系统+N卡 | docker compose+ollama+dify
  • ACOUSLIC-AI挑战报告：基于低收入国家盲扫超声数据的胎儿腹围测量|文献速递-医学影像算法文献分享
  • 【LeetCode刷题指南】--数组串联，合并两个有序数组，删除有序数组中的重复项
  • FreeBSD Conda Python3.12下安装GPT4Free（g4f）0.5.7.3版本
  • VR全景园区：开启智慧园区新时代
  • 2025年5大国产ETL工具横向评测
  • 【面板数据】上市公司股价同步性数据集-dta+xlsx（2000-2023年）
  • GX75C数字温度传感器可兼容TMP75C
  • 上标下标 | Unicode 符号
  • 微服务架构：从单体到分布式系统的演进与实践
  • 32位 DMIC 数据 其中高八位为符号位扩展位的理解
  • git merge-base查看某个分支从哪里拉出来的、主main分支上的某个时间之后某人的提交合并到特定分支(使用 cherry-pick 的场景)
  • 研发知识系统选型实战：从 Notion 到 Gitee Wiki 的迭代经验
  • Python中with的作用和用法
  • 前端之HTML学习
  • Python可迭代对象与迭代器详解 - 深入理解Python迭代机制
  • DolphinScheduler 如何高效调度 AnalyticDB on Spark 作业？
  • 【C语言】动态内存管理全解析：malloc、calloc、realloc与free的正确使用
  • AR技术赋能石化巡检：安全高效新引擎
  • linux-SSH
  • 2025年广东食品生产高级证考试题