目录
一、语法
二、创建
外部样式表
内部样式表
内联样式
三、选择器
ID选择器
类选择器
伪类选择器
:hover
a:link
a:active
a:visited
属性选择器
伪元素选择器
::first-letter
::first-line
::selection
::placeholder
::before 和::after
通配选择器
标签选择器
参考资料：
一、语法
由选择器和多条声明构成，一条声明由属性和值构成。
二、创建
外部样式表
使用link元素链接外部样式表，外部样式表是一个以.css结尾的文件。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>内部样式表
使用style元素将CSS语言括起来，定义在头文件上。
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>内联样式
使用元素内部使用style属性编写CSS样式表，定义在元素上。
<p style="color:sienna;margin-left:20px">这是一个段落。</p>注意：内联样式 > 内部样式表 > 外部样式表 > 浏览器样式表
三、选择器
ID选择器
以#开头，后面跟着ID名称，因为ID在HTML里具有唯一性，具体效果针对单一ID名称相同元素。例如：针对以下元素。
HTML代码
<p id="para1">这是一个段落。</p>CSS代码
#para1
{
text-align:center;
color:red;
}类选择器
以.开头，后面跟着类名称，类名称不具有唯一性，对一类的元素进行同样的CSS渲染，如果要特指类内的某一元素标签，则空格后跟元素标签。
HTML代码
<div class="content-class"></div>CSS代码
.content-class {
color: blue;
}
/*匹配类*/
.content-class div{
color: blue;
}
/*匹配content-class类中的div标签*/伪类选择器
伪类是用于指定所选元素的特殊状态。不同的元素有着不同的伪类。伪类由冒号后跟着伪类名称组成（例如，
:hover）。函数式伪类还包含一对括号来定义参数。附上了伪类的元素被定义为锚元素（例如，button:hover中的button）。它与一些用户交互有关，某些并不是直接的显现。以下是常见元素的伪类使用。
<any>:hover
鼠标悬浮在元素上，可用于所有元素
a:hover{
background-color:yellow;
}
button:hover{
background-color:yellow；
}a:link
设置了未访问过的页面链接样式，可用于a元素
a:link
{
background-color:yellow;
}a:active
设置点击链接后按下的样式，短暂时刻，可用于a元素
注意：为了产生预期的效果，在CSS定义中，:active必须位于:hover之后！
a:active
{
background-color:yellow;
}a:visited
设置访问过的页面链接的样式，可用于a元素
a:visited
{
background-color:yellow;
}属性选择器
CSS 属性选择器匹配那些具有特定属性或属性值的元素。
/* 存在 title 属性的 <a> 元素 */
a[title] {
color: purple;
}
/* 存在 href 属性并且属性值匹配"https://example.org"的 <a> 元素 */
a[href="https://example.org"]
{
color: green;
}伪元素选择器
伪元素选择器用于处理那些不是由HTML标签直接表示的内容，比如首行文字、首字母或者生成的内容等等。
注意：一个基础选择器只能附加搭配一个伪元素
选择器，它与伪类选择器的区别是有两个冒号:: 。
常见伪元素选择器
::first-letter
选中块级元素第一行的第一个字母，也就是说块级元素第一行为文字可使用。
div::first-letter {
font-size: 30px;
color: orange;
}
::first-line
选中块级元素第一行，也就是说块级元素第一行为文字可使用。
div::first-line {
font-size: 20px;
color: red;
}
::selection
使用鼠标或其他选择设备选中的部分进行样式渲染。
/* 选中的文字颜色会变为红色，背景色为天蓝色 */
div::selection {
color: red;
background-color: skyblue;
}
::placeholder
它作用于<input>或<textarea>元素中的占位文本。
/* 文本字体为橙色，切背景为天蓝色 */
input::placeholder {
color: orange;
background-color: skyblue;
}
::before 和::after
before会在选中元素之前添加一个伪元素，而after会在选中元素之后，添加一个伪元素。通过 content属性来为一个元素添加修饰性的内容。
注意： ::before 和::after必须要包含content属性
HTML代码
<div class="item">
<div></div>
</div>
CSS代码：&指向父元素也就是包裹它的元素本身，它也叫父占位符。
.item div{
position: relative;
border: 1px solid #03A9F3;
&::before,
&::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
transition: .3s ease-in-out;
}
&::before {
top: -5px;
left: -5px;
border-top: 1px solid var(--borderColor);
border-left: 1px solid var(--borderColor);
}
&::after {
right: -5px;
bottom: -5px;
border-bottom: 1px solid var(--borderColor);
border-right: 1px solid var(--borderColor);
}
&:hover::before,
&:hover::after {
width: calc(100% + 9px);
height: calc(100% + 9px);
}
}
通配选择器
要使所有元素满足一个样式，可以使用通配选择器*
CSS代码
*{
margin:0;
padding:0;
}标签选择器
针对HTML的标签元素，具有和类选择器差不多的效果，可以多个属于同标签元素进行渲染，还可以跟类选择器搭配使用，例如：div.fruit表示所有div标签里的类值为fruit的。
CSS代码
div {
color: grey;
}参考资料：
CSS 伪类 | 菜鸟教程
CSS基础之伪元素选择器-CSDN博客
