CSS选择器及选择器优先级总结

系统管理员 2023-02-14 01:19 10阅读 0赞

（1）元素选择器：选择器是元素，例如：p\{属性名:属性值;… \}  
（2）类(class)选择器：.class属性名\{属性名:属性值;…\}，可有重复，一个元素可有多个class值，用空格隔开。  
（3）id选择器：\#id属性名\{属性名:属性值;…\}，不能有重复名字  
（4）复合选择器（交集选择器），可选中同时满足多个选择器的元素，例：div.p3\{属性名:属性值;…\}（.p3）是类名，交集选择器的两个选择器之间不用间隔什么。  
（5）组合选择器（并集选择器），中间用逗号隔开，例如：p,.classname\{属性名:属性值;…\}  
（6）通配符选择器：*\{属性名:属性值;…\}  
（7）子元素选择器：选中父元素指定的子元素，父元素>子元素，IE6及以下浏览器不支持。  
（8）后代元素选择器：选中指定元素的后代元素，祖先元素 后代元素（二者之间有一个空格）。  
（9）伪类元素选择器：:link,链接原本样式，:visited(访问过的链接)，:hover(鼠标悬停的链接)，:active(鼠标按下的链接)，:focus(获取焦点)，:before(指定元素前，一般与content搭配使用),例：p:after\{content:“添加”\}，:after(指定元素后)，::selection(选中的元素)，::-moz-sellection(火狐中需要用，兼容的时候要写两个)，:first-letter(首字母)，:first-line(首行)。  
（10）属性选择器：根据元素中属性或者属性值选取指定元素。title属性，可以给任何标签指定，当鼠标移到元素上，title作为提示文字显示。例如：*

,p\[title\]\{background-color:yellow\},给title属性p标签设置背景颜色值。title可换成class,id等。p\[title=“hello”\]\{\},给title属性值为hello的设置样式。p\[title ^=“ab”\],给title以ab开头的元素设置样式，p\[title$=“ab”\],给title以ab结尾的元素设置样式，p\[title=“c”\],给title带有c的元素设置样式。  
（11）其他子元素选择器：:first-child(在所有子元素中排列), :last-child, :nth-child(x)(选则指定位置的子元素),x为几就选择1第几个。:first-of-type(在当前类型子元素中排列), :last-of-type,  
:nth-of-type(x)(选择指定位置的子元素)。  
（12）兄弟元素选择器：选中元素后紧挨的兄弟元素，给后面兄弟元素设置样式，前一个+后一个，例：span+p\{\}。选中后面所有的兄弟元素。前一个~后边所有，例：span ~p.  
（13）否定伪类：从已选元素中剔除某些元素，:not(选择器)，例：p:not(.hello),选中p元素中除了class为hello的设置样式。  
选择器优先级：  
内联样式(1000)>id(100)>类和伪类(10)>元素选择器(1)>通配符(\*)(0),  
继承的样式没有优先级。选择其中包含多个时，要加个多种选择器的优先级相加再做比较，但选择器的优先级计算不会超过他的最大数量级，如果优先级一样，谁在后面就用谁。如果给样式最后添加一个!important,改样式会获得最高优先级。