css选择器有哪些？
1.css选择器
2.id选择器
3.tag（标签选择器）
4.伪类选择器
5.属性选择器
6.子元素选择器
7.包含选择器
8.兄弟选择器
9.相邻选择器
10.群选择器
选择器的优先级
- !important>行内>id>class>tag>通配符*
语法
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">.lis{background-color:red;}#lis{background-color:#000;}div{background-color:pink;}ul>li{color:red;}ul li{color:green;}</style></head><body><div class="lis">> "我是class选择器缩写.lis"</div><div id="lis">> "我是id选择器缩写为#lis"</div><div>"我是tag标签选择器"</div><ul><li>item1</li><li>item2</li><li>itme3</li><li>item4</li><li><ul><li>item_1</li><li>item_2</li></ul></li></ul></body></html>
类选择器要有一个父元素作为查询起点
伪类选择器语法
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">/*选中ul的所有子元素*/ul>li{color:red;}/*选中最后一个li*/ul li:last-child{background-color: red;}/*选中第三个li*/.list :nth-child(3){background-color: pink;}/*选中第三个li同上*/.list > li:nth-of-type(3){background-color: red;}/*选中唯一li*/ul li:only-of-type{background-color: green;}/*.first之后相邻兄弟元素*/.first+p{background-color: #000;}/*.first所有的兄弟元素*/.first~p{background-color: #ccc;}</style></head><body><ul class="list"><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li><li>item6</li><li>item7</li><p class="first">我是第一个p元素</p><p>我是第二个p元素</p><p>我是第三个p元素</p><li>item8</li><li>item9</li></ul><ul><li>我是p元素</li></ul></body></html>
总结：
- 选择任何一个元素：:nth-of-type(n)
- 选择第一个：:first-of-type
- 选择最后一个：:last-of-type
- 选择倒数某一个：:nth-last-of-type(n)
- 唯一子元素：:only-of-type