学习来源：尚硅谷前端html+css零基础教程，2023最新前端开发html5+css3视频
文章目录
- 📚CSS基础
- 🐇CSS简介
- 🐇CSS编写位置
- ⭐️行内样式
- ⭐️内部样式
- ⭐️外部样式
- 🐇样式表的优先级
- 🐇CSS语法规范
- 🐇CSS代码风格
- 📚CSS选择器
- 🐇CSS基本选择器
- ⭐️通配选择器
- ⭐️元素选择器
- ⭐️类选择器
- ⭐️id选择器
- ⭐️基本选择器总结
- 🐇CSS复合选择器
- ⭐️交集选择器
- ⭐️并集选择器
- ⭐️HTML元素间的关系
- ⭐️后代选择器
- ⭐️子代选择器
- ⭐️兄弟选择器
- ⭐️属性选择器
- ⭐️伪类选择器
- ⭐️伪元素选择器
- 🐇选择器的优先级（权重）
⭐️前文回顾：前端 | （三）表单及HTML4收尾 | 尚硅谷前端html+css零基础教程2023最新
⭐️前文对应p41-p56，本文对应p57-p86
⭐️补充网站：W3school，MDN
📚CSS基础
🐇CSS简介
🐇CSS编写位置
⭐️行内样式
- 写在标签的
style属性中，又称内联样式。 - 语法：
⭐️内部样式
- 写在html页面内部，将所有的CSS代码提取出来，单独放在
<style>标签中。 - 语法：
⭐️外部样式
-
写在单独的
.css文件中，随后在HTML文件中引入使用。 -
语法：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>示例</title> <link rel="stylesheet" href="b.css" </head> <body> <h1 >欢迎来到尚硅谷学习</h1> </body> </html>/* 给h1添加样式 */ h1{ color: red; font-size: 40px; }
🐇样式表的优先级
优先级规则：行内样式 > 内部样式 = 外部样式
- 内部样式、外部样式，这二者的优先级相同，且：后面的会覆盖前面的（后来者居上）。
- 同一个样式表中，优先级也和编写顺序有关，且：后面的会覆盖前面的（后来者居上）。
🐇CSS语法规范
CSS语法规范由两部分构成：
- 选择器：找到要添加样式的元素。
- 声明块：设置具体的样式（声明块是由一个或多个声明组成的）。
- 注释的写法：（
Ctrl + /同样是快捷键）
🐇CSS代码风格
📚CSS选择器
🐇CSS基本选择器
⭐️通配选择器
-
作用：可以选中所有的HTML元素。
-
语法：
*{ 属性名:属性值; } -
举例：
/* 举例，选中所有元素 */ *{ color:orange; font-size: 40px; }目前来看，通配选择器貌似有点鸡肋，但后面清除样式时，会对我们有很大帮助。
⭐️元素选择器
- 作用：为页面中某种元素统一设置样式。
- 语法：
标签名{ 属性名:属性值; } - 举例：
/* 选中所有h1元素 */ h1{ color: orange; font-size: 40px; } /* 选中所有p元素 */ p{ color: blue; font-size: 60px; }元素选择器无法实现差异化设置，例如上面的代码中，所有的p元素效果都一样。
⭐️类选择器
-
作用：根据元素的class值，来选中某些元素。
-
语法：
.类名{ 属性名:属性值; } -
举例：
/* 选中所有class值为speak的元素 */ .speak{ color: red; } /* 选中所有class值为big的元素 */ .big{ color: blue; } -
关于元素的class属性：
<!-- 一个元素不能写多个class属性，后写的会失效，错误案例如下 --> <h1 class="speak" class="big">你好啊</h1> <!-- 一个元素的class属性，能写多个值，要用空格隔开，示例如下 --> <h1 class="speak pig">你好啊</h1>
⭐️id选择器
- 作用：根据元素的id属性值，来精准选中某个元素。
- 语法：
#id值{ 属性名:属性值; } - 举例：
/* 选中id值为lala的那个元素 */ #lala{ color: red; font-size: 60px; }
⭐️基本选择器总结
🐇CSS复合选择器
- 复合选择器建立在基本选择器之上，由多个基本选择器，通过不同的方式组合而成。
- 符号位选择器可以在复杂结构中，快速而准确地选中元素。
⭐️交集选择器
- 作用：选中同时符合多个条件的元素。
- 语法：
选择器1选择器2选择器3...选择器n{} - 举例：
/* 选中：类名为beauty的p元素，此种写法用得非常多！！ */ p.beauty{ color: blue; } /* 选中：类名包含rich和beauty的元素 */ .rich.beauty{ color: green; } - 注意：
⭐️并集选择器
- 作用：选中多个选择器对应的元素，又称分组选择器。
- 语法：
选择器1,选择器2,选择器3,...选择器n{}，这里的,就是或 - 举例：
/* 选中id为peiqi，或类名为rich，或类名为beauty的元素 */ #peiqi, .rich, .beauty{ font-size: 40px; background-color: skyblue; width: 200px; }
⭐️HTML元素间的关系
- 父元素：直接包裹某个元素的元素，就是该元素的父元素。
- 子元素：被父元素直接包含的元素。
- 祖先元素：父亲的父亲…，一直往外找，都是祖先。（父元素，也算是祖先元素的一种）
- 后代元素：儿子的儿子…一直往里找，都是后代。(子元素，也算是后代元素的一种）
- 兄弟元素：具有相同父元素的元素，互为兄弟标签。
⭐️后代选择器
- 作用：选中指定元素中，符合要求的后代元素。
- 语法：
选择器1 选择器2 选择器3 ... 选择器n {}， （先写祖先，再写后代），选择器之间，用空格隔开，空格可以理解为“xxx中的”。 - 举例：
/* 选中ul中的所有li */ ul li{ color: red; } /* 选中ul中的所有li中的a */ ul li a{ color: orange; } /* 选中类名为subject元素中的所有li */ .subject li{ color: blue; } /* 选中类名为subject元素中的所有类名为front-end的li */ .subject li.front-end{ color: blue; }
⭐️子代选择器
- 作用：选中指定元素中，符合要求的子元素。（先写父，再写子）
- 语法：
选择器1>选择器2>选择器3>......选择器n {}，用>隔开，>可以理解为“xxx的子代”。
- 举例：
/* div中的子代a元素 */ div>a{ color: red; } /* 类名为persons的元素中的子代a元素 */ .persons>a{ color: red; }
⭐️兄弟选择器
- 相邻兄弟选择器
- 通用兄弟选择器
两种兄弟选择器，选择的是下面的兄弟。
⭐️属性选择器
- 举例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style> /* 第一种写法，选中具有某个属性的元素 */ [title]{ font-size: 40px; } /* 第二种写法：选中包含某个属性，且属性值等于指定值的元素 */ [title="lalayouyi"]{ color: red; } /* 第三种写法：选中包含某个属性，且属性值以指定值开头的元素 */ [title^="you"]{ color: aqua; } /* 第四种写法：选中包含某个属性，且属性值以指定值结尾的元素 */ [title$="er"]{ color:blue; } /* 第五种写法：选中包含某个属性，属性值包含指定值的元素 */ [title*="luyou"]{ color:palegreen; } </style> </head> <body> <div title="lalayouyi">啦啦右一</div> <div title="lalazuoer">啦啦左二</div> <div title="youyi">右一</div> <div title="luluyouyi">噜噜右一</div> </body> </html>
⭐️伪类选择器
-
动态伪类
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>动态伪类</title> <style> /* 选中的是没有访问过的a元素 */ a:link{ color: aquamarine; } /* 选中的是访问过的a元素 */ a:visited{ color: gray; } /* 选中的是鼠标悬浮状态的a元素 */ a:hover{ color: yellow; } /* 选中的是激活（点下未抬起）状态下的a元素 */ a:active{ color: blueviolet; } /* 在输入时（获取焦点时）选中 */ input:focus{ color: red; background-color: pink; } </style> </head> <body> <a href="https://www.baidu.com">去百度</a> <a href="https://www.jd.com">去京东</a> <input type="text"> </body> </html> -
结构伪类——例子看视频（无敌细致）
总的来说，n是需要满足
an+b格式的公式，n从0开始。<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> /* ul里li的偶数个标绿 */ ul > li:nth-child(2n){ color: green; } /* ul里li的奇数个标紫 */ ul > li:nth-child(odd){ color: purple; } /* ul里第一个li标红 */ ul > li:first-of-type{ color: red; } /* ul里最后一个li标蓝 */ ul > li:last-child{ color: blue; } </style> </head> <body> <ul> <span>我是一个span</span> <li>第0个</li> <li>第1个</li> <li>第2个</li> <li>第3个</li> <li>第4个</li> <li>第5个</li> </ul> </body> </html>
-
否定伪类：
:not(选择器)，排除满足括号中条件的元素。 -
UI伪类
-
目标伪类：
:target，选中描点指向的元素。<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>目标伪类</title> <style> div{ background-color: aquamarine; height: 200px; } div:target{ background-color: cornflowerblue; } </style> </head> <body> <a href="#one">去看第一个</a> <a href="#two">去看第二个</a> <a href="#three">去看第三个</a> <a href="#four">去看第四个</a> <a href="#five">去看第五个</a> <a href="#six">去看第六个</a> <div id="one">第一个</div><br> <div id="two">第二个</div><br> <div id="three">第三个</div><br> <div id="four">第四个</div><br> <div id="five">第五个</div><br> <div id="six">第六个</div><br> </body> </html> -
语言伪类：
:lang()，根据指定的语言选择元素（本质是看lang属性的值）。
⭐️伪元素选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪元素选择器</title>
<style>
p{
font-size: 10px;
}
/* 选中元素的第一个文字 */
p::first-letter{
font-size: 30px;
}
/* 选中元素的第一行文字 */
p::first-line{
background-color: yellow;
}
/* 选中被鼠标选中的内容 */
p::selection{
background-color: greenyellow;
}
/* 在元素最开始的地方创建一个子元素 */
div::before{
content: 'abc';
color: red;
}
p::before{
content: '『';
}
/* 在元素最后的地方创建一个子元素 */
div::after{
content: 'haha';
color: blue;
}
p::after{
content: '』';
}
</style>
</head>
<body>
<div>Hello Hello How are you</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>
Atque velit modi veniam nisi veritatis tempore laborum nemo ipsa itaque optio. Id odit consequatur mollitia excepturi, minus saepe nostrum vel porro.
</p>
</body>
</html>
🐇选择器的优先级（权重）
通过不同的选择器，选中相同的元素，并且为相同的样式名设置不同的值时，就发生了样式的冲突。到底应用哪个样式，此时就需要看优先级了。
-
简单描述：
-
详细描述：
例如
