本篇文章主要介绍了"CSS3选择器详解"，主要涉及到方面的内容，对于CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下：
CSS3选择器标签（空格分隔）： 前端开发 CSSCSS3选择器常用选择器1标签选择器2类选择器3ID选择器4通配符选择器5属性选择器伪类选择器1链接伪类2动态...
CSS3选择器
标签（空格分隔）： 前端开发 CSS
- CSS3选择器
- 常用选择器
- 1标签选择器
- 2类选择器
- 3ID选择器
- 4通配符选择器
- 5属性选择器
- 伪类选择器
- 伪元素选择器
- 组合选择器
- 继承
- 6CSS优先级
1.常用选择器
1.1标签选择器
p{color:blue;}/*选择标签为p的元素*/
1.2类选择器
.pclass{color:blue;}/*选择class名为pclass的元素*/
1.3ID选择器
css
#pid{color:red;}/*选择id名为pid的元素*/
1.4通配符选择器
*{color:black;}/*选择页面中所以的元素*/
1.5属性选择器
[disabled]{background-color:#eee;}/*选择属性值为disabled的元素*/[type=button]{color:yellow;}/*选择type属性为button的元素*/[class~=sports]{}/*选择class属性包含sports的元素*/[lang|=en]{color:red;}/*选择以lang属性以"en"开头以及以"-"分隔的元素*/[href^="#"]{color:blue;}/*选择href属性以"#"开头的元素*/[href$="pdf"]{color:red;}/*选择href属性以"pdf"结尾的元素*/[href*="lady.163.com"]{color:pink;}/*选择href属性中包含"lady.163.com"的元素*/
2.伪类选择器
2.1链接伪类
/*只可用于描元素*/a:link{color:gray;}/*选择所有a标签的href中有值的链接元素*/a:visited{color:red;}/*选择所有已被访问的链接*/
2.2动态伪类
a:hover{color:green;}/*鼠标滑过的标签的样式*/a:active{color:orange;}/*鼠标点击的标签样式*/input:focus{background-color:yellow;}/*选择获得焦点的 input 元素的样式*/
2.3树形图上的伪类
input:enabled{color:#ccc;}/*元素可用的状态*/input:disabled{color:#ddd;}/*元素不可用的状态*/input:checked{color:red;}/*单选框或者复选框选择的样式*/li:first-child{color:red;}/*选择第一个li标签*/li:last-child{color:red;}/*选择最后一个li标签*/li:nth-child(even){color:red;}/*选择(...)内的表达式[2n+1]或者关键字[even]所代表的li标签*/ul:only-child{color:red;}/*选择ul只有一个子元素的项*/dd:first-of-type{color:red}/*选择第一个该类型的标签*/dd:last-of-type{color:red}/*选择最后一个该类型的标签*/dd:nth-last-of-type(2n){color:red}/*倒数的选择(...)内的表达式[2n]或者关键字[even]所代表的dd标签*/span:only-of-type{color:red}/*选择页面中只有一个span的项*/:root{}/*选择文档的根元素*/
3.伪元素选择器
::first-letter{color:red;}/*选择第一个字母*/::first-line{color:red;}/*选择第一行*/::before{content:"before";}/*在某个元素之前插入一些内容*/::after{content:"after";}/*在某个元素后插入一些内容*/::selection{color:red;}/*应用于被用户选中的内容*/
4.组合选择器
4.1后代选择器
.mainh2{color:red;}/*选择class名为mian元素内的所有h2标签*/
4.2子选择器
.main>h2{color:red;}/*选择class名为mian元素内的直接关联与父元素的h2标签*/
4.3兄弟选择器
h2+p{color:red;}/*选择h2直接相连的P标签*/h2~p{color:red;}/*只要P标签前有h2标签便选择*/
4.4选择器分组
h1,h2,h3{backgound-color:#ddd;}/*同时设置h1,h2,h3标签,使用","分隔*/
5.继承
body{font-family:"Microsoft Yahei";}/*设置页面中所有的字体为微软雅黑*/
- 继承属性
- color
- font
- text-align
- list-style
- …
- 非继承属性
- background
- border
- position
- …
6CSS优先级
- 计算方法
- a = 行内样式
- b = ID选择器的数量
- c = 类/伪类和属性选择器的数量
- d = 标签选择器和伪元素选择器数量
value = a*1000 + b*100 + c*10 +d
!important强行提升优先级
以上就介绍了CSS3选择器详解，包括了方面的内容，希望对CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播有兴趣的朋友有所帮助。
本文网址链接：http://www.codes51.com/article/detail_174144.html
