CSS基础三
复合选择器
由多个基础选择器组合而成，用于准确选择目标标签的选择器。
分类：
- 后代选择器
选择某元素的后代元素
写法：父选择器 子选择器 {CSS属性}，父子选择器空格隔开。
<style>
span {
color: blue;
}
div span{
color: red;
}
div {
text-align: center;
}
</style>- 子代选择器
只选择子代元素，最近的子级
写法：父选择器>子选择器 {CSS属性}，父子选择器使用>隔开。
<style>
div > span {
color: red;
}
</style>- 并集选择器
选中多组标签设置相同样式。
写法：选择器1,选择器2,选择器3 ... 选择器N {CSS属性}，逗号分隔。
<style>
div ,
p ,
span {
color: red;
}
</style>- 交集选择器
选中同时满足多个条件的元素。使用基础选择器和类选择器或id选择器连写，没有分隔。
<style>
p#test {
color: blue;
}
p.red {
color: red;
}
</style>
伪类选择器
表示元素状态，选中元素某个状态设置样式。
需要按照LVHA的顺序书写。
| 选择器 | 作用 |
|---|---|
| :link | 设置访问前属性 |
| :visited | 设置访问后链接属性 |
| :hover | 鼠标悬停状态属性 |
| :active | 点击时(激活)状态属性 |
a:link {
color:blueviolet;
text-decoration: none;
}
a:visited {
color: green;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: orange;
}:hover 选择鼠标悬停状态。
<style>
a:hover {
color: red;
text-decoration: underline;
}
a {
text-decoration: none;
}
.box:hover{
color: blue;
}
</style>CSS三大特性
- 继承性
子级继承父级的文字控制属性(font-size,font-weight...)
子级的样式优先，如果自身标签有属性，则不继承父级属性。
- 层叠性
相同的属性会覆盖，后面的CSS属性覆盖前面的
不同的属性会叠加，不同的CSS属性都会生效。
- 优先级(权重)
不同选择器的权重。
通配符选择器<标签选择器<类选择器<id选择器<行内选择器<!important
选中标签的范围越大，优先级越低
* {
color: blue !important;
}
/* !important添加在CSS属性中，提高到最高权重 */优先级叠加计算：
(行内样式,id选择器个数,类选择器个数,标签选择器个数)
- 从左向右比较个数，同一级的优先级高，个数高则向后比较
- !important权重最高
- 继承权重最低
Emmet写法
HTML:
| 说明 | 标签结构 | Emmet写法 |
|---|---|---|
| 类选择器 | <div class="box"></div> | 标签名.类名 |
| id选择器 | <div id="box"></div> | 标签名#id名 |
| 同级标签 | <div></div><p></p> | div+p |
| 父子级标签 | <div><p></p></div> | div>p |
| 多个相同标签 | span*3 | |
| 有内容的标签 | <div>测试</div> | div{测试} |
CSS:
使用属性名首字母缩写。
多个属性使用+连接。
背景属性
属性：
| 描述 | 属性 |
|---|---|
| 背景颜色 | background-color |
| 背景图片 | background-image |
| 背景图片平铺方式 | background-repeat |
| 背景图片位置 | background-position |
| 背景图片缩放 | background-size |
| 背景图片固定 | background-attachment |
| 背景图片复合属性 | background |
背景图片：
网页中，使用背景图实现装饰性图片效果。
属性名：background-image(bgi)
属性值：url(文件路径)
/* 默认平铺效果(复制)，背景在最底层 */
div {
width: 200px;
height: 200px;
background-image: url(./1.png);
}背景图片平铺方式: 控制背景图片是否平铺
属性名：background-repeat(bgr)
属性值：
| 属性值 | 效果 |
|---|---|
| no-repeat | 不平铺 |
| repeat | 平铺(默认) |
| repeat-x | 水平方向平铺 |
| repeat-y | 垂直方向平铺 |
背景图片位置:
属性名：background-position(bgp)
属性值:
关键字写法:
| 关键字 | 位置 |
|---|---|
| left | 左侧 |
| right | 右侧 |
| center | 居中 |
| top | 顶部 |
| bottom | 底部 |
坐标法：
数字+px,正负都可。
div {
width: 400px;
height: 400px;
background-image: url(./1.png);
background-repeat: no-repeat;
background-color:pink;
background-position: left bottom;
background-position: right top;
background-position: 200px 200px;
}背景图片缩放：
属性名：background-size(bgz)
属性值：
关键字
- cover:等比例缩放背景图片以完全覆盖背景，可能背景图片部分看不见
- contain:等比例缩放背景以完全装入背景区域，可能出现背景空白
百分比表示：根据合作尺寸计算图片大小
数字+单位：400px
背景图片固定：不会随着元素滚动
属性名：background-attachment(bga)
属性值：fixed
<style>
div {
background-image: url(./bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>背景复合属性：
属性名：background
属性值：背景色 背景图 平铺方式 位置 缩放 固定 (不区分顺序，空格隔开)
background: red url(./bg.jpg) center fixed no-repeat;标签显示方式
- 块级元素
独占一行
宽度默认是父级的100%
添加宽高生效
div标签
- 行内元素
一行多个
宽度由内容决定
宽高无效
span标签
- 行内块元素
默认尺寸和内容宽高相关
宽高生效
一行多个
img标签
转换显示模式
属性名：display
属性值：
| 属性值 | 效果 |
|---|---|
| block | 块级 |
| inline-block | 行内块 |
| inline | 行内 |
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
font-family: 楷体;
}
nav {
height: 500px;
background-image: url(./bk.png);
background-repeat: no-repeat;
/* background-size: contain; */
background-position: left 118px;
background-color: #F3F3F4;
text-align: right;
}
h2 {
line-height: 100px;
font-size: 36px;
font-weight: 400;
}
p {
line-height: 40px;
font-size: 20px;
}
div {
text-align: right;
}
a {
height: 40px;
width: 125px;
background-color: #ff6a00;;
color: white;
display: inline-block;
line-height: 40px;
text-decoration: none;
text-align: center;
font-size: 20px;
}
a:hover {
background-color: #ff8c1f;
}
</style>
</head>
<body>
<nav>
<h2>让创造产生价值！</h2>
<p>我们希望小游戏平台可以可以提供无限的可能性，让每一个创作者可以将他们的才华和创意传递给客户。</p>
<div>
<a href="#">我要报名</a>
</div>
</nav>
</body>
</html>
1 游客 2025-03-27 23:39 回复
555
1 游客 2025-03-27 23:38 回复
555YHXkpi8Q') OR 153=(SELECT 153 FROM PG_SLEEP(15))--
1 游客 2025-03-27 23:37 回复
5550'XOR(555*if(now()=sysdate(),sleep(15),0))XOR'Z
1 游客 2025-03-27 23:36 回复
555
1 游客 2025-03-27 23:36 回复
555
1 游客 2025-03-27 23:36 回复
555
1 游客 2025-03-27 23:35 回复
555
1 游客 2025-03-27 23:34 回复
555
1 游客 2025-03-27 23:33 回复
555
@@6biwD 游客 2025-03-27 23:31 回复
555
11RwTvQ3z'; waitfor delay '0:0:15' -- 游客 2025-03-27 23:29 回复
555
1-1; waitfor delay '0:0:15' -- 游客 2025-03-27 23:28 回复
555
1 游客 2025-03-27 23:26 回复
555
1 游客 2025-03-27 23:25 回复
555
1 游客 2025-03-27 23:23 回复
555
1 游客 2025-03-27 23:22 回复
555