根本选择器扩大
1.子元素选择器
???? #wrap > .inner {color: pink;} 也可称为间接后辈选择器,此类选择器只能匹配到间接后辈，不能匹配到深层次的后辈元素 总结：>作用于元素的第一代后辈，空格作用于元素的所有后辈
2. 相邻兄弟选择器
???? #wrap #first + .inner {color: #f00;}它只会匹配紧跟着的兄弟元素
3. 通用兄弟选择器
???? #wrap #first ~ div { border: 1px solid;}它会匹配第二个元素,条件是它必须跟(不肯定是紧跟)在第一个元素之后,且他们都有一个独特的父元素所有的兄弟元素
4. 选择器分组
???? h1,h2,h3{color: pink;} 此处的逗号咱们称之为联合符
属性选择器
1. 子串值属性选择器
???? [attr|=val] : 抉择attr属性的值是val（包含val）或以val-结尾的元素。
???? [attr^=val] : 抉择attr属性的值以val结尾（包含val）的元素。
???? [attr$=val] : 抉择attr属性的值以val结尾（包含val）的元素。
???? [attr*=val] : 抉择attr属性的值中蕴含字符串val的元素 多数浏览器反对子串抉择元素
2. 存在和值属性选择器
???? [attr]：该选择器抉择蕴含 attr 属性的所有元素，不管 attr 的值为何。[attr=val]：该选择器仅抉择 attr 属性被赋值为 val 的所有元素。
???? [attr~=val]：示意带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至多一个值为val。 比方位于被空格分隔的多个类（class）中的一个类。比方name="atguigu_llc atguigu"
???? [name =val]：该选择器仅抉择 name 属性被赋值为 val 的所有元素。
伪类与伪元素选择器
1. 链接伪类
???? :link 示意作为超链接，并指向一个未拜访的地址的所有锚
???? :visited 示意作为超链接，并指向一个已拜访的地址的所有锚
???? :target 代表一个非凡的元素，它的id是URI的片段标识符
❗ 留神:link，:visited，:target是作用于链接元素的！前两者只能在a标签上起作用
*{ margin: 0; padding: 0; } div{ width: 300px; height: 200px; line-height: 200px; background: palegreen; color: hotpink; text-align: center; display: none; } a:visited{ color:orange; } :target{ display: block; }2. 动静伪类
???? :hover示意悬浮到元素上
???? :active示意匹配被用户激活的元素（点击按住时）
????因为a标签的:link和:visited能够笼罩了所有a标签的状态，所以当:link，:visited，:hover，:active同时呈现在a标签身上时 :link和:visited不能放在最初！！！
???? 隐衷与:visited选择器只有下列的属性能力被利用到已拜访链接：color、background-color、border-color
❗ 留神:hover，:active根本能够作用于所有的元素！
<style type="text/css"> *{ margin: 0; padding: 0; } a{ text-decoration: none; color: black; display: block; } a:hover{ font-size:24px; /*color: red;*/ } a:link{ font-size:48px; /*color: pink;*/ } a:visited{ /*font-size:96px;*/ /*color: deeppink;*/ } </style>3. 表单相干伪类
①:disable 匹配被禁用的表单
②:checked 匹配被选中的表单
③:focus 匹配获焦的表单
④：enabled匹配可编辑的表单
实操练习1
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> input:enabled{ background: skyblue; } input:disabled{ background: deeppink; } input:checked{ width: 200px; height: 200px; } input:focus{ background: pink; } </style></head><body> <input type="text" /> <input type="text" disabled="disabled" /> <input type="checkbox" /> <input type="text" /></body>实操练习2 自定义单选按钮
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding:0; } label{ position: relative; float:left; /*转换为块级元素撑开大小*/ width:100px; height:100px; border:2px solid; border-radius: 50%; overflow:hidden; } label > span{ position: absolute; left:0; top:0; bottom:0; right:0; } input{ position: absolute; left:-50px; top:-50px; } input:checked + span{ background:pink; } </style></head><body> <label> <input type="radio" name="rongtuowulian" /> <span></span> </label> <label> <input type="radio" name="rongtuowulian" /> <span></span> </label> <label> <input type="radio" name="rongtuowulian" /> <span></span> </label></body>4. 伪元素
???? 概念：伪元素示意页面中一些非凡的并不实在存在的元素（非凡的地位）
???? 语法应用 ：：结尾
???? 类别：①：：first-letter ②::first-line ③::selection ④::before ⑤::after 留神：④和⑤必须联合content属性来应用
???? 代码示例：
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible"content="ie=edge" /> <title></title> <style type="text/css"> p:first-letter{ color: #008000; font-size: 2.5rem; } p:first-line{ color: aqua; } p::selection{ color:red; } p:before{ content: ''I will love you forever'; color:blue; } p:after{ content: 'sure are you'; color:green； } </style></head><body> <div>Hello are you okay</div> <p> 我还是一个段落 我是一个很多很多解放碑还不错放弃经济刺激 哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈 </p></body>5. 结构性伪类(重点)
???? index的值从1开始计数！！！！index能够为变量n(只能是n)index能够为even odd
???? #wrap ele:nth-child(index)示意匹配#wrap中第index的子元素，这些伪类都是依据所有的子元素进行排序，这个子元素必须是ele
???? #wrap ele:nth-of-type(index)示意匹配#wrap中第index的ele子元素
除此之外:nth-child和:nth-of-type有一个很重要的区别！！nth-of-type以元素为核心，在同一类型中排序，nth-child (绝对于:first-child:last-child 或者 :nth-child(1):nth-last-child(1))
/* even示意偶数
odd示意奇数
first-of-type:在p类型中排
first-child:所有元素排
*/
????:nth-child(index)系列
:first-child
:last-child
:nth-last-child(index)
????:nth-of-type(index)系列
:first-of-type:last-of-type:nth-last-type(index):only-of-type(绝对于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1)) :not :empty(内容必须是空的，有空格都不行，有attr没关系)代码实例
*{ margin: 0; padding: 0; } #wrap li:nth-of-type(1){ color: pink; } p:only-of-type{ border: 1px solid; } 6. 伪元素选择器
::after
::before
::firstLetter
::firstLine
::selection
#wrap::before{ content:""; display:block; width:200px; height:200px; background: #00FFFF; } #wrap::after{ content:""; display:block; width:200px; height:200px; background: #0000FF; }