CSS选择器类别标签选择id选择器类选择器后代选择器(diva)后代选择器(div>p)相邻选择器(div+p)通配符选择器(*)否定选择器:not(.link){}属性Selector伪类选择器伪元素选择器::before{}CSS3属性选择器选择器描述[attribute]用于选择具有指定属性的元素。[attribute=value]用于选择具有指定属性和值的元素。[attribute~=value]用于选择属性值包含指定词汇表的元素。[attributel=value]用于选择属性值以指定值开头的元素,必须是一个完整的单词。[attribute^=value]匹配属性值以指定值开头的每个元素。[attribute$=value]匹配属性值以指定值结尾的每个元素。[attribute*=value]匹配属性值包含指定值的每个元素。CSS3伪类选择器伪类|MDN常用::hover:focus:after在元素前添加内容,也可以用来清除浮动。:before在元素之后添加内容:enabled选择器匹配每个启用的元素(主要用于表单元素)。:disabled控制表单控件的禁用状态。:checked单选按钮或复选框被选中::selection用户选中的区域:empty一般用于隐藏里面什么都没有的元素:not(selecter)p:first-of-typep:last-of-typep:only-of-typep:nth-of-type(n)p:nth-last-of-type(n):nth-child(n):nth-last-child(n)p:only-child伪类和伪类元素区别伪类值一个状态例如:hover伪元素是一个真实的元素,它可以有样式和内容该页面!important的权重具有最高的优先级,但它也会被important重要权重覆盖。内联样式将始终覆盖外部样式表中的任何样式(除了!important)。单独使用选择器时,css规则不能跨层生效。如果两个不同权重的选择器作用在同一个元素上,权重值高的css规则生效如果两个相同权重的选择器作用在同一个元素上:当后面出现的选择器是最后一个权重值相同的规则时,距离元素最近的选择器一句话总结:!important>内联样式>ID选择器>(类选择器|属性选择器|伪类选择器)>元素选择器浏览器解析CSS.wrapperdiv>pCSS,browse的搜索元素通过选择权从后往前搜索。这样做的目的是加快CSS解析速度。从后往前,排除法浏览器解析CSS选择器的规则。如何美化复选框?让原来的复选框隐藏input+labelbackgroundimageuncheckedinput:checked+labelbackgroundimagechecked.checkboxinput{display:none;}.checkboxinput+label{background:url(./unchecked.png)leftcenterno-repeat;背景尺寸:20px20px;padding-left:20px;}.checkboxinput:checked+label{background-image:url(./checked.png);}
