一.css选择器用于选择你想要的元素的样式
| 选择器 | 示例 | 示例说明 |
| class | intro | 匹配所有的class="intro"的元素 |
| #id | #firstname | 匹配所有id="firstname"的元素（id的值不可以重复） |
| * | * | 匹配所有的元素 |
| element | p | 匹配所以的<p>元素 |
| element element | div p | 匹配所有<div>元素内的<p>元素 |
| 带有特殊符号（, > + ~）的选择器 | ||
| element,element | div,p | 匹配所有<div>元素和<p>元素 |
| element>element | div>p | 匹配<div>下所有直接子元素<p>元素 |
| element+element | div+p | 匹配与<div>元素同级紧接着之后的<p>元素 |
| element1~element2 | p~ul | 选择<p>元素之后的每一个<ul>元素 |
| 属性选择器 | ||
| [attribute] | [href] | 选择所有带有href属性的元素 |
| [attribute=value] | [href="https://www.baidu.com"] | 选择所有href属性的值为https://www.baidu.com的元素 |
| [attribute^=value]或[attribute|=value] | [href^="https"]或[href|="https"] | 选择每一个href属性的值以"https"开头的元素 |
| [attribute$=value] | [href$="com"] | 选择每一个href属性的值以"com"结束的元素 |
| [attribute*=value]或[attribute~=value] | [href*="com"]或[href~="com"] | 选择每一个href属性的值包含"com"的元素 |
| 伪类选择器 | ||
| :link | a:link | 选择所有未被访问的链接 |
| :visited | a:visited | 选择所有已经被访问过的链接 |
| :active | a:active | 选择所有活动的链接 |
| :hover | a:hover | 鼠标在链接上时 |
| :focus | input:focus | 选择具有焦点的输入元素 |
| :first-letter | p:first-letter | 选择每一个<p>元素的第一个字母 |
| :first-line | p:first-line | 选择每一个<p>元素的第一行 |
| :first-child | p:first-child | 指定只有当<p>元素是其父元素的第一个子元素的样式 |
| :before | p:before | 在每个<p>元素之前插入内容 |
| :after | p:after | 在每个<p>元素之后插入内容 |
css选择器
原文地址：https://www.cnblogs.com/longyufengyun/p/9277451.html