css选择器

常用选择器

id选择器

特点：id是唯一的，不能重复

<div id="box"></div>

#box{}

类选择器

<div class="box"></div>

.box{}

标签选择器

<div id="box"></div>

div{}

属性选择器

<div id="box" ></div>
<a href></a>

div[id="box"]{}
a[href]{}

通用选择器

给网页元素做一些通用的样式，margin:0和padding:0用来清除自带网页的内外间距。

*{
margin: 0;
padding: 0;
}

并集选择器

#box,#xxx{}

交集选择器

<div id="box" class="xxx"></div>

#box.xxx{}

后代选择器

<div id="box">
  <div class="sub">
     <div class="s1">
     </div>
  </div>
</div>

.box .s1 {}

子选择器

<div id="box">
  <div class="sub">
     <div class="s1">
     </div>
  </div>
</div>

.box>.sub>.s1{}

相邻兄弟选择器

兄弟只能从上往下选

<div class="s1"></div>
<div class="s2"></div>
<div class="s3"></div>

.s1+.s2{}

普通兄弟选择器

~

<div class="s1"></div>
<div class="s2"></div>
<div class="s3"></div>

.s1~.s3{}

伪类选择器

hover

nth-child

first-child

last-child

nth-child(odd/even) odd 奇数 even 偶数

否定伪类选择器

:not()

伪元素选择器

before

after

不能被选中

优先级

!important > 内联选择器 > ID选择器 > 类选择器 > 属性选择器 > 伪类 > 元素选择器 > 通配符选择器 > 继承选择器

低级别不能覆盖高级别