直接选择

id 选择器 (#id)

类选择器 (.class )

通配符选择器（*）

选择所有元素

  1. *,
  2. *::before,
  3. *::after {
  4.   box-sizing: border-box;
  5.   margin: 0;
  6.   padding: 0;
  7. }

元素选择器 (element)

根据元素之间的关系选择

并列选择器 (element,element)

， 为所有元素设置相同样式，a,b 表示为a和b设置相同样式；

相邻(兄弟)选择器(element+element) (element~element)

同级元素即元素层级相同，有共同的父元素，也可以叫做兄弟元素。所以“兄弟”选择器也就是选择同层级元素。

1.“~” 选择后面的所有同级元素
a~b 表示选择a后面的所有同级b；

2.“+” 相邻兄弟选择器，选择紧随在后面的同级元素
a+b表示选择a后面的第一个同级b。

div+p选择紧跟在

元素之后的 第一个

元素

后代选择器（element element）

a b 表示选择 a 元素内的所有 b 元素

子元素选择器 （element > element）

E>F 子元素选择器，匹配所有E元素的子元素 F
div>p选择所有父级是

元素的

元素

属性选择器

通过属性可以更精准的选择元素。

属性名称选择器（[attribute]）

根据属性名称来选择含有某个属性的所有元素，比如[target]选择所有带有target属性的元素

例：

  1. *[title] {color:red;}
  2. image[alt] {}
  3. p[class] {}

属性值选择器（[attribute=value]）

[attribute~=value] 属性全包含 value

[title~=flower] 选择标题属性包含单词”flower”的所有元素，必须全匹配，如果 value 是 flowers 就匹配不上。

[attribute|=language]

[lang|=en] 选择 lang 属性等于 en，或者以 en- 为开头的所有元素

css3 新增属性选择器 [att*=val]、[att^=val]和[att$=val]

在CSS3中追加了三个属性选择器：[att*=val]、[att^=val]和[att$=val]

例：
[class*= “col-“] 代表包含 col- 的类名 ，比如说 col-md-4 ,demo-col-2 等都可以匹配到。
[class^=”col-“] 代表 以 col- 开头的类名，比如说 col-md-4
[class$=”col-“] 代表以 col- 结尾的类名

这是不是和正则有点像呢？
^[0-9] 代表 匹配以数字开头的
而 [0-9]$ 代表匹配以数字结尾的