前端【2】html添加样式、CSS选择器
一、为html添加样式的三种方法
1、内部样式
2、外部样式
3、行内样式
二、css的使用--css选择器
1、css基本选择器
元素选择器
属性选择器
id选择器
class/类选择器
通配符选择器
2、群组选择器-多方面筛选
3、关系选择器
后代选择器【包含选择器】
子元素选择器
兄弟选择器
4、伪元素选择器
5、伪类选择器
结构性伪类选择器
UI 状态伪类选择器
:not()排除选择器
6、CSS选择器的优先级
往期文章：
前端基础---认识前端框架（html、css、js、）_前端代码结构-CSDN博客
前端【1】---HTML入门学习_html父子标签-CSDN博客
一、为html添加样式的三种方法
1、内部样式
内部样式是将 CSS 代码直接写在 HTML 文件的 <style> 标签中，通常放在 <head> 部分，为多个组件添加同一样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>内部样式示例</title>
<!-- 内部样式 为多个组件添加同一样式-->
<style>
h1 {
color: blue;
font-size: 24px;
}
p {
color: green;
font-size: 16px;
}
div{
color: antiquewhite;
background:purple;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<div>这是一个div块</div>
</body>
</html>多个页面可以共享同一个 CSS 文件，减少代码冗余。
2、外部样式
外部样式是将 CSS 代码写在一个单独的 .css 文件中，然后通过 <link> 标签将其引入到 HTML 文件中。常用，优先级最低
html文件：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>外部样式示例</title>
<!-- 引入外部样式文件 -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>styles.css文件：
/* 外部样式 */
h1 {
color: blue;
font-size: 24px;
}
p {
color: green;
font-size: 16px;
}3、行内样式
行内样式是将 CSS 代码直接写在 HTML 元素的 style 属性中。行内样式优先级最高
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>行内样式示例</title>
</head>
<body>
<!-- 行内样式 -->
<h1 style="color: blue; font-size: 24px;">这是一个标题</h1>
<p style="color: green; font-size: 16px;">这是一个段落。</p>
</body>
</html>二、css的使用--css选择器
1、css基本选择器
元素选择器
语法 : 标签名{} ，通过 HTML 标签名选择元素。
标签名 {
属性: 值;
}/* 选择所有 <p> 标签 */
p {
color: red;
font-size: 16px;
}属性选择器
属性选择器一共有7种写法
某某[属性]
元素[属性] {
样式;
}
某某[属性=属性值]
元素[属性="属性值"] {
样式;
}
某某[属性^=属性值]：选择属性值以指定值开头的元素。
某某[属性$=属性值]：选择属性值以指定值结尾的元素。
某某[属性*=属性值]：选择属性值包含指定值的元素。
某某[属性~=属性值]:选择属性值中包含指定单词的元素（单词以空格分隔）。
某某[属性|=属性值]:选择属性值以指定值开头或以指定值开头后跟连字符 - 的元素。
id选择器
通过元素的 id 属性选择元素，id 是唯一的，一个页面中只能有一个元素使用相同的 id。
#id名 {
属性: 值;
}示例：
<p id="special">这是一个特殊的段落。</p>/* 选择 id 为 special 的元素 */
#special {
color: green;
font-weight: bold;
}class/类选择器
class 可以重复使用，一个元素可以有多个 class
.class名 {
属性: 值;
}示例：
<p class="highlight">这是一个高亮段落。</p>
<p class="highlight">这是另一个高亮段落。</p>/* 选择所有 class 为 highlight 的元素 */
.highlight {
background-color: yellow;
}通配符选择器
语法 : *{}
作用 : 让页面中所有的标签执行该样式,通常用来清除间距
*{
margin: 0; //外间距
padding: 0; //内间距}要是对某几个标签执行样式而非全部标签：
/*选择器组合（满足一个条件即可） 选择器1，选择器2{} */
div,
p,
a,
.aa
{
background-color: aquamarine;
}
2、群组选择器-多方面筛选
通过逗号分隔多个选择器，同时为多个元素设置相同的样式
语法：
选择器1, 选择器2, 选择器3 {
属性: 值;
}示例：
/* 选择所有 h1、h2 和 p 元素 */
h1, h2, p {
color: blue;
}/* p标签里class属性为aa */
p.aa {
color: #000;
}3、关系选择器
关系选择器 是 CSS 中用于根据元素之间的层级关系来选择元素的选择器。它们通过描述元素在文档结构中的位置关系（如父子关系、兄弟关系等）来实现精确的选择
后代选择器【包含选择器】
选择某个元素的所有后代元素。（多层嵌套）
祖先元素 后代元素 {
样式;
}
子元素选择器
选择某个元素的直接子元素（仅一层嵌套）
父元素 > 子元素 {
样式;
}
兄弟选择器
选择某个元素后面的所有兄弟元素，平级
元素1 ~ 元素2 {
样式;
}示例：
/* 选择 .container 内直接子元素中 class 为 highlight 的 <p> 元素 */
.container > .highlight {
font-weight: bold;
}4、伪元素选择器
用于选择元素的特定部分（如首行、首字母等）
选择器::伪元素 {
属性: 值;
}常用伪元素：
::before：在元素内容之前插入内容。
::after：在元素内容之后插入内容。
::first-line：选择元素的第一行。
::first-letter：选择元素的第一个字母。
示例：
/* 一、首字母：：first-letter 只使用于能让元素竖着布局的标签*/
div::first-letter
{
color:yellow;
font-size: 40px;
}
/* 二、首行 对于英文需要自己加入空格分隔*/
div::first-line{
color:yellow;
font-size: 40px;
}
/* 三、往前/后加东西 可以用来做一些特效*/
/* 如果不写文字用content:" " */
div::before {
content: "新添加的内容";
color: antiquewhite;
background-color: aqua;
}
div::after {
content: "新添加的内容";
color: antiquewhite;
background-color: aqua;
}5、伪类选择器
伪类选择器 是 CSS 中用于选择元素特定状态或位置的选择器。它们以冒号（
:）开头，用于匹配元素的某种状态（如鼠标悬停、焦点状态）或位置（如第一个子元素、第 n 个子元素）
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>结构性伪类选择器
用于根据元素在文档结构中的位置选择元素。
:nth-child(n)：
-
选择父元素下的第
n个子元素,从前往后数。 -
n可以是数字、表达式（如2n+1）、关键字（odd奇数，even偶数）。 -
注意：只认数字，如果类型不匹配，样式不会生效。
-
ul li:nth-child(odd) { color: blueviolet; }
:nth-last-child(n)：
-
从后往前数，选择父元素下的第
n个子元素。 -
示例：
ul li:nth-last-child(2) { color: blue; } -
:first-child：选择父元素下的第一个子元素。 -
:last-child：选择父元素下的最后一个子元素。 -
示例
ul li:first-child { color: red; } ul li:last-child { color: green; }
:nth-of-type(n)：
-
选择父元素下同类型的第
n个子元素。 -
既认数字又认类型。
-
示例：
ul li:nth-of-type(2) { color: blueviolet; } -
:first-of-type和:last-of-type：-
:first-of-type：选择父元素下同类型的第一个子元素。 -
:last-of-type：选择父元素下同类型的最后一个子元素。 -
示例
ul li:first-of-type { color: red; } ul li:last-of-type { color: green; }
-
UI 状态伪类选择器
用于根据元素的状态选择元素。
:hover
- 选择鼠标悬停在元素上时的状态
- 示例：当鼠标悬停在按钮上时，按钮背景颜色变为黄色。
/* 鼠标悬停时改变背景颜色 */
button:hover {
background-color: yellow;
}【拓展】 /* tramsition过度动画（不会突然变成某样式） */
li { transition: all,2s,linear; } li:hover{ color: aquamarine; }
transition是 CSS 中用于定义过渡效果的属性。
all：表示所有属性都会应用过渡效果（如颜色、背景、大小等）。
2s：表示过渡效果的持续时间为 2 秒。
linear：表示过渡效果的时间函数为线性（匀速）。作用：
当
<li>元素的任何属性发生变化时，会以匀速的方式在 2 秒内完成过渡。
:active
- 选择元素被激活（如鼠标点击）时的状态。
- 示例：当用户点击按钮时，按钮背景颜色变为红色
/* 点击时改变按钮颜色 */
button:active {
background-color: red;
}:focus
- 选择元素获得焦点时的状态（如表单输入框）
- 示例：当用户点击输入框时，输入框的边框颜色变为蓝色
/* 输入框获得焦点时改变边框颜色 */
input:focus {
border-color: blue;
}:checked
- 选择被选中的单选框或多选框
- 示例：当用户选中单选框时，单选框的背景颜色变为绿色
/* 选中时改变单选框的背景颜色 */
input[type="radio"]:checked {
background-color: green;
}- 示例：为被选中的单选框或多选框添加一个金色的阴影效果
input:checked{
box-shadow: 2px 2px 2px gold;/* 加阴影---水平方向偏移量，竖直方向偏移量，模糊度，颜色 */
}:not()排除选择器
用于选择 不满足指定条件 的元素
元素:not(选择器) {
样式;
}-
元素：可以是任何 HTML 元素（如
div、p、li等）。 -
选择器：可以是任何有效的 CSS 选择器（如类选择器
.class、ID 选择器#id、属性选择器[attr]等）。
6、CSS选择器的优先级
选择器写的越长（越准确），优先级越高【特异性越高，优先级越高】
ID 选择器 > 类选择器 > 元素选择器
同级别长度下，CSS 按照代码顺序执行，同一样式后边的会把前面的覆盖掉，不同样式会叠加