属性选择器
input[type='text']{
}
后代选择器
div p div里的所有后代元素
子元素选择器
div>p div里的所有p子元素，p可以多个但必须是子元素
相邻后兄弟选择器
div+p div后紧跟的那一个元素p。1p和div必须同父元素，2p必须紧跟div。
普通后兄弟选择器选择器~
所有 <div> 元素的所有相邻兄弟元素 <p> 1.p可以不紧跟div 2.p和div必须同父元素.demo如下:
<!DOCTYPE html>
<html>
<head>
<style>
div~p
{
background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<h1>段落 4。不在 div 中。</h1>
<p>段落 3。不在 div 中。</p>
<h1>段落 4。不在 div 中。</h1>
<div>
<p>段落 4。不在 div 中。</p></div>
</body>
</html>
伪类：给元素的不同状态定义不同的CSS样式。
伪类后没有接其他类或者id，那么只针对本元素。
如果有，则看两个元素的关系.dropdown和.dropdown-content的关系，用选择器来表示
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover~.dropdown-content {
display: block;
}
selector.class:pseudo-class {property:value;}
anchor伪类 必须按一下顺序定义
a.red:link{}
<a class="red" href="#"></a>
a:visited{}
a:hover{}
a:active{
}
CSS - :first - child伪类
匹配作为任何元素的第一个子元素的 <p> 元素：
p:first-child{
}
p>li{}匹配所有p元素下的所有li子元素
匹配所有<p> 元素中的第一个 <i> 元素
p>li:first-child{}
伪元素：用来选取或者添加HTML中没有的元素。在真正的HTML结构中没有，但是CSS样式中体现。::
p::first-line{
}
p::first-letter{
}
p::before{ <!--可以在p元素的内容前面插入新内容比如文字，图片等-->
content:url('1.jpg');
}