1、关系选择器
首先，先了解有几种关系：
- 父元素：直接包含子元素的元素
- 子元素：直接被父元素包含的元素
- 祖先元素：直接或间接的包含后代元素的元素；所以父元素也是祖先元素
- 后代元素：直接或间接被祖先元素包含的元素；子元素也是后代元素
- 兄弟元素：拥有相同父元素的元素
1、子元素选择器：
作用：选中指定父元素包含的子元素
语法：父元素>子元素{}
2、后代元素选择器：
作用：选中指定元素内的后代元素
语法：祖先 后代{} （中间是用空格隔开的）
3、兄弟选择器
作用：选中下一个兄弟
语法：前一个+后一个{} (注意它们是连在一起的，如果中间隔着其他的元素，将不会生效)
作用：选择下边的所有兄弟
语法：兄~弟{} （注意，这种情况下，隔着其他的元素也会起作用，但是两种方法都是选择后边的）
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div.test>span{color:cadetblue;}
/* 如果有两个div咋办，用到上次说到的类选择器 ,就可以指定了*/
div span{color:orange;}
div>p>span{font-size: 30px;}
p+span{font-size: 30px;}
p~span{font-size: 40px;}
</style>
</head>
<body>
<h1>各种选择器是可以混合使用的</h1>
<div class="test">
我是一个div
<p>我是div中的P元素
<span>我是p中的span</span>
</p>
<div>这是一个测试的div</div>
<span>我是div中的span</span>
<span>我是div中的span</span>
<span>我是div中的span</span>
</div>
<div class="tt">
<span>我是另一个div中的span</span>
</div>
</body>2、属性选择器
- [属性名]{} 选择含有指定属性名的元素
- [属性名=属性值]{} 选择指定属性名指定属性值的元素
- [属性名^=属性值]{} 选择指定属性名中以指定属性值开头的元素
- [属性名$=属性值]{} 选择指定属性名以指定属性值结尾的元素
- [属性名*=属性值]{} 选择指定属性名中含有指定属性值的元素
<style>
[title]{color: orchid;}
[title="abc"]{color: red;}
[title^="abc"]{font-size: 30px;}
[title$="abc"]{font-size: 50px;}
[title*="e"]{color:blue;}
</style>
</head>
<body>
<p title="abc">会当凌绝顶</p>
<p title="abcde">一览众山小</p>
<p title="helloabc">他日若遂凌云志</p>
<p>敢笑黄巢不丈夫</p>
<p>大漠孤烟直</p>
<p>长河落日圆</p>3、伪类选择器
伪类，表示不存在的类，特殊的类；伪类一般情况下都会以：开头
- :frist-child 第一个子元素
- :last-child 最后一个子元素
- nth-child() 选中第n个子元素 n的范围是0到正无穷；2n或者even表示选择偶数位子元素；2n+1或者odd表示选中奇数位子元素
以上的这些伪类都是根据所有的子元素来排序的，所有如果在它们中加多一个元素如span顺序就会不一样了
- frist-of-type
- last-of-type
- nth-of-type
这三个和上面三个作用是一样的，只不过它们是在同类元素中排序的
4.：not(）否定伪类 将符合条件的元素从选择器中去除
/* ui>li:first-child{color: blue;} */
/* ui>li:last-child{color:cadetblue;} */
ui>li:nth-child(even){color: chartreuse;}
ui>li:nth-of-type(even){color: blue;}
/* ui>li:first-of-type{font-size: 30px;} */
ui>li:not(:nth-of-type(3)){font-size: 40px;}
</style>
</head>
<body>
<ui>
<span>我是来测试的</span>
<li>我是第一个</li>
<li>我是第二个</li>
<li>我是第三个</li>
<li>我是第四个</li>
<li>我是第五个</li>
</ui>
</body>4、a元素选择器
a元素的伪类，以a开头
- a:link{} 用于表示没有访问过的正常链接
- a:visited{} 用于表示访问过的链接
- a:hover{} 鼠标移入的链接
- a:active{} 鼠标点击的链接
5、伪元素选择器
伪元素，在页面中一些不真实存在的元素（特殊位置），以：：开头
- ::first-letter 第一个字母
- ::frist-line 第一行
- ::selection 选中的内容
- ::before 元素的开始
- ::after 元素的结束
before和after很重要，后期会用到，它们的使用，需要和content配合使用
p.test::first-letter{font-size: 30px;}
p::first-line{background-color:tomato;}
p::selection{background-color: dodgerblue;}
div::before{content:"abc";color: red;}
div::after{content:'hehe';color: forestgreen;}
5万+
