除了经常用到的ID选择器、类选择器、元素选择器。CSS还有如简单选择器、上下文选择器，伪类选择器、伪元素选择器等。今天我们用案例来进行演示。
简单选择器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>简单选择器</title><style>/*简单选择器*//*类选择器*/.container {height: 300px;width: 650px;}.item {float: left;text-align: center;line-height: 100px;background-color: cadetblue;width: 100px;height: 100px;margin-right: 20px;margin-bottom: 20px;color: white;font-size: 50px;}/*多个类复合应用*/.item.center {background-color: tomato;}/*ID选择器*/#first {background-color: violet;}.item#first {background-color: yellowgreen;} /*会覆盖上面的单ID选择器，因为优先级高*//* * 号属于元素级别， #first默认是 *#first. *//*id,class可以添加在任何元素上，*/#first.item {background-color: blue;} /*优先级比.item#first高*/</style></head><body><div class="container"><div class="item" id="first">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item center">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div></div></body></html>
上下文选择器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>上下文选择器</title><style>/*ID选择器以后常用在表单中和锚点中，不建议CSS中用很多的ID选择器 ID和表单中的label对应*/.container {height: 300px;width: 650px;}.item {float: left;text-align: center;line-height: 100px;background-color: cadetblue;width: 100px;height: 100px;margin-right: 20px;margin-bottom: 20px;color: white;font-size: 50px;}/*后代选择器*/.container div {border: 3px salmon solid;}/*父子选择器*/body > div {border: turquoise 5px solid;} /*只针对他的儿子级设置*//*同级相邻选择器*/.center + .item {background-color: slateblue;}/*同级所有选择器*/.center ~ .item {background-color: tan;}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item center">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div></div></body></html>
伪类选择器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>伪类选择器</title><style>.container {height: 300px;width: 650px;}.item {float: left;text-align: center;line-height: 100px;background-color: cadetblue;width: 100px;height: 100px;margin-right: 20px;margin-bottom: 20px;color: white;font-size: 50px;}/*匹配第一个子元素*/.container .item:first-child {background-color: thistle;}/*匹配最后一个子元素*/.container > .item:last-child {background-color: thistle;}/*匹配指定的一个子元素，排序从1开始*/.container .item:nth-child(3) {background-color: thistle;}/*匹配奇数*/.container .item:nth-child(odd) {background-color: violet;}.container .item:nth-child(2n-1) {background-color: violet;}/*匹配偶数*/.container .item:nth-child(even) {background-color: yellow;}.container .item:nth-child(2n) {background-color: yellow;}/*指定位置开始，选择剩下所有的元素*/.container .item:nth-child(n + 4) {background-color: turquoise;}/*只取前三个*/.container .item:nth-child(-n + 3) {background-color: black;}/*只取最后三个*/.container .item:nth-last-child(-n + 3) {background-color: blueviolet;}/*取第8个*/.container .item:nth-last-child(2) {background-color: red;}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item center">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div></div></body></html>
结构伪类选择器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>结构伪类选择器：分组不区分元素类型</title><style>.container {height: 300px;width: 650px;}.item {float: left;text-align: center;line-height: 100px;background-color: cadetblue;width: 100px;height: 100px;margin-right: 20px;margin-bottom: 20px;color: white;font-size: 50px;}/*匹配最后一个元素*/.container div:last-of-type {background-color: blue;}/*匹配第一个span元素*/.container span:first-of-type {background-color: yellow;}/*匹配指定的一个div元素*/.container div:nth-of-type(3) {background-color: red;}/*匹配前两个div元素*/.container div:nth-of-type(-n + 2) {background-color: tomato;}/*匹配倒数两个div元素*/.container span:nth-last-of-type(-n + 2) {background-color: yellowgreen;}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><span class="item">5</span><span class="item">6</span><span class="item">7</span><span class="item">8</span><span class="item">9</span></div></body></html>
伪类与伪元素
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>伪类与伪元素</title><style>#login-form {display: none;}/*target必须和ID配合，实现锚点操作 称为目标选择器*//*当前#login-form的表单元素被a的锚点激活的时候执行*/#login-form:target {display: block;}/* :focus 获取焦点的时候执行 */input:focus {background-color: yellow;}/* ::selection设置被选中元素的前景色和背景色 */input::selection {background-color: red;color: white;}/*:not()选择不满足条件的元素*/.list > :not(:nth-of-type(3)) {color: red;}/*伪元素前面是双引号，伪类是单引号，如果不兼顾IE8. 伪元素也可单引号*//*::before和::after*/.list::before {content: "前面添加内容";font-size: 1.5rem;color: yellowgreen;}.list::after {content: "后面添加内容";color: violet;}</style></head><body><!-- <a href="#login-form">点击打开登陆</a> --><button onclick="location='#login-form'">点击登陆</button><form action="" method="POST" id="login-form"><label for="name">用户名</label><input id="name" type="text" /><label for="password">密码</label><input type="password" id="password" /></form><hr /><ul class="list"><li>item1</li><li>item2</li><li>item3</li><li>item4</li></ul></body></html>
" class="reference-link">
总结：CSS的选择器很多，选择一个元素可以用多种方法来实现。你懂的越多，代码就会写的越简洁。
建议大家做好笔记，经常测试使用，只有多使用，才能牢记于心。
备注：内容中咋多出了 “ class=”reference-link”> 我写的文章中是没有的。添加最后一个图片出现的！