CSS基础

滴蛙蛙

已于 2024-03-21 10:20:14 修改

阅读量938

点赞数 36

文章标签： css 前端

于 2024-03-21 10:17:19 首次发布

本文链接：https://blog.csdn.net/m0_74152480/article/details/136899554

版权

CSS

网页美化

选择器 { 属性: 值 }

h1 {
	color:red;
	font-size:25px;
}

引入方式

行内式

<p style="color: red;">
    段落
</p>

内嵌式

<style>
	p {
    	color: red;
	}
</style>

外链式

创建.css文件: 定义样式

p {
    color: red;
}

创建.html文件: 引入link css文件

<head>
    ...
	<link rel="stylesheet" href="css文件路径">
</head>
<body>
    <p>
        段落
    </p>
</body>

建议书写顺序

在这里插入图片描述

基础选择器

标签选择器

html标签

p {
    color: red;
}
...
<p>hello</p>

类选择器

某class类

.app{
    coler: red;
}
.all {
    font-size:20px
}
...
<div class='app all'>hello</div>

多类名中间用空格分开

id选择器

某id

#head {
    color: red;
}
...
<h1 id='head'>hello</h1>

通配符选择器

所有

* {
    color: red;
}

复合选择器

在基础选择器基础上对基本选择器组合

可以更准确高效选择目标元素

包括: 后代选择器,子选择器,并集选择器,伪选择器…

后代选择器

前辈元素后辈元素 {样式声明}

选择前辈元素中所有后背元素, 并定义样式

<head>
...
    <style>
    ul a {	/*儿子,孙子都变色*/
        color:red;
    }
    /*
    ul li a {	孙子变色
        color:red;
    }
    */   
    </style>

</head>

<body>
    <ul>
        <a>儿子</a>
        <li>儿子</li>
        <li>
            <a>孙子</a>
        </li>
	</ul>
</body>

所有后代关系即可(父子,孙子… )
父子元素可以是任意类型选择器(类选择器,id选择器… )

子元素选择器

父元素>子元素 {样式声明}

与后代选择器不同, 只支持直接后代(父子)

<head>
...
    <style>
    ul>a {	/*儿子变色*/
        color:red;
    }   
    </style>

</head>

<body>
    <ul>
        <a>儿子</a>
        <li>儿子</li>
        <li>
            <a>孙子</a>
        </li>
	</ul>
</body>

并集选择器

标签1,标签2 {样式声明}

div,
.aaa,
ul li {
	color:red;
}

伪类选择器

伪类选择器可以根据元素的状态或位置进行选择

:hover - 当鼠标悬停在元素上时触发。
:active - 当元素被激活（例如被点击）时触发。
:focus - 当元素获取焦点时触发。
:first-child - 选择父元素下的第一个子元素。
:last-child - 选择父元素下的最后一个子元素。
:nth-child(n) - 根据指定规则选择父元素下的第n个子元素。
:nth-of-type(n) - 根据指定规则选择父元素下的第n个指定类型的子元素。
:not(selector) - 排除符合指定选择器的元素。

链接伪类选择器

a:link - 选择所有未被访问的链接
a:visited - 选择所有已被访问的链接
a:hover - 当鼠标悬停在链接上时触发。
a:active - 当链接被激活（例如被点击）时触发。

定义链接伪类选择器时按照LVHA顺序

emmet语法

类似于快捷方式,可快速生成html和css语法,提升编码效率

快速生成html结构语法

生成标签: 标签名加tab键

!加tab

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

生成多个相同标签: 标签名*数

div*3
```
<div></div>
<div></div>
<div></div>
```
父子标签: 父标签> 子标签

ul>li
```
<ul>
    <li></li>
</ul>
```
兄弟标签: 标签1+标签2

div+p
```
<div></div>
<p></p>
```
根据类/id生成: 标签名.类名/#id名

div.demo
```
<div class="demo"></div>
```

自增: 一般搭配*,每次自增1

p.demo$*5

<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>

内容: 标签{内容}

p{段落}*3

<p>段落</p>
<p>段落</p>
<p>段落</p>

快速生成css样式语法

首字母简写

tac
```
text-align: center;
```
w100
```
width: 100px;
```

css特性

层叠性

当给相同div设置多个属性时,

后者会覆盖前者冲突的样式,不冲突不覆盖

div {
    color: red;
    font-size: 12px;
}
div {
    color: pink;
}

此时div样式为:

div {
 color: pink;
 font-size: 12px;
}

继承性

后辈标签会继承前辈标签某些样式

如: text- ,font- ,line- 开头的样式及color(文字相关)

高度,边距等不能继承

优先级

当同一个元素指定多个选择器,就会有优先级

选择器相同,执行层叠性(后者优先)
选择器不同,按选择器权重执行(从轻到重)
- 继承/通配符*: 0,0,0,0
- 元素选择器: 0,0,0,1
  
  div
- 类选择器,伪类选择器: 0,0,1,0
  
  .app / .new:hover
- id选择器: 0,1,0,0
  
  #sub
- 行内样式:1,0,0,0
  
  style=“…”
- !important: 权重无穷大
```
div: {
    color: red!important;
}
...
<div style="color:blue">哈哈</div>
```
  最终颜色为红色

权重叠加

/*权重为0,0,0,1*/
li {
    color: blue;
}
/*ul li权重相加为0,0,0,1+0,0,0,1=0,0,0,2*/
ul li {
    color:red;
}
/*.nav li权重相加为0,0,1,0+0,0,0,1=0,0,1,1*/
.nav li {
    color:pink;
}

权重叠加但不会进位
类似于十进制加减法

字体属性

字体系列

font-family

p {
    /*font-family: '微软雅黑'*/
    font-family: 'Microsoft YaHei'
}

可以写中文,但是最好写英文

字体粗细

font-weight

normal: 正常
bold: 粗体
bolder: 特粗
lighter: 细体
数字(无单位): 100/200/300/400/500/600/700/800/900

400是正常,700是bold

h1 {
    font-weight: 400;
}

字体样式

font-style

italic: 斜体
normal: 正常

字体复合属性

font: font-style font-weight font-size/line-height font-family

body {
    font: italic 700 16px/28px 'Microsoft yahei';
}

不需要设置的属性可以省略不写,但必须保留font-size和font-family,否则font不生效

文字阴影

text-shadow:水平位置垂直位置高斯模糊阴影颜色

text-shadow: 10px 10px 10px rgba(0,0,0,.3)

文本属性

设置文本外观,如颜色,对其文本,装饰文本,文本缩进,行间距

文本颜色

color

颜色

预定义颜色: red,green,blue
16进制: #ff0000
rgb: rgb(255,0,0)或(100%,0%,0%)
rgba: rgb(255,180,100,0.3)前三个参数和rgb一样,最后一个是透明度

对齐文本

text-align

水平对齐方式

left: 左对齐(默认)
right: 右对齐
center: 居中

h1{
    text-align: center;
}

装饰文本

text-decoration

如下划线,删除线,上划线

div{
    text-decoration: underline;
}

none: 无(默认)
underline: 下划线
overline: 上划线
line-through: 删除线

文本缩进

text-indent

控制文本首行缩进

div{
    /*首行缩进10像素*/
    text-indent: 10px;
    /*首行缩进2文字*/
    /*text-indent: 2em;*/
}

单位

px: 像素
em: 相对单位,当前元素1文字大小

行间距

line-height

p {
    line-height: 26px;
}

在这里插入图片描述

背景

背景颜色

background-color:transparent\颜色

transparent: 透明的(默认 )
颜色

背景图片

background-image:none\url(...)

none: 空(默认 )
url(…): 传图片url

div {
	background-image: url(../imgs/1.jpg)
}

图片重复平铺在容器内

背景图片平铺

background-repeat:repeat\no-repeat\repeat-x\repeat-y

repeat: 横向纵向重复平铺(默认 )
no-repeat: 不平铺
repeat-x: 沿x轴平铺
repeat-y: 沿y轴平铺

背景图片和背景颜色可以同时使用

背景图片位置

background-position:x y

x: x轴坐标
y: y轴坐标

div {
    background-image: url(../imgs/1.jpg)
    /*背景水平居中,垂直靠上*/
    background-position:center top;
    /*x坐标20像素,垂直居中*/
    /*background-position:20px*/
}

如果省略x: 默认水平居中
如果省略y: 默认垂直居中

坐标

length: 百分数/浮点数+长度单位(100px)
position: top/center/bottom/left/right

背景图片固定

background-attachment:scroll/fixed

scroll: 背景图象随内容滚动(默认 )
fixed:背景图象固定

背景复合

background:背景颜色 url 平铺滚动位置

无前后顺序

盒子模型

由边框border，外边框margin，内边距padding，内容content组成

在这里插入图片描述

边框

border: border-width||border-style||border-color

由宽度border-width，样式border-style，颜色组成border-color

边框会影响盒子大小

border-style:
- none:无
- solid:实线
- double:双实线
- dotted:点虚线
- dashed:虚线

div {
    width: 300px;
    hight:200px;
    border-width:5px;
    border-style: solid;
    border-color: #fff
}

复合写法

border: border-width||border-style||border-color

border-width||border-style||border-color无先后顺序

div {
    width: 300px;
    hight:200px;
    border:5px solid #fff;
}

边框拆分

可拆分为border-top, border-boottom, border-left, border-right分别操控

div {
    width: 300px;
    hight:200px;
    border:5px solid #fff;
    border-top: 1px solid red;/*层叠覆盖*/
}

合并相邻边框

border-collapse

table,
td {
    border: 2px solid red;
    noder-collapse:collapse;
}

外部table边框为2px,

内部因为td相邻,边框为2px+2px

noder-collapse:collapse;则可以使相邻边框合并

使内部td边框也为2px

内边距

padding

盒子中内容和边框的距离

若给定width和hight内边距会影响盒子大小

内边距拆分

可拆分为padding-top, padding-boottom, padding-left, padding-right分别操控

div {
    width: 300px;
    hight:200px;
    padding-top: 10px;
    padding-left: 15px;
}

复合写法

写法	意思
padding:5px;	上下左右=5px
padding: 5px 10px;	上下=5px,左右=10px
padding: 5px 10px 20px;	上=5,左右=10px,下=20px
padding: 5px 10px 20px 30px;	上,右,下,左(顺时针)

外边距

margin

复合写法同padding

外边距拆分

可拆分为margin-top, margin-boottom, margin-left, margin-right分别操控

水平居中

块级

外边距可以让块级盒子水平居中，但必须满足条件

display: block;(div默认块级)
盒子有宽度width
盒子左右外边距设置为auto

div {
    width:800px;
    margin:0 auto;
}

行内/行内块

给父元素设置text-align: center

.father{
    text-align: center;
}

嵌套块元素垂直外边距塌陷

对于父子块元素，当父子同时都有上外边距时

父元素会塌陷较大的外边距值

子元素没有外边距, 父元素外边距为二者较大的

解决方法

为父元素定义上边框

father {
    margin-top: 50px;
    border: 1px solid transparent;
}

为父元素定义内边距

father {
    margin-top: 50px;
    padding: 1px;
}

为父元素添加overflow:hidden

father {
    margin-top: 50px;
    overflow:hidden;
}

浮动,固定,绝对定位不会塌陷

圆角边框

border-radius:值

值可以是带单位的数也可以是百分比

可以有1~4个值,其对应位置意义同内边距

div {
    border-radius:10px;
}

盒子阴影

box-shadow:水平阴影垂直阴影高斯模糊阴影尺寸阴影颜色内外部

盒子不占空间,不会影响其他盒子排列

内外部包括inset和outset(默认)

但是不能写outset

/*水平10px垂直20px,高斯模糊10px,阴影尺寸10px,颜色黑色0.3透明度,内部*/
demo1 {
    box-shadow:10px 20px 10px 10px rgba(0,0,0,.3) inset; 
}

网页布局

多个块级元素纵向排列用标准流

多个块级元素横向排列用浮动

在这里插入图片描述

标准流

块元素

特点:

独占一行
宽,高,外边距,内边距都可以控制
宽度默认是父的100%
是一个盒子,里面放行内或块元素

文字类元素

不能再放块元素了

行内元素

特点:

相邻行内元素在一行上
宽高直接设置是无效的
默认宽度就是它本身内容宽度
行内元素只能容纳文本或其他行内元素
但里面可以放块级元素

常见行内元素

行内块元素

行内元素中有些特殊标签

同时具有块元素和行内元素特点

常见:

和相邻行内元素在一行上,但他们间回有空白间隙(行内 )
默认宽度就是它本身内容宽度(行内 )
宽,高,外边距,内边距都可以控制(块 )

显示模式转换

当一个模式需要另一个模式特性时

转块元素

display:block

当行内元素a也想要控制长宽时
```
a{
	display: block;
	width: 150px;
	hight: 50px;
}
```
转行内元素

display:inline

当想让div在一行显示(宽高无效 )
```
div {
	display; inline;
}
```
转行内块元素

display:inline-block

浮动

float:none/left/right

用于创建浮动框,将其移动到一边,

直到左边缘或右边缘触及包含块或另一个浮动框边缘

none:元素不浮动(默认)
left:元素向左浮动
right:元素向右浮动

特性

浮动元素不再保留标准流的位置(不占宽高 ),而是浮动到指定位置
浮动的元素会在一行内显示并且元素顶部对齐
浮动的元素有行内块元素特征
- 有宽高
- 一般先给父盒子,在父盒子上浮动
浮动盒子只会影响后面标准流,不影响前面标准流

前面浮动的盒子会压住后面的标准流

清除浮动

由于子级元素个数不确定父级盒子在很多情况下不方便给高度

浮动子元素不占宽高,父元素盒子高度为0,影响下面标准流盒子

清除浮动就是清除浮动元素造成的影响(不遮下面的标准流 )

使父级盒子自动检测并适应浮动盒子高度

清除浮动策略:闭合浮动

闭合浮动

额外标签发/隔墙法

clear:left/right/both
- left: 不允许左侧有浮动元素
- right: 不允许右侧有浮动元素
- both: 不允许两侧有浮动元素
```
<div class="dady">
<div class="son">one</div>
<div class="son">two</div>
<div class="son">three</div>
</div>
<div class="other">hello</div>
```
因浮动子盒子没有宽高,所以标准流父盒子不显示,影响下面other标准流
```
<div class="dady">
<div class="son">one</div>
<div class="son">two</div>
<div class="son">three</div>
<div class="clear"></div>
</div>
<div class="other">hello</div>
```
```
.clear {
clear: both;
}
```
在父盒子里加上空子盒子clear,

定义css属性clear: both;堵住父盒子末尾

清除了浮动带来的影响

该空盒子必须是块级元素
父级添加overflow属性

overflow:hidden/auto/scroll

在父盒子中添加overflow:hidden/auto/scroll任选一也能达到清除浮动效果

但是无法显示父盒子溢出部分
```
.dady {
    margin: auto;
    width: 500px;
    background: #4d4d4d;
    border: 2px #252525;
    /* 2:overflow */
    overflow: auto; 
}
```

父级添加after伪元素

/* 3:伪元素 */
.dady:after {
    content: "";
    display: block;
    clear: both;
}

父级添加双伪元素

.dady:before,
dady:after {
    content: "";
    display: block;
}
dady:after {
    clear: both;
}

定位

定位可以让盒子自由的在某个盒子内移动位置或固定在屏幕中某位置,并且可以压住其他盒子

定位=定位模式+边偏移

定位模式

决定元素定位方式

position:static/relative/absolute/fixed

static

静态定位(默认)/无定位

静态定位按照标准流特性摆放位置,没有边偏移
relative

相对定位是相对于自身原来位置加边偏移移动的

但是原来位置继续占有,后面的的盒子仍以标准流方式对待他(不脱标 )
absolute

绝对定位相对于浏览器/祖先元素偏移

不再占用原来位置(托标 )
1. 当没有父元素或祖先元素是标准流时绝对定位子元素相对于浏览器偏移
2. 当祖先元素有定位(relative/absolute/fixed),则以最近一级有定位祖先元素为参考点移动位置
多数情况用子绝父相

父亲保留原来位置,儿子也能在父亲上自由移动
fixed

固定定位相对于浏览器可视区位置,可在页面滚动时可视位置不变

不随滚动条滚动而改变位置,不占用原来位置(托标 )

若想让固定定位盒子考版心右侧对齐

先left:50%到屏幕中间

在给个margin-left:版心一半像素

边偏移

边偏移就是定位盒子移动到的最终位置

top:顶端偏移量
bottom:底部偏移量
left:左侧偏移量
right:右侧偏移量

显示隐藏

控制元素显示隐藏

display，visibility，overflow(溢出显示隐藏 )

display

display:none/inline/block...

none:隐藏对象,不占用原来位置
block:显示对象

visibility

visibility:inherit/visible/hidden

inherit:继承父
visible:显示对象
hidden:隐藏对象,占用原来位置

overflow

overflow:visible/auto/hidden/scroll

控制溢出部分

visible:不剪切内容也不添加滚动,默认
auto:在需要剪切时添加滚动条

不溢出时不显示滚动条
hidden:不显示超过尺寸的内容
scroll:总是显示滚动条

精灵图

可以有效地减少服务器接收和发送请求的次数, 提高加载效率

将需要向服务器多次请求加载的小图片放到一个大图片

background-position移动盒子中图片背景位置

x轴从左向右,y轴从上到下

.box {
    width:100px;
    height:112px;
    /*往左移动500px下移动200px*/
    background: url(images/demo.png) no-repeat -500px -200px;
}

字体图标

显示网页中通用小图标, 可以控制图标大小和样式, 比精灵图更灵活

iconfont展示图标, 本质属于字体

优点

轻量级: 内存小, 减少了服务器请求
灵活性: 本质是文字,可以随意改变颜色,透明度,阴影,旋转…
兼容性: 几乎支持所有浏览器

使用方法

下载

推荐下载网站:
- icomoon
  
  在icomoon app中勾选图标
  
  点击generate font
  
  点击download
  
  将下载的压缩包解压
- iconfont
引入

将下载的fonts文件夹放到根目录下(与html同级)

打开style.css复制字体声明@font-face{…}

粘贴到html中的

二级菜单

为装二级菜单的div box1设置display:none隐藏

当一级菜单被hover时box1的display:block

.box1 {
    display: none;
    margin-top: 10px;
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: black;
    padding: 10px;
}
.one:hover .box1 {
    display: block;
}

三角

来一个没有大小的div

只设置其边框,四个边框为四个等腰三角

将边框设置为透明transparent,只给其中需要一边颜色

span {
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: black;
}

.box2 {
    width: 0;
    height: 0;
    border-top: 50px solid #f5d858;
    border-right: 50px solid #f4e399;
    border-left: 50px solid #f4e399;
}

在这里插入图片描述

鼠标样式

cursor:default/pointer/move/text/not-allowed

default:默认箭头
pointer:白手套
move:移动十字架
text:文本工字
not-allowed:禁止

细节

文本框取消外边框

当选中文本框时默认会出现外边框可以用outline取消

outline:0或outline:none

防止文本域拖拽

文本域右下角默认有拖拽功能,可用resize

resize:none

图片底部留白

在一个有边框的div中放入一个图片会发现div底部会有一小段留白

原因是因为默认基线对齐

可以给图片加vertical-align:top/middle/bottom

或者使图片变成块级元素display:block

文字环绕

当需要文字环绕图片时

给图片加浮动float:left文字会自动环绕

垂直对齐

vertical-align:baseline/top/middle/bottom

可将行内/行内块元素垂直对齐

baseline:基线对齐默认
top:顶线对齐
middle:中线对齐
bottom:底线对齐

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<img src="../imgs/f1.png" alt="">
中文English
默认子元素与父元素基线对齐

img {
vertical-align: middle;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

溢出文字省略号显示

单行文本溢出

强制一行显示

white-space:nowrap
- nowrap:不换行
- normal:换行默认
超出部分隐藏

overflow:hidden
用省略号代替超出部分

text-overflow:ellipsis

多行文本溢出

有较大兼容性问题,适用于webKit浏览器或移动端移动端大部分是webKit内核

使用弹性盒子布局

display:-webkit-box
设置盒子内元素垂直排列

-webkit-box-orient:vertical
显示两行文本

-webkit-line-clamp:2
隐藏溢出部分

overflow:hidder
用省略号代替溢出部分

text-overflow:ellipsis

css初始化

所有元素内外边距清零

* {
    margin: 0;
    padding: 0
}

取消em和i斜体文字

em,
i {
    font-style: normal
}

取消li的小圆点

li {
    list-style: none
}

取消图片底部留白

img {
    /* 照顾低版本浏览器 */
    border: 0;
    vertical-align: middle
}

按钮小手

button {
    cursor: pointer
}

取消超链接下划线

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

body细节

body {
    /* 抗锯齿 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

unicode编码字体:

黑体\9ed1\4f53
宋体\5b8b\4f53
微软雅黑\5fae\8f6f\96c5\9ed1

清除浮动

解决父元素包含了浮动子元素而导致高度塌陷的问题,参上

高度塌陷（也称为坍塌）:当一个元素的子元素都是浮动元素时，父元素的高度不能自动地根据子元素的高度进行调整，导致父元素的高度变为0或者变得不稳定的情况。

.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

html5新特性

新标签

以前布局都用没有语义的div来做的

<div class="header"></div>
<div class="nav"></div>
<div class="content"></div>
<div class="footer"></div>

html5后新增语义化标签

标签	说明
	头部
	导航
	内容
	定义文档某个区域和 div用法一样
	侧边栏
	尾部
	视频
	音频

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

video

视频

<video src="文件地址" controls="controls"></video>

因为不同浏览器对不同格式视频兼容问题,建议使用较为通用的mp4格式
<video controls width="250">
 /* 不同视频格式 */
<source src="/media/cc0-videos/flower.webm" type="video/webm" />
<source src="/media/cc0-videos/flower.mp4" type="video/mp4" />
 您的浏览器不支持<video>标签播放视频

 /* 不同下载源 */
Download the
<a href="/media/cc0-videos/flower.webm">WEBM</a>
or
<a href="/media/cc0-videos/flower.mp4">MP4</a>
video.
</video>
先用webm格式视频打开,

不支持webm再用mp4格式打开

都不行就显示"您的浏览器不支持标签播放视频"

属性

autoplay:自动播放

布尔值

声明该属性后，视频会尽快自动开始播放，不会停下来等待数据全部加载完成
muted:静音

布尔值默认 f
controls:视频控制面板

控制面板可以控制视频的播放，包括音量，跨帧，暂停/恢复播放
loop:循环播放

布尔值
poster:加载等待图片

在视频播放前显示加载等待图片,替换黑屏
preload:预加载
- none:不预加载
- metadata:仅预先获取视频源数据
- auto:预加载整个视频

audio

音频

<audio src="文件地址" controls="controls"></audio>

一般浏览器都支持mp3格式

属性

autoplay:自动播放

布尔值默认 f
controls:音频控制面板

包含声音，播放进度，播放暂停
loop:循环播放

布尔值

新input类型

增加type值限制用户输入,明确input要输入的是什么


email	email
url	url
date	日期
time	时间
month	月
week	周
number	数字
color	生成一个颜色选择表单
search	搜索

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

新表单属性

属性	值	说明
required	required	表单不能为空
placeholder	提示文本	表单提示文字，默认不显示
autofocus	autofocus	页面加载完成自动聚焦指定表单
autocomplete	off/on	浏览器显示之前提交成功的值
multiple	multiple	可选多个文件

<input type="email" required="required" placeholder="请输入email" autofocus="autofocus">

css3新特性

新属性选择器

选择器	说明
元素[属性]	选择有"属性"的"元素"
元素[属性=“值”]	选择"属性"为"值"的元素
元素[属性^=“值”]	匹配"属性"以"值"开头的"元素"
元素[属性$=“值”]	匹配"属性"以"值"结尾的"元素"
元素[属性*=“值”]	匹配"属性"含有"值"的元素

结构伪选择器

根据文档结构来选择元素,常用于根据父元素选中其中子元素

选择符	说明
元素:first-child	选择父元素的第一个子元素
元素:last-child	选择父元素的最后一个子元素
元素:nth-child(n)	选择父元素的第n个子元素
元素:first-of-type	选择指定类型的第一个
元素:last-of-type	选择指定类型的最后一个
元素:nth-of-type	选择指定类型的第n个

ul li:first-child{
    background-color:black;
}

选择ul中第一个li

其中li可以省略

ul :first-child

元素:nth-child(n)

其中参数n可以是整数或关键字或公式
- 数字:从1开始
- 关键字:even偶数,odd奇数
- 公式:关于n的公式,n从0开始每次+1( 超出部分不显示 )
```
ol :nth-child(2n){
    background-color:black;
}
```
元素:nth-of-type(n)

类型为子"元素"类型的第n个

若父元素ul的子元素有li和ol

ul li:nth-of-type(2)表示选择子元素li的第二个