css单位和css选择器也是经常被面试官问到，虽然说简单吧，但是想要全面的答出来可不容易，下面总结一下，以备用。
1、css单位
css中的单位无非就是尺寸和颜色方面的单位罢了。
尺寸：
颜色：
2、css选择器
记得在哪片博客中，读到对css选择器的理解，个人觉得通俗易懂。
CSS选择器：就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。
选择器分为两大类：基本选择器和扩展选择器。
（1）基本选择器
- 标签选择器：针对一类标签
- ID选择器：针对某一个特定的标签使用
- 类选择器：针对你想要的所有标签使用
- 通用选择器（通配符）：针对所有的标签都适用（不建议使用）
a. 标签选择器：选择器的名字代表html页面上的标签，类似下图这样，就不侮辱你们智商了。
b. ID选择器：规定用#来定义（名字自定义）
c. 类选择器：规定用圆点.来定义
d. 通配符*
通用选择器，将匹配任何标签。不建议使用，IE有些版本不支持，大网站增加客户端负担。
（2）高级选择器：
- 后代选择器：用空格隔开
- 交集选择器：用.隔开
- 并集选择器（分组选择器）：用逗号隔开
- 伪类选择器
a. 后代选择器: 定义的时候用空格隔开
空格就表示后代。.div1 p 表示.div1的后代所有的p。
这里强调一下：这两个标签不一定是连续紧挨着的，只要保持一个后代的关联即可。也就是说，选择的是后代，不一定是儿子。
子代选择器：只选择子代。用 “>”隔开表示。
b. 交集选择器：下面有张图，一看就明白了。
c. 并集选择器：定义的时候用逗号隔开，类似下图这样。
d. 相邻兄弟选择器:中间用“+”隔开。像E+F这样，紧接在E元素后面的同级元素F，相邻兄弟选择器，有相同的父级。
E. 属性选择器：
1、 E[attr] 匹配具有attr属性的E元素
div[title]{
width:100px;
height:100px;
margin-top:2px;
background:pink;
} //匹配到下文中的第一个和第三个div元素 因为他们含有title属性
<div title="width"></div>
<div></div>
<div title="height"></div>
2、E[attr=val]
匹配具有attr属性且值只为val的的E元素（注意 属性值要用引号引起来，我自己试了试好像不用括号也可以。）
div[title="height"]{
width:100px;
height:100px;
margin-top:2px;
background:pink;<br>} //匹配到下文中的第三个div元素
<div title="width"></div>
<div></div>
<div title="height"></div>
3、E[attr~=val]
匹配属性值为attr，并包含这个值的E元素，用于选取属性值中包含指定词汇的元素。
div[class~="c1"]{
width:100px;
height:100px;
margin-top:2px;
background:pink;
} //选择到下方第一个和第二个div元素
<div class="c1"></div>
<div class="c1 c2"></div>
<div class="c2c1"></div>
4、E[attr|=val]
匹配所有属性为attr，值为val或者以 var- 开头的E元素
div[class|="c1"]{
width:100px;
height:100px;
margin-top:2px;
background:pink;
}//选择到下面当中的第一个和第三个元素
<div class="c1"></div>
<div class="c1cs"></div>
<div class="c1-c2"></div>
5、E[attr][attr2=val]匹配所有 有attr1属性 且有attr2属性，且attr2的值为val的E元素，这个就是写出几个属性选择器，并且都要同时满足他们的条件。
div[title="width"][class]{
width:100px;
height:100px;
margin-top:2px;
background:pink;
} //选择到下面的第一个div元素
<div title="width" class="box"></div>
<div title="width"></div>
f. 伪类选择器
对于<a>标签，其对应几种不同的状态：
link：超链接点击之前
visited：超链接点击之后
focus：是某个标签获得焦点的时候（比如某个输入框获得焦点）
hover：鼠标放到某个标签上的时候
active：点击某个标签没有松鼠标时
a伪元素选择器
1> ：before 在元素
div:before{
content: "before插入的元素";
}
//在div所有元素的最前面插入这个
<div>
<p>这个是p</p>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
2> :after 在元素后面插入内容，插到最后一个子元素的后面。
:after{content:"";}
<div></div>
（3）css3中新增的选择器
一. 关联选择器
E1~E2(选择E1后面的兄弟E2)
div~p{
width:100px;
height: 100px;
margin-top: 2px;
background: #000;
}
//div后面的三个p元素都选择到了
<div></div>
<p></p>
<p></p>
<p></p>
二、 属性选择器新增
1. [attr^=" .."] 以....开头的元素
div[class^="de"]{
width:100px;
height: 100px;
margin-top: 2px;
background: #000;
} //选择到了前面三个div元素
<div class="de1"></div>
<div class="de"></div>
<div class="dedkjsfkld"></div>
<div class="1fde"></div>
2. [attr$="... "] 以...结束的元素
div[class$="de"]{
width:100px;
height: 100px;
margin-top: 2px;
background: #000;
}
//选择到了前三个
<div class="de1de"></div>
<div class="de"></div>
<div class="dedkjsfklde"></div>
<div class="1f"></div>
3. [attr*=""] 选择到包含值的元素
div[class*="de"]{
width:100px;
height: 100px;
margin-top: 2px;
background: #000;
}
//选择到下面的 1 2 4 都包含de字母
<div class="de1de"></div>
<div class="de"></div>
<div class="dld"></div>
<div class="1def"></div>
三、伪类新增的选择器 下面都用p来举例子，其他的也一样
下面当中就举一个例子，其他的那些自己去实验一下，可以用这个例子来实验
这里是有of的是从p元素当中选p
1. :first-of-type
p:first-of-type{
width:100px;
height:100px;
background: #000;
}//父级下面所有p元素的第一个
<div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
2. :last-of-type
p:last-of-type 父级下面所有p元素的最后一个
3. only-of-type
p:only-of-type 父级下面只有一个p元素，其他的元素不能是p，如果有其他元素那么会选不中。
4. ：nth-of-type
p:nth-child(n) 选中父级元素中第n个p
5. ：nth-last-of-type(n)
选择p，父级元素中倒数第n个p元素
下面是没有of的是在子元素中选择
6. :only-child
p:only-child 选择p，p必须为他们各自父级的唯一一个子元素
p:only-child{
width:100px;
height: 100px;
background: #000;
}<br> //下面的这个只能选择到第一个div当中的p
<div>
<p></p>
</div>
<div>
<p></p>
<span></span>
</div>
<div>
<p></p>
<p></p>
<p></p>
</div>
7. :last-child
p:last-child 选择p，p必须为父级的最后一个子元素
8. nth-child（n）
p:nth-child(n) 父元素的第n个元素，叫p元素
9 nth-last-child(n)
p：nth-last-child(n) 选择p，也就是父级的倒数第n个元素，叫p。
后面的伪类没有什么规律了，别着急，一个一个慢慢来。
只是举例子，不要以为括号里面的内容是固定的。
1. ：not（.c1） 选择到class除了c1的p 括号里面的内容还可以是id等
p:not(.c1){
width:100px;
height: 100px;
margin-top: 2px;
background: #000;<br>}//下面的元素当中除了第一个class为c1的p元素其他的都被选中了。
<div>
<p class="c1"></p>
<p class="c2"></p>
<p id="box"></p>
<p></p>
<p></p>
</div>
2. :empty 选择倒标签内容为空的规定元素
p:empty{
width:100px;
height: 100px;
margin-top: 2px;
background: #000;
}//会选择到下面的第二个p元素，因为他没有内容
<div>
<p>11</p>
<p></p>
<p>11</p>
<p>11</p>
<p>1</p>
</div>
3. p:target 选择倒当前被锚点激活的p
p:target{
width:100px;
height: 100px;
margin-top: 2px;
color:#fff;
background: #000;
} //点击a的内容，p标签的样式会被选中激活
<a href="#a1">点我</a>
<div></div>
<p id="a1">p标签的内容</p>
4. ：：selection 被用户选中的p 这句话什么意思呢，来看下面的截图效果
p::selection{
width:100px;
height: 100px;
margin-top: 2px;
color:#fff;
background: #000;
}
<p>111</p>
<p>222</p>
<p>333</p>
<p>444</p>
<p>555</p>
5. input:disable
选择到不能被操作的input框
6. input：enable
选择到能被cao操作的input框
input:enabled{
background:yellow;
}
input:disabled{
background:red;
}
//一般可以写内容的都是可以被操作的，加上disabled的属性和disabled的值的是不可以被操作的
<input type="text" value="">
<input type="text">
<input type="text" disabled="diabled">
7. input:checked
选择到被选中的input，一般用于js
input:checked{
width:40px;
height:40px;
}//就是框被打上对勾，被选中的元素会被选中
<input type="checkbox" checked="" value="">足球
<input type="checkbox" value="">篮球
css选择器这里已经列举的很详细了，包括自己写，也参考整理了一些别人文章中的。