后代选择器（包含选择器）：（元素1 元素2 { 样式声明 }）
可以选择父元素里面的子元素。把外层标签写在前面，内层标签写在后面，中间用空格分隔。（当标签发生嵌套时，内层标签为外层标签的后代）
div span { text-align: center } <div> <span>span标签通过后代选择器实现居中</span> </div>
子选择器：（元素1>元素2 { 样式声明 }）
只能选择作为某元素的最近一级子元素。（即 只能选择亲儿子）
div>a { color: red; // 只会让div对应的子标签a变成红色 } <div> <a>子标签</a> <p> <a>非 子标签</a> </p> </div>
并集选择器：（元素1,元素2 {样式声明}）
并集选择器可以选择多组标签，为多个标签定义相同的样式。
span,p { color: blue; } <div> <span>标签内容1</span> <p>标签内容2</p> <div>标签内容3</div> </div>
伪类选择器：
伪类选择器用于向某些选择器添加特殊效果，比如 给链接添加特殊效果，或者选择第1个，第n个元素，等。
- 链接伪类选择器（为了确保生效，写法顺序为：:link; :visited; :hover; :active）
| a:link | 选择所有未被访问的链接 | <a href="#"><未被访问的链接显示红色/a> a:link {color: red;} |
| a:visited | 选择所有已经被访问的链接 | <a href="#"><被访问的链接显示蓝色/a> a:visited {color: blue;} |
| a:hover | 选择鼠标指针位于其上的链接 | <a href="#"><鼠标放在上面显示粉色/a> a:hover {color: pink;} |
| a:active | 选择活动链接（鼠标按下未弹起的链接） | <a href="#"><鼠标按在上面显示绿色/a> a:active {color: pink;} |
:focus 伪类选择器
用于选取获得焦点（光标）的表单元素；用于input类的表单元素。
|
<input type="text" placeholder="鼠标点击当前的input输入框，改变边框的颜色"> input:focus {outline-color: red}
|
伪元素选择器
::before 在标签内部的前面插入内容；
::after 在标签内部的后面插入内容；
*** before和after创建的标签属于行内元素；在html里面找不到；before和after必须有content属性。
.aa { background: pink; width: 200px; height: 200px; margin-bottom: 30px; position: relative; } .aa:hover::before { display: block; } .aa::before { content: ''; display: none; width: 100px; height: 100px; position: absolute; top: calc(50% - 50px); right: calc(50% - 50px); background: blue; } <div class="aa">刺杀者之心</div>
属性选择器：根据标签特定的属性来选择标签，改变其样式
| 选择符号 | 介绍 |
| E[att] | 选择具有att属性的E标签 |
| E[att=val] | 选择具有att属性且值等于val的E标签 |
| E[att^=val] | 选择具有att属性且值以为val开头的E标签 |
| E[att$=val] | 选择具有att属性且值以为val结尾的E标签 |
| E[att*= val] | 选择具有att属性且值包含val的E标签 |
/* 利用属性选择器，选择某个属性 */ input[placeholder] { color: red; } /* 利用属性选择器，选择某个属性 = 某个值 */ input[type=password] { color: gold; } /* 利用属性选择器，选择某个属性且值以某些字母等开始的标签 */ li[class^=li] { color: aqua; } /* 利用属性选择器，选择某个属性且值以某些字母等结尾的标签 */ li[class$=ux] { color: green; } /* 利用属性选择器，选择某个属性且值包含某些字母等结尾的标签 */ li[class*=p] { color: orange; } <!-- 属性选择器 --> <input type="text" placeholder="用户名"> <input type="password"> <ul> <li class="li1">xxxxxx</li> <li class="li2">xxxxxx</li> <li class="li3">xxxxxx</li> <li class="12uu">xxxxxx</li> <li class="12ux">xxxxxx</li> <li class="12uu">xxxxxx</li> <li class="12pux">xxxxxx</li> <li class="12oux">xxxxxx</li> <li class="12pux">xxxxxx</li> </ul>
结构伪类选择器
1⃣️根据父级标签选择子标签
| 选择符号 | 介绍 |
| E:first-child | 匹配父标签中的第一个子标签E |
| E:last-child | 匹配父标签中的最后一个子标签E |
| E:nth-child(n) | 匹配父标签中的第n个子标签E |
| E:first-of-type | 匹配指定类型E的第一个标签 |
| E:last-of-type | 匹配指定类型E的最后一个标签 |
| E:nth-of-type(n) | 匹配指定类型E的第n个标签 |
****nth-child(n) 对父标签里面所有的子标签排序；先去第n个子标签，然后看看是否和E匹配；
nth-of-type(n) 对父标签指定的子标签进行排序；先去匹配E，然后再去找第n个子标签。
/* 结构伪类选择器 */ div ul li:first-child { color: red; } div ul li:last-child { color: blue; } div ul li:nth-child(2n) { color: gold; } div ul li:nth-child(3) { color: green; } .dd div:first-of-type { color: red; } .dd div:last-of-type { color: blue; } .dd div:nth-child(3) { color: green; } <div> <input type="text" placeholder="用户名"> <input type="password"> <ul> <li class="li1">xxxxxx</li> <li class="li2">xxxxxx</li> <li class="li3">xxxxxx</li> <li class="12uu">xxxxxx</li> <li class="12ux">xxxxxx</li> <li class="12uu">xxxxxx</li> <li class="12pux">xxxxxx</li> <li class="12oux">xxxxxx</li> <li class="12pux">xxxxxx</li> </ul> </div> <div> <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> <li>666</li> <li>777</li> </ul> </div> <div class="dd"> <p>11111111</p> <div>222222</div> <div>333333</div> <div>444444</div> <div>555555</div> </div>
