目录
层叠样式表
<p style="color:red;font-size:50px;">通过选择器的方法调用指定的元素并设置相关的CSS
<style type="text/css">
p{
color:red;
font-size: 30px;
}
</style>@charset "utf-8";
p{
color:red;
font-size: 30px;
}<!--在header中-->
<link rel="stylesheet" type="text/css", href="style01.css">大量HTML使用同一组CSS，就可以将这些样式保存到一个单独的.CSS文件中，通过link引用就可以了
<b>b元素有加粗元素</b>
<span style="font-weight:bold;">span元素没有加粗样式，但是可以设置</span>
<b style="font-weight:normal;">b元素手动取出加粗元素</b>
<link rel="stylesheet" type="text/css", href="style01.css">
<style type="text/css">
p{
color:red;
font-size: 30px;
}
</style>
<!--同时叠加（不是覆盖）三个元素-->
<p style = "font-size:50px; color:orange;">我要叠加三个样式</p>优先级： 元素内嵌 <- 文档内嵌 <- 外部引用 <- 浏览器
可以在不同样式中添加!important关键字来强行设置优先级
color: green !important
<style type="text/css">
p{
color:red;
font-size: 30px;
}
</style>
<p>这是<b>HTML5</b></p> 此时显示的是这是HTML5,我们只设置了p为红色，但是b也为红色了，因为b是在p内部
定位到你想要设计的样式元素来设计元素
使用频率最高的一些选择器
**表示通用选择器，匹配所有HTML元素包括<HTML>和<body>标签可以为所有元素匹配并配置样式，但是无法筛选不必要元素
定义一个CSS
@charset "utf-8"
* {
border: 1px solid red;
}
/*通用选择器可以匹配到html和body元素*/
<link rel="stylesheet" type="text/css", href="style01.css">
<p>这是一个段落</p>
<p>这是一个加粗</p>
<span>这是一个什么都没有</span>
p
@charset "utf-8"
p {
border: 1px solid red;
}
/*通用选择器可以匹配到html和body元素*/#adcID是唯一的，不可重复使用
@charset "utf-8"
#abc {
border: 1px solid red;
}
<link rel="stylesheet" type="text/css", href="style01.css">
<p id="abc">这是一个段落</p>
<p>这是一个加粗</p>
<span>这是一个什么都没有</span>
.
@charset "utf-8"
.abc {
border: 1px solid red;
}
<link rel="stylesheet" type="text/css", href="style01.css">
<p class="abc">这是一个段落</p>
<p class="abc">这是一个加粗</p>
<span>这是一个什么都没有</span>
也可以限定元素
@charset "utf-8"
p.abc {
border: 1px solid red;
}
/*只能适用于段落*/也可以使用多个class
@charset "utf-8"
.abc {
border: 1px solid red;
}
.def {
font-size: 30px;
}
<p class="abc def">这是一个加粗</p>[...]@charset "utf-8"
[href]{
color: red;
}<a href="http://www.baidu.com">这是一个百度</a>也可以设置相关的属性值
@charset "utf-8"
[type="password"]{
border: 1px solid red;
}<input type="password">通过正则表达式来设置匹配
@charset "utf-8"
[href^="http"]{
color: orange;
}
/*只能开头是http才能匹配*/<a href="http://www.baidu.com">百度</a>
<a href = "javascript:void(0)">好搜</a>通过精确匹配
@charset "utf-8"
[href*="baidu"]{
color: orange;
}
/*只能包含baidu才能匹配*/将不同选择器进行组合形成的新的特定匹配
多个选择器逗号分隔，同时设置一组样式
@charset "utf-8"
p,b,i,span {
color: orange;
}
#abc,.abc,i,span {
color: orange;
}
选择<p>元素内部所有的<b>元素，不在乎<b>的层次深度
@charset "utf-8"
p b {
color: orange;
}<p>这是一个HTML5<b>教程</b></p>效果为： 这是一个HTML5教程
与后代选择器类似，但是只能运用于儿子，孙子就不行了
```css
@charset "utf-8"
p>b {
color: orange;
}
```
匹配第一个元素相邻的第二个元素
@charset "utf-8"
p+b {
color: orange;
}类似，只是靠的不是特别近
@charset "utf-8"
p~b {
color: orange;
}::::first-line<p>、<div>等的首行文本选定:: first-line {
color: orange;
}::first-letterp:: first-letter {
color: orange;
}::beforea:: before {
content: ‘点击-‘;
}::after::root {
border: 1px solid red;
}ul>li:first-child {
color: red;
}
/*父类的第一个儿子*/ul>li:last-child {
color: red;
}
/*父类的最后一个儿子*/ul>li:only-child {
color: red;
}
/*选择只有一个子元素的那个元素*/dive>p: only-of-type {
color: red;
}
/*选择只有一个指定类型的子元素的那个元素*/ul>li:nth-child(2) {
color: red;
}
/*选择第2个*/ul>li:nth-last-child(2) {
color: red;
}
/*选择倒数第2个*/ul>li:nth-of-type(2) {
color: red;
}
/*特定类型第2个*/ul>li:nth-last-of-type(2) {
color: red;
}
/*特定类型倒数第2个*/用于匹配表单的数据
input:enabled {
border: 1px solid red;
}
/*选择表单中的enable元素*/<form>
<input tupe="text" disabled>
<input tupe="text">
</form>input:checked {
display: none;
}input:default {
display: none;
}input:valid {
border: 1px solid green;
}
input:invalid {
border: 1px solid red;
}input:required {
border: 1px solid red;
}根据条件改变匹配元素
/*Url没有访问的颜色*/
a:link {
color: red;
}
/*Url被点击的颜色*/
a:visited {
color: blue;
}
/*鼠标悬停的颜色*/
a:hover {
color: orange;
}
/*鼠标长按的颜色*/
a:active {
color: green;
}<a href="baidu.com">百度</a>/*鼠标获取到文本框的颜色*/
input:focus {
border: 1px solid green;
}/*选择百度除外的URL*/
a:not([href*="baidu"]) {
color: green;
}/*空元素隐藏*/
:empty {
display: none;
}/*空元素隐藏*/
b:target {
color: red;
}原文：https://www.cnblogs.com/haochen273/p/10305818.html