CSS（一）概述、选择器、选择器优先级
【摘要】
CSS：层叠样式表（Cascading Style Sheets）是一种用来表现HTML或XML等文件样式的计算机语言。不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
 ...
CSS：层叠样式表（Cascading Style Sheets）是一种用来表现HTML或XML等文件样式的计算机语言。不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。对前端网页的布局与美化有着广泛作用。
目录
一、CSS概述
1. 前端HTML、Javascript、CSS
- html：超文本标记语言。用于网页的结构搭建和页面布局。
- css：层叠样式表。用于网页的修饰，样式的渲染。
- javascript：解释型的编程语言。用于与页面的交互。
2. CSS语法规范
（1）内联样式
内联样式也叫行内样式，就是在 html 文件中的 html 标签中，用 style 属性样式值来完成渲染。内联样式将样式写在标签里，缺点是杂乱且不易于修改，复用性差；优点是可以指定当前标签，更加直接。
<!-- 内联样式 -->
<span style="样式声明"></span>
（2）内部样式
在网页头部<head></head>中增加一对<style></style>标签，在 style 中定义样式。特点是需要选择器查找到元素并嵌入 HTML 文件，只能在当前页面使用，优先级低于内联样式（不建议用于项目）。
<head>
<!-- 内部样式 -->
<style>
h2 {
background-color: lightpink;
color: red;
}
</style>
</head>
（3）外部样式
单独创建 CSS 文件，在 HTML 文件的 head 标签中引入。
<head>
<!-- 外部样式 -->
<link rel="stylesheet href="01.css">
</head>
href 为超文本引用，引用 css 文件路径，rel 属性指文件与当前HTML的关系（必写）。外部样式所有页面都可以使用，是项目中最重要的样式使用方式。
二、CSS选择器
要使用 css 对 HTML 页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到 CSS 选择器。HTML页面中的元素就是通过 CSS 选择器进行控制的。
1. 基础选择器
（1）通用选择器：使用通配符 * ，选择 HTML 文件中所有元素。最常用的写法是清除浏览器内外边距，如下：
*{margin:0;padding:0}
（2）元素选择器：也叫标签选择器，直接使用标签的名字来选择 HTML 元素。权重值为1
h1 {color: teal;}
div {color: green;}
（3）id 选择器：只针对一个元素，一般不作为样式渲染的选择器使用。
#getblue {color: blue;}
（4）类选择器：通过元素的类名即class值选择元素。权重值10
.oz {color: purple;}
.oo {color: orangered;}
一个元素可以创建多个类名，每个类名之间用空格分开即可。
（5）群组选择器：将多种选择器进行组合，把不同的选择器用逗号连接
.y,#mybox {
background-color: yellow;
}
2. 关系选择器
（1）后代选择器：先代元素(祖先)选择器写在前面，空格后写后代元素选择器。
.item span {
color: red;
}
（2）子代选择器：选中某个元素的直接子元素(当前元素下的第一层子元素)，与后代不同的是子代选择器的范围更小。
body>div>div>div {
color: red;
}
（3）兄弟选择器
.l1~li {
color: blue;
}
.s~.nv {
color: red;
}
注意，前面的为参照元素，后面的为筛选元素，选中的永远是其参照元素后面的兄弟元素。
（4）相邻选择器：同一层的关系选择器，可以选中参照的元素后面紧挨着的被参照元素的选择器。
.o1+span {
color: red;
}
3. 伪类选择器
伪类选择器的作用是匹配同一个元素，设置其不同状态下的样式。常用的伪类有：
| a:link {样式声明} | 未激活（a标签特有） |
| a:visited {样式声明} | 激活后（a标签特有） |
| div:hover {样式声明} | 鼠标悬停 |
| p:active {样式声明} | 激活中 |
| input:focus { } | input标签获取焦点 |
| input:cheaked { } | input单选、复选等type 类型被选中后的样式 |
a:link {
color: green;
}
div:hover {
background-color: salmon;
}
button:hover+div {
background-color: red;
}
4. 伪元素选择器
用于设置元素的“指定部分”的样式。
| ::before | 元素最前边部分 |
| ::after | 元素的最后边部分 |
div::before {
content: "欢迎您，";
font-weight: bolder;
font-size: 26px;
}
需要注意content属性必须写，但值可以为空。
三、CSS优先级
1. 优先级原则
（1）顺序读取：相同类型选择器采用顺序读取后来的优先。
（2）选择器优先级：不同类选择器，按照权重原则(id选择器100,类选择器10,元素选择器 1)。
（3）继承：制定样式的优先级大于继承样式的优先级。
（4）多个选择器一起使用：根据权重值累加比较值后采用优先级。
2. 最高优先级 - !important
直接获取最高优先级，但注意内联样式不能加 !important。用法如下：
.d1{
background-color: rgb(22, 92, 161) !important;
}
<!-- 表示类名为d1的元素具有最高优先级 -->
3. 优先级的比重大小
按引入方式：内联样式 > 内部样式 > 外部样式
按元素：id 选择器（100）> 类选择器（10）> 元素选择器（1）
文章来源: majinjian.blog.csdn.net，作者：Developer 小马，版权归原作者所有，如需转载，请联系作者。
原文链接：majinjian.blog.csdn.net/article/details/119771922
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论（0）