CSS选择器：基础、关系、属性、伪类、伪对象等；
选择器优先级的计算：style=1000(内联样式表)
ID=100
class=10
element=1
1. 基础选择器 ID>class>element>*
2. 关系选择器
1.包含（后代）选择器 E F E为F的外层元素
2.子选择器 E>F E为F的父级
3.相邻选择器 E+F 选择与自身相邻，且紧跟在自身后面的兄弟元素
4.兄弟选择器 E~F 所有的符合条件的位于自身后面的兄弟元素
5. 并集选择器 E，F 两者不需要有什么关系，只是同用一个样式
6. 交集选择器 E.F ,E#F 具有F类名或id名的E元素
3.属性选择器 E与[ ]中不要有空格
通过属性来选择，定义的时候用[] 来定义:
【注意事项：1.必须是属性； 2. 属性选择器耗费资源比基本选择器大；】
E[att] 通过属性名来选择
E[att="val"] 属性名和属性值都符合才会被选中；
E[att~="val"] 其中一个class符合即被选中；
E[att^="val"] 以val开头的att属性被选中；
E[att$="val"] 以val结尾的att属性被选中；
E[att*="val"] 包含了val内容的属性值的元素会被选中；
E[att|="val"] 以val开头，并且后面紧跟中划线的元素被选中；
[class]{ color：red ; } ----->所有具有类名的元素都为红色；
4. 伪类 E与：中不要有空格
通过冒号：定义伪类
：root 选择匹配文档的根元素（每个文档只有一个根元素）
E:link 超链接未被点击时的状态（颜色、背景）
E:visited 超链接被访问后的状态
E:hover 鼠标悬停时的状态，不限a标签，其它元素也可以
E:active 鼠标按下时的状态
【测试超链接的几个状态时，可以用快捷键Ctrl+H：清除缓存】
E:not(s) 除去括号里面的选择器的元素，其它的元素会被选中。括号里面可以是class选择器也可以是id选择器，要通过.或#来选择，并且 不要加引号
E:first-child E需要具有父级，并且E是父级的第一个元素 E代表了要操作元素本身，并非父元素
E:last-child 同上
E:only-child 具有父元素，并且E是父元素中唯一的
E:empty 匹配完全没有内容的E元素，空格和换行都算做内容。
E:checked 可以匹配被选中的元素，
如radio 和select 中的option
<input type="radio" name="gender" checked="checked" />
<option value="0" selected="selected" >汽车</option>
-------cheked实例
html结构
<form action="">
<input type="radio" name="gender" /><span>男</span>
<input type="radio" name="gender"/><span>女</span>
<select name="" id="">
<option value="0">汽车</option>
<option value="1" selected="selected">火车</option>
<option value="2">自行车</option>
</select>
</form>
css样式
input:checked + span{color: red;}
option:checked{ color: aqua;}
5.伪对象选择器（不存在于HTML中，不会改变文档的结构） E与::中不要有空格
用::来定义伪元素（伪对象）
E::before{ content:" "; }
E::after{ content:" "; }
例：1. 16° -----> ::after 结合position:absolute;
2. 利用伪元素给文档添加图片 （display：block；设置大小；）
3.利用伪元素清除浮动：.clearfloat:after {content: ""; display: block; height:0; clear:both; visibility: hidden;}
4.利用伪元素绘制简单的图形，例如小三角等;
伪元素的用处还有很多，不再一一列举；
【注意事项：
E 只能有一个after和一个before，若有多个按最后一个显示；
伪元素不存在于文档流，不能被选中;】
<------学习笔记，如有错误，谢谢指正！------->
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
