Html、CSS 学习 2.0

O_oregou

已于 2024-07-18 15:28:49 修改

阅读量3.1k

点赞数 2

文章标签：学习 web vscode

于 2022-10-22 13:09:47 首次发布

本文链接：https://blog.csdn.net/o_osange/article/details/127421913

版权

文章目录

1.嵌套列表
2.表格标签
- 语义化标签
3.表格属性
4.表单input标签和相关标签
5.表单与标签的组合使用
6.div与span
- div(块)：
- span(内联)：
7.CSS基础语法
- 格式：
- 单位:
- 基本样式:
- CSS注释:
8.内联样式与内部样式
- 内联(行内，行间)样式:
- 内部样式:
- 外部样式:
9.颜色表示法
- 单词表示法：
- 十六进制表示法：
- rgb三原色表示法：
10.CSS中的背景样式
- background-color：背景颜色
- background-image：背景图片
- background-repeat：背景图片的平铺方式
- background-position：背景图片的位置
- background-attachment：背景图随滚动条的移动方式
11.CSS边框样式
- border-style : 边框样式
- border-width : 边框大小
- border-color : 边框颜色
12.CSS文字样式
- font-family : 字体类型
- 衬线体与非衬线体
- 字体大小及粗细样式
13.CSS段落样式
- 文本样式
- 段落样式
14.CSS列表样式
- list-style-type
- list-style-image
- list-style-position
15.CSS复合样式
16.CSS选择器
- ID选择器
- CLASS选择器
- 标签选择器(TAG选择器)
- 群组选择器(分组选择器)
- 通配选择器
- 层次选择器
- 属性选择器
- 伪类选择器
- 结构性伪类选择器

1.嵌套列表

列表之间可以互相嵌套，形成多层级的列表

<ul>
    <li>
        福建省
        <ul>
            <li>福州</li>
            <li>厦门</li>
            <li>三明</li>
        </ul>
    </li>
    <li>
        江苏省
        <ul>
            <li>南京</li>
            <li>苏州</li>
            <li>扬州</li>
        </ul>
    </li>
</ul>

在这里插入图片描述

2.表格标签

<table>(表格):表格的最外层容器
<tr>     (行):定义表格行
<th>         :定义表头
<td>     (列):定义表格单元
<caption>    :定义表格标题
之间有嵌套关系，要符合嵌套规范
    <table>
        <caption>天气预报</caption>
        <tr>
             <th>日期</th>
             <th>天气情况</th>
             <th>出行情况</th>
        </tr>
        <tr>
            <td>2022年10月20日</td>
            <td><img src="./图片/10.20/10.20.png" alt=""width="50"height="50"></td>
            <td>天气晴朗适合出行</td>
        </tr>
        <tr>
            <td>2022年10月21日</td>
            <td><img src="./图片/10.20/10.20.2.png" alt=""width="50"height="50"></td>
            <td>天气凉爽多添衣物</td>
        </tr>
    </table>

在这里插入图片描述

语义化标签

 <tHead>，<tBoyd>，<tFood>

 <table>
    <caption>天气预报</caption>
    <thead>
        <tr>
             <th>日期</th>
             <th>天气情况</th>
             <th>出行情况</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2022年10月20日</td>
            <td><img src="./图片/10.20/10.20.png" alt=""width="50"height="50"></td>
            <td>天气晴朗适合出行</td>
        </tr>   
        <tr>
            <td>2022年10月21日</td>
            <td><img src="./图片/10.20/10.20.2.png" alt=""width="50"height="50"></td>
            <td>天气凉爽多添衣物</td>
        </tr>
        <tr>
            <td>2022年10月21日</td>
            <td><img src="./图片/10.20/10.20.2.png" alt=""width="50"height="50"></td>
            <td>天气凉爽多添衣物</td>
        </tr>
    </tbody>
    <tfoot>
        
    </tfoot>
</table>
注：在一个table中therd和tfoot只能出现一次，但tbody可以出现多次

3.表格属性

border：表格边框 (嵌套在table标签)
cellpadding：单元格内的空间 (嵌套在table标签)
cellspacing：单元格之间的空间 (嵌套在table标签)
rowspan：合并行
colspan：合并列
align：左右对齐方式(left，center，right)
valign：上下对齐方式(top，middle，bottom)

<table border="10" cellpadding="30"cellspacing="10">
    <caption>天气预报</caption>
    <thead>
        <tr>
             <th colspan="2">日期</th>
             <th>天气情况</th>
             <th>出行情况</th>
        </tr>
    </thead>
    <tbody>
        <tr align="left" valign="top">
            <td rowspan="2">2022年10月20日</td>
            <td>白天</td>
            <td><img src="./图片/10.20/10.20.png" alt=""width="50"height="50"></td>
            <td>天气晴朗适合出行</td>
        </tr>   
        <tr valign="bottom">

            <td>夜晚</td>
            <td><img src="./图片/10.20/10.20.png" alt=""width="50"height="50"></td>
            <td>天气晴朗适合出行</td>
        </tr>   
        <tr align="right" valign="bottom">
            <td rowspan="2">2022年10月21日</td>
            <td>白天</td>
            <td><img src="./图片/10.20/10.20.2.png" alt=""width="50"height="50"></td>
            <td>天气凉爽多添衣物</td>
        </tr>
        <tr valign="top">

            <td>夜晚</td>
            <td><img src="./图片/10.20/10.20.2.png" alt=""width="50"height="50"></td>
            <td>天气凉爽多添衣物</td>
        </tr>
    </tbody>
    <tfoot>

    </tfoot>
</table>

在这里插入图片描述

4.表单input标签和相关标签

input标签：
<form>：表单最外层容器
<input>：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。
input（单标签）标签有一个type属性，决定是什么控件。
相关标签：
<textarea> ：多行文本框
<select>、<option> ：下拉菜单
<label> ：辅助表单（增加点击范围）
属性：
placeholder ： 是让框框内显示文字
checked    ： 是让选项一开始就被选中
disabled    ： 是让选项无法被选中
name        ： 使单选框内只能选中一个选项
action      ： 数据提交地址
selected    ： 使下拉菜单某项首先显示
multiple    ： 使其(文件、选项...)可以多选 (ctrl+鼠标左键→单击自主多选)
ontline    	：设置为none则点击后可以去除输入框的黑边

type属性	含义
text	普通的文本属输入框
password	密码输入框
checkbox	复选框
radio	单选框
file	上传文件
submit	提交按钮
reset	重置按钮

<form action="http://www.baidu.com"><!-- 最终提交位置action -->
    <h2>输入框：</h2>
    <input type="text" placeholder="请输入账号">
    <h2>密码框：</h2>
    <input type="password" placeholder="请输入密码">
    <h2>复选框：</h2>
    <input type="checkbox" checked>1号
    <input type="checkbox" checked>2号
    <input type="checkbox" disabled>3号
    <h2>单选框：</h2>
    <input type="radio" name="gender">男
    <input type="radio" name="gender">女
    <h2>上传文件</h2>
    <input type="file">
    <h2>提交按钮和重置按钮</h2>
    <input type="submit">
    <input type="reset">
    <h2>多行文本框</h2>
    <textarea name="" id="" cols="50" rows="10"></textarea>
    <h2>下拉菜单</h2>
    <select name="" id="">
        <option value="">福州</option>
        <option value="">厦门</option>
        <option value="">三明</option>
        <option value=""selected disabled>请选择</option>
    </select>
    <select name="" id="" size="6">
        <option value="">福州</option>
        <option value="">厦门</option>
        <option value="">三明</option>
        <option value=""selected disabled>请选择</option>
    </select>
    <select name="" id="" multiple><!-- ctrl+鼠标左键=多选 -->
        <option value="">福州</option>
        <option value="">厦门</option>
        <option value="">三明</option>
        <option value=""selected disabled>请选择</option>
    </select>
    <br>
    <input type="checkbox" checked id="one"><label for="one">1号</label>
    <input type="checkbox" checked id="two"><label for="two">2号</label>
    <input type="checkbox" disabled id="three"><label for="three">3号</label>
</form>

在这里插入图片描述

5.表单与标签的组合使用

    <form action="">
    <tbody>
        <table border="1" cellpadding="30">
            <tr>
                <td rowspan="4">总体信息</td>
                <td colspan="2" align="center">用户注册</td>

            </tr>
            <tr>

                <td>用户名:</td>
                <td><input type="text" placeholder="请输入用户名"></td>
            </tr>
            <tr>

                <td>密码:</td>
                <td><input type="password" placeholder="请输入密码"></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                <input type="submit">&nbsp;&nbsp;&nbsp;
                <input type="reset">
                </td>
            </tr>
        </table>
    </tbody>
    </form>

在这里插入图片描述

6.div与span

div(块)：

做一个区域划分的块
div全称为division，“分割、分区”的意思，<div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在<div>标签中，<div>中还可以嵌套多层<div>，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。

span(内联)：

对文字进行修饰的，内联
用来修饰文字的，div与span都是没有任何默认的样式，需要配合CSS才行。

<div>
    <h2>
        <a href="http://www.mobiletrain.org/page/html5.html?quanguo=webbdtg=alading=miaoshu=202208357">千锋<span>html5</span>-web大前端培训-好口碑前端培训机构-数万IT人的选择-官方首页</a>
    </h2>
    <a href="http://www.mobiletrain.org/page/html5.html?quanguo=webbdtg=alading=miaoshu=202208357"><img src="./图片/10.23/240552903_1988378445_677626377.jpg" alt=""></a>
    <p>学费优惠：千锋周年庆,web前端学费优惠高达3000,仅限本周内咨询学员
        前端师资：千锋web前端拥有百人教学天团，名副其实前端培训界扛把子
        班型/课程：面授班/线上班/好程序员班供学员选择,课程紧贴企业需求
        14天免费试学300人讲师团队18个城市开班企业项目实战点击咨询
    </p>
        <a href="www.mobiletrain.org">www.mobiletrain.org</a>
</div>
<div>
    <h2>
        <a href="http://www.gov.cn/xinwen/2022-10/21/content_5720555.htm"><span>的二大</span> 团举行第三次会议 持会议_滚动新闻...</a>
    </h2>
    <a href="http://www.gov.cn/xinwen/2022-10/21/content_5720555.htm"><img src="./图片/10.23/QQ图片20221023091619.png" alt=""></a>
    <p>
        新北10月21日电 表会主团2日午人堂举行第三次会议,通过央委员会委员、候补和中央纪律检查选人草),提交各代表...
    </p>
    <a href="http://www.gov.cn/xinwen/2022-10/21/content_5720555.htm">网</a>
</div>

7.CSS基础语法

格式：

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

单位:

px–像素(pixel)、%–百分比(外容器如果是600px，那么50%就是300px)

基本样式:

width、height、background-color

<head>
    <style>
        span{background-color: chartreuse;}
        div{width: 70% ;height: 200px ;background-color: paleturquoise;}
    </style>
</head>
<body>
    <div>div块1</div>
    <span>内联</span>
    <div>div块2</div>
</body>

在这里插入图片描述

CSS注释:

与html一致

8.内联样式与内部样式

内联(行内，行间)样式:

在html标签上添加style属性来实现的

<body>
    <div style="width: 100px;height: 100px ;background-color: aqua ">div块</div>
</body>

内部样式:

在<style>标签内添加的样式
注:内部样式的优点，可以复用代码

<head>
	<style>
		div{width: 100px;height: 100px ;background-color: aqua}
	</style>
</head>
<body>
<div>div块</div>
</body>

外部样式:

引入一个单独的CSS文件，name.css
<link>标签:通过link标签引入外部资源
rel：属性指定资源跟页面的关系
href：属性资源的地址
还有可以使用 @import的方式引入，但是不建议使用

<head>
	<link rel="stylesheet" href="./外部样式.css">
	<!-- <style>@import url(./外部样式.css);</style> -->
</head>
<body>
	<div>div块</div>
</body>

link的rel属性:http://www.w3school.com.cn/tags/att_link_rel.asp
link与@import区别:https://www.cnblogs.com/my–sunshine/p/6872224.html

9.颜色表示法

单词表示法：

red、blue、green、yellow…

<head>
    <style>
		div{background-color: red;}
    </style>
</head>
或是
<div style="background-color: red;">div块1</div>

十六进制表示法：

#000000~#ffffff

<head>
	<style>
		div{background-color: #000000;}
		div{background-color: #ffffff;}
	</style>
</head>
或是
<div style="background-color: #000000;">div块2</div>
<div style="background-color: #ffffff;">div块2</div>

rgb三原色表示法：

rgb(255,255,255); 取值范围0～255

<head>
	<style>
		div{background-color: rgb(5, 7, 9);}
	</style>
</head>
或是
<div style="background-color: rgb(1,55,244);"> </div>

在color里面有个透明颜色叫 transparent

10.CSS中的背景样式

background-color：背景颜色

background-image：背景图片

url(背景地址)
默认：会水平垂直都铺满背景图

background-repeat：背景图片的平铺方式

repeat-x：x轴平铺
repeat-y：y轴平铺
repeat (x，y都进行平铺)
no-repeat (都不平铺)

background-position：背景图片的位置

…px …px；x% y%；单词
x：left，center，right
y：top，center，bottom

background-attachment：背景图随滚动条的移动方式

scroll：默认值（背景位置按照当前元素进行偏移的）
fiexd :(按照浏览器进行偏移)

<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>
        div{width: 500px;height: 500px;background-color: red; 
            background-image: url(../图片/22.10.23/4.webp);
            background-repeat: no-repeat;
            background-position: center center;
            background-attachment:scroll;
        	}
    </style>
</head>
<body>
    <div></div>
</body>

在这里插入图片描述

11.CSS边框样式

border-style : 边框样式

solid：实线
dashed：虚线
dotted：点线

border-width : 边框大小

… px

border-color : 边框颜色

red、blue…

也可以对对边框的单独一侧进行设置

例如:	border-top-style: dashed

<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>
        div{width: 300px;height: 300px;
        border-top-style: dashed;border-top-width: 20px;border-top-color: aqua;
        border-left-style: dotted;border-left-width: 30px;border-left-color: blueviolet;
        border-bottom-style: double;border-bottom-width: 40px;border-bottom-color: brown;
        border-right-style: groove;border-right-width: 50px;border-right-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div></div>
</body>

![在这里插入图片描述](https://img-blog.csdnimg.cn/2bd257bac96843

12.CSS文字样式

font-family : 字体类型

英文：Arial、‘Times New Roman’ （只能识别英文）
中文：微软雅黑、宋体（中英文都可以识别）
中文字体的英文名称
微软雅黑：‘Microsoft YaHei’
宋体：‘SimSun’

衬线体与非衬线体

衬线体
在这里插入图片描述
非衬线体

注意事项：
1.设置多字体，若用户的计算机没有第一个字体，则会往后识别

<head>
	<style>
		div{font-family: 华文彩云,simsun;}
	</style>
</head>
<body>  
	<div>这是一段文字</div>
	<p>这是一段文字</p>
	<div>this is a text</div>
	<p>this is a text</p>
</body>

在这里插入图片描述

2.引号的问题
字体类型中含空格的要+引号 ’ ’

字体大小及粗细样式

font-size：字体大小

1.默认大小 =16px
2.除了输入像素写法外的写法：
单词法(xx-small—small,xx-large—large…)(不推荐使用)

font-weight：字体粗细

模式：正常(normal) 、加粗(bold)
写法：
单词：(normal、bold)
数值：100、200、… 、900(100-500=正常，600-900=加粗)

font-style：字体样式

模式：正常、倾斜
写法：单词（narmal 、italic）
注意：oblique也表示斜体，用的比较少，了解就好
区别：1.带有倾斜属性的字体才可以设置倾斜操作
2.没有倾斜属性的字体也可以设置倾斜操作
的

color：字体颜色

<head>
<style>
div{font-family: 华文彩云,simsun;
	font-size: 50px ;
	font-weight:800;
	font-style: italic;
	color: aqua;}
</style>
</head>
<body>    
<div>这是一段文字</div>
<p>这是一段文字</p>
<div>this is a text</div>
<p>this is a text</p>
</body>

在这里插入图片描述

13.CSS段落样式

文本样式

text-decoration：文本修饰

下划线：underline
删除线：line-through
上划线：overline
不添加任何装饰：none
可添加多个文本修饰，中间用空格隔开

text-transform：文本大小写

(针对英文段落)
转为小写： lowercase
转为大写： uppercase
首字母大写：capitalize

text-indent：文本缩进

首行缩进：text-indent（首行空两个字大小的空间要缩进的大小为字体的两倍）
em ：相对单位（1em永远都是跟字体大小相同）

text-aling：文本对齐方式

左对齐：left
右对齐：right
靠中对齐：center
左右对齐：justify

段落样式

line-height：定义行高

行高：一行文字的高度，上边距和下边距相等，且默认行高不是定值，而是根据字体的大小进行不断的变化的
取值：
nuber（px）
scale （比例值，跟文字大小成比例）

letter-spacing：定义字之间的间距

word-spacing：定义词之间的间距(针对英文)

英文和数字不会自动折行
1.word-break：break-all （非常强烈的折行）
2.word-wrap：break-word（不是那么强烈的折行，会产生一些空白区域）

14.CSS列表样式

list-style-type

属性: list-style-type 描述：定义列表样式
disc（实心圆）、cirle（空心圆）、square（实心方块）、none

list-style-image

属性：list-style-image 描述：将图片设置为列表符合样式
list-style-image:url( );

list-style-position

属性：list-style-position 描述：设置列表标记的放置位置
list-style-position：outside;列表的外面（默认值）
list-style-position：inside ;列表的里面

15.CSS复合样式

一个CSS属性只控制一种样式，叫做单一样式
一个CSS属性控制多种样式，叫做复合样式
复合的写法是通过空格的方式实现的
复合写法有的是不需要关心顺序的，例如：background、border
而有的就需要关心顺序，例如font
background：(颜色)(url)(repeat) (…px …px) (scroll、fiexd)
border：(solid、dashed、dotted) (颜色) (…px)
font：(bold) (italic) (…px/…px) (字体类型)
注：font最少要有两个值：size，family。且这两个值一定要按顺序排在最后，color无法加入
尽量不要混写，如果要混血一定要先写复合再写单一

<head>
<style>
div{width: 500px;height: 500px;
background: red url(../图片/22.10.23/8.jpg) no-repeat ;
border:solid 20px aqua;
font: italic bold 50px/70px 华文彩云 ;color: yellow;
}
</style> 
</head>
<body>
<div>哈哈哈哈哈哈哈哈</div>
</body>

在这里插入图片描述

16.CSS选择器

ID选择器

CSS：#elem{ }
html：id=“elem”
注：
1.在一个页面中ID值是唯一的
2.命名规范，由（字母 _ - 数字）组成，但是第一位不可以是数字
3.命名方式，驼峰式，下划线式，短线式
驼峰式：searchButton（小驼峰）
下划线：search_small_buttom
短线式：search-small-buttom

CLASS选择器

css ：.elem{ }
html：class = “elem”
注：
1.class选择器可以重复使用
2.可以添加多个class样式

<head>
<style>
.box{background: red;}
.content{font-family: 华文彩云;font-size: 40px;}
</style>
</head>
<body>
<div class="box content">块</div>
</body>

3.多个样式的时候，样式的优先级根据css决定，而不是class属性中的顺序
4.标签+类的写法

标签选择器(TAG选择器)

CSS：div{ }
html：<>div
使用场景：
1.去掉某些的标签的默认样式
2.复杂的选择器当中，如：层次选择器

群组选择器(分组选择器)

可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用

CSS：div，p，span{ }

<style>
div, #text, .title{background-color: red;}
</style>
</head>
<body>
<p id="text">第一个段落</p>
<h2 class="title">标题</h2>
</body>

通配选择器

CSS：*{ }
给所有标签添加统一的样式
注：尽量避免使用通配选择器
使用：可以去掉所有标签的默认样式

层次选择器

后代：M N { }

<head>
<style>
	ul li{border: 2px red solid;}
	#list li{border: 5px blue solid;}
</style>
</head>
<body>
    <ul>
        <li>
            <ul id="list">
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li></li>
        <li></li>
        <li>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
    </ul>
</body>

在这里插入图片描述

父子：M > N{ }

<head>
<style>
	#list > li{border: 5px blue solid;}
</style>
</head>
<body>
<ul id="list">
	<li>
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</li>
	<li></li>
	<li></li>
</ul>
</body>

在这里插入图片描述

兄弟：M ~ N{ } (当前M下面的所有兄弟N标签)

<head>
<style>
	div ~ h2{background-color: red;}
</style>
</head>
<body>
    <h2>这是一个标题</h2>
    <div>这是一个块</div>
    <p>这是一个段落</p>
    <h2>这是一个标题</h2>
    <h2>这是一个标题</h2>
    <h2>这是一个标题</h2>
    <h2>这是一个标题</h2>
</body>

在这里插入图片描述

相邻：M + N{ } 当前M相邻的N标签

<head>
<style>
     div + h2{background-color: red;}
</style>
</head>
<body>
    <h2>这是一个标题</h2>
    <div>这是一个块</div>
    <h2>这是一个标题</h2>
    <h2>这是一个标题</h2>
    <p>这是一个段落</p>
    <h2>这是一个标题</h2>
    <h2>这是一个标题</h2>
</body>

在这里插入图片描述

属性选择器

选择器	说明
M[attr]	M元素选择指定为attr属性的集合

M[attr = value]	M元素选择指定为atr属性和value值的集合
M[attr *= value]	M元素选择指定为attr属性并且包含值为value的集合
M[attr ^= value]	M元素选择指定为attr属性并且起始值为value的集合
M[attr $= value]	M元素选择指定为attr属性并且结束值为value的集合
M[attr1][attr2]	M元素选择满足多个属性的集合

M[attr]

<head>
<style>
div[class]{background-color: aqua;}
#box1{font: 30px 华文彩云 ;color: rgb(59, 21, 226);}
</style>
</head>
<body>
<div>哈哈哈哈哈哈</div>
    <div id="box1">嘿嘿嘿嘿嘿嘿</div>
    <div class="box2">嘻嘻嘻嘻嘻嘻</div>
    <div class="box3">咯咯咯咯咯咯</div>
</body>

在这里插入图片描述

M[attr = value]

=：完全匹配

<head>
<style>
	div[class=box3]{background-color: chartreuse;}
    #box1{font: 30px 华文彩云 ;color: rgb(59, 21, 226)}
</style>
</head>
<body>
<div>哈哈哈哈哈哈</div>
    <div id="box1">嘿嘿嘿嘿嘿嘿</div>
    <div class="box2">嘻嘻嘻嘻嘻嘻</div>
    <div class="box3">咯咯咯咯咯咯</div>
    <div class="box3">咯咯咯咯咯咯</div>
    <div class="box3-box4">咯咯咯咯咯咯</div>
</body>

在这里插入图片描述

M[attr *= value]

*=：部分匹配

<head>
<style>
	div[class*=box3]{background-color: chartreuse;}
	#box1{font: 30px 华文彩云 ;color: rgb(59, 21, 226)}
</style>
</head>
<body>
<div>哈哈哈哈哈哈</div>
    <div id="box1">嘿嘿嘿嘿嘿嘿</div>
    <div class="box2">嘻嘻嘻嘻嘻嘻</div>
    <div class="box3">咯咯咯咯咯咯</div>
    <div class="box3">咯咯咯咯咯咯</div>
    <div class="box3-box4">咯咯咯咯咯咯</div>
</body>

在这里插入图片描述

M[attr ^= value]

^=：起始匹配

<head>
<style>
		div[class^=box3]{background-color: chartreuse;}
        #box1{font: 30px 华文彩云 ;color: rgb(59, 21, 226)}
</style>
</head>
<body>
<div>哈哈哈哈哈哈</div>
    <div id="box1">嘿嘿嘿嘿嘿嘿</div>
    <div class="box2">嘻嘻嘻嘻嘻嘻</div>
    <div class="box3">咯咯咯咯咯咯</div>
    <div class="box3-box4">咯咯咯咯咯咯</div>
    <div class="box4-box3">咯咯咯咯咯咯</div>
    <div class="box4-box3">咯咯咯咯咯咯</div>
</body>

在这里插入图片描述

M[attr $= value]

$=：结束匹配

<head>
<style>
	div[class$=box3]{background-color: chartreuse;}
	#box1{font: 30px 华文彩云 ;color: rgb(59, 21, 226)}
</style>
</head>
<body>
<div>哈哈哈哈哈哈</div>
    <div id="box1">嘿嘿嘿嘿嘿嘿</div>
    <div class="box2">嘻嘻嘻嘻嘻嘻</div>
    <div class="box3">咯咯咯咯咯咯</div>
    <div class="box3-box4">咯咯咯咯咯咯</div>
    <div class="box4-box3">咯咯咯咯咯咯</div>
    <div class="box4-box3">咯咯咯咯咯咯</div>
</body>

在这里插入图片描述

M[attr1][attr2]

[] [] … []：组合匹配

<head>
<style>
	div[class][id]{background-color: chartreuse;}
</style>
</head>
<body>
<div>哈哈哈哈哈哈</div>
    <div class="box2" id="box1">嘻嘻嘻嘻嘻嘻</div>
    <div class="box3">咯咯咯咯咯咯</div>
    <div class="box3-box4">咯咯咯咯咯咯</div>
    <div class="box4-box3">咯咯咯咯咯咯</div>
    <div class="box4-box3">咯咯咯咯咯咯</div>
</body>

在这里插入图片描述

以上组合匹配还可以插入其他匹配

<head>
<style>
		div[class*=box3][id]{background-color: chartreuse;}
</style>
</head>
<body>
<div>哈哈哈哈哈哈</div>
        <div class="box2" id="box1">嘻嘻嘻嘻嘻嘻</div>
        <div class="box3">咯咯咯咯咯咯</div>
        <div class="box3-box4" id="box1">咯咯咯咯咯咯</div>
        <div class="box4-box3" id="box1">咯咯咯咯咯咯</div>
        <div class="box4-box3">咯咯咯咯咯咯</div>
</body>

在这里插入图片描述

伪类选择器

CCS伪类选择器用于某些元素添加的特殊效果。一般用于初始样式添加不上的时候，用伪类来添加
写法：
M：伪类 { }
：link 访问前的样式 (只能添给a标签)
：visited 访问后的样式 (只能添给a标签)
：hover 鼠标移入时的样式
：active 鼠标按下时的样式
注意：
1.link visited 只能给a标签添加，hover active 可以给所有标签添加
2.如果四个伪类都生效，一定要注意顺序：L V H A
3.一般网站只能这样去设置：a{ } a:hover{ }

:link , :visited , :hover , :active

<head>
<style>
		div{width: 300px;height: 300px;background-color: aqua;}
        div:hover{background: red;}
        div:active{background: yellow;}
        a:link{color: aqua;}
        a:visited{color: red;}
        a:hover{color: green;}
        a:active{color: yellow;}
</style>
</head>
<body>
	<div></div>
	<a href="http://www.baidu.com">这是一个链接</a>
</body>

:after , :before(添加文本)

通过伪类的方式给元素添加一段文本内容，使用的是content : " " 属性

<head>
<style>
        div{color: aqua}
        div:before{content:"你好";color: red;}
        div:after{content:"嗨";color: green;}
</style>
</head>
<body>
		<div>hello</div>
</body>

在这里插入图片描述

:checked , :disabled , :focus(针对表单)

<head>
    <style>
        :checked{width: 50px;height: 50px;}
        :disabled{width: 100px;height: 100px;}
        :focus{background-color: aqua;}
    </style>
</head>
<body>
    <input type="checkbox"checked>
    <input type="checkbox"checked>
    <input type="checkbox"disabled>
    <input type="text">
</body>

在这里插入图片描述

结构性伪类选择器

nth-of-type() , nth-child()

角标是从1开始的，1表示第一项…
也可以是n，n值代表从0到无穷大
nth-of-type() , nth-child()区别：
type：类型
child：孩子

<head>
    <style>
        li:nth-of-type(2){background: aqua;}
    </style>
</head>
<body>
        <ul>
            <li>
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </li>
            <li></li>
            <li></li>
        </ul>
        <ol>
            <li></li>
            <li></li>
        </ol>
</body>

在这里插入图片描述
若将 (2) 改为 (n) 则

若将 (2) 改为 (2n) 则

first-of-type

仅第一个

<head>
    <style>
        li:first-of-type{background: aqua;}
    </style>
</head>
<body>
        <ul>
            <li>
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ol>
            <li></li>
            <li></li>
            <li></li>
        </ol>
</body>

在这里插入图片描述

last-of-type

仅最后一个

<head>
    <style>
        li:last-of-type{background: aqua;}
    </style>
</head>
<body>
        <ul>
            <li>
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ol>
            <li></li>
            <li></li>
            <li></li>
        </ol>
</body>

在这里插入图片描述

only-of-type

唯一的时候生效

<head>
    <style>
        li:only-of-type{background: aqua;}
    </style>
</head
        <ul>
            <li>
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </li>

        </ul>
        <ol>
            <li></li>
        </ol>
</body>

在这里插入图片描述

nth-of-type() , nth-child()区别：

type：类型

<head>
    <style>
        li:nth-of-type(2){background: aqua;}
        /* li:nth-chile(2){background: aqua;} */
    </style>
</head>
<body>
        <ul>
            <li></li>
            <div>aaaaaaaaaaa</div>
            <li></li>
            <li>
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </li>
        </ul>
        <ol>
            <li></li>
            <li></li>
            <li></li>
        </ol>
</body>

在这里插入图片描述

child：孩子

<head>
    <style>
        /* li:nth-of-type(2){background: aqua;} */
        li:nth-chile(2){background: aqua;}
    </style>
</head>
<body>
        <ul>
            <li></li>
            <div>aaaaaaaaaaa</div>
            <li></li>
            <li>
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </li>
        </ul>
        <ol>
            <li></li>
            <li></li>
            <li></li>
        </ol>
</body>