一、选择器
1.基础选择器
| 选择器 | 功能 |
|---|
| .intro | 选择 class=“intro” 的所有元素 |
| #firstname | 选择 id=“firstname” 的元素 |
| * | 选择所有元素 |
| div | 选择所有的div元素 |
| .div,p | 选择所有的div和p元素 |
2.结构选择器
| 选择器 | 功能 |
|---|
| div p | div父辈下面所有子孙辈的p标签（可以子孙重孙等等） |
| div>p | div父辈下面子辈的p标签（只可以子辈） |
3.属性选择器
| 选择器 | 功能 |
|---|
| h1[target] | h1标签里面写着target属性的内容 |
| a[href*=“baidu”] | a标签里面的href属性里面有“baidu”这几个词 |
| img[src$=“.jpeg”] | img标签里面的src结尾是“.jpeg”这几个词 |
| a[href^=“https”] | a标签里面的href属性开头是“https”这几个词 |
<style>
h1[target]{
color: red;
}
style>
<body>
<h1 target>995h1> // 红色
<h1 target>9355h1>// 红色
<h1 tar>9355h1>// 默认的黑色
body>
<style>
a[href*="baidu"]{
color: pink;
}
style>
<body>
<a href="https://www.baidu.com">5555555555a>
<a href="https://www.qq.com">5555555555555555555a>
body>
4.伪类选择器
| 选择器 | 功能 |
|---|
| a:hover | 鼠标移动到a标签上展示的样式 |
| input:focus | 选择获得焦点的 input 元素(应用在input元素身上)展示的样式(需要写：outline:none;覆盖默认样式) |
| span:nth-child(2) | 第二个span的样式 |
| span:nth-child(2n) | 第偶数个span的样式（n从0，1，2，…） |
| span:nth-child(2n+1) | 第奇数个span的样式（n从0，1，2，…） |
| span::before | 在span元素前面添加内容的样式（属于单独为span前内容加样式；其属于行内元素） |
| span::after | 在span元素后面添加内容的样式（属于单独为span后内容加样式；其属于行内元素） |
<style>
.span::before {
content: '⇰';
display: block;
color: red;
background: yellowgreen;
width: 100px;
height: 100px;
}
style>
<body>
<span class="span">996span>
body>
二、权重
解释：权重顾名思义，其就是上述标签的优先执行顺序
顺序：!important>行内>id>class>标签与伪元素>*
通俗：下述从上到下优先级降低
举例代码：<span id="span" class="span">996span>
!important： span{color:red !important;} // 此重点在!important并不在span标签（!important让某个属性优先级最高）
行内： <span id="id" class="span" style="color:pink;">996span>// 此重点style="color:pink;"
id: #sapn{color:blue;}
class: .span{color:yellow;}
标签与伪元素： span{color:red;}
*: *{margin:0;padding:0;}