css选择器主要分为两种，一种是基础选择器，一种是组合选择器。这次就来记录学习基础选择器的一些知识！

1. * 全量选择器

顾名思义，全量选择器就是所有的元素都可以匹配的选择器，所以一般不使用，书写方式如下：

*{
color:14px;
}

2. id选择器

id是描述页面上独一无二的布局，一般在大的布局上会使用id来标记。在html文件中，id是不能重复的。假设有下列元素，用id选择器的方式如下：

<p id="brief">id选择器示例</p>

#breif {
    color:green;
    font-size:20px;
}

3. class选择器

class是描述页面上某一类元素的，比如button。示例如下：

<div>
    <p>class选择器示例</p>
    <button class="btn">btn1</button>
    <button class="btn">btn2</button>
    <button class="btn">btn3</button>
</div>

.btn{
    background-color: red;
    font-size: 15px;
    color: green;
}

4. 标签选择器

标签选择器，就是选择一类标签，比如p，div等等

<div>
    <p>标签选择器</p>
    <a href="#">a1</a>
    <a href="">a2</a>
</div>

a{
    color: #fde340;
}

5. 属性选择器

属性选择器就是当元素满足某一属性时，采用的样式

<div>
  <p color=yellow>p1</p>
  <p color=yellow>p2</p>
</div>

[color=yellow]{
    font-size: 50px;
}

6. 伪类选择器

伪类可以理解为元素的不同状态，常见的有以下几种：

a:link { ... }
a:visited { ... }
a:hover { ... }
a:active { ... }

li:first-child { ... }
li:last-child { ... }

body :not(p) { ... }
p:not(.warning) { ... }

7. 伪元素选择器

伪元素就是元素，和伪类最大区别是伪类为:，伪元素为::。常见的主要有：

::after

.clearfix::after {
  content: '';
  clear: both;
  display: block;
}

::before

.happy::before {
  content: '😁';
}

::selection

p::selection {
  color: white;
  background: blue;
}

8.参考链接

css选择器
示例记录