志在指尖
用双手敲打未来

七种基本的css选择器

七种基本的css选择器

CSS中常用的选择器:
(一)根本选择器(二)层次选择器(三)动态伪类选择器(四)方针伪类选择器
(五)ui状态伪类选择器(六)结构伪类选择器(七)特点选择器(八)伪元素
(一)根本选择器
1.标签选择器:经过标签名获取元素权重:0001
(此种选择器影响规模大,主张尽量运用在层级选择器中。)
2.class选择器:经过.类名获取元素权重:0010
(经过class类名来选择元素,一个类可运用于多个元素,一个元素上也能够运用多个类,运用灵活,可复用,是css中运用最多的一种选择器。)
3.id选择器:经过#id名获取元素权重:0100
(经过id名来选择元素,元素的id名称不能重复,所以一个款式设置项只能对应于页面上一个元素,不能复用,id名一般给程序运用,所以不推荐运用id作为选择器。)
4.*通配符选择器:获取到页面的一切元素
5.群组选择器:用逗号离隔根本选择器,表明这些选择器都获取到css
(二)层次/联系选择器
(主要运用在选择父元素下的子元素,或者子元素下面的子元素,可与标签元素结合运用,减少命名,同时也能够经过层级,避免命名冲突。)
1.包括选择器:用空格离隔根本选择器,表明后一个选择器是前面的后代
例:pa{color:red;}
2.子代选择器:用>离隔根本选择器,表明后一个选择器是前面的子代
例:ul>li{line-style:none;}
3.相邻兄弟选择器:E+F:表明获取到E后边的紧跟着的F元素(同级的)
例:a+a{}
4.兄弟选择器:E~F:表明获取到E后边一切的同级的F元素
例:li~li{}
(三)动态伪类选择器
1.a:link锚链接被访问前增加款式
2.a:visited锚链接被访问后增加款式
3.e:hover鼠标悬停在元素上增加款式
4.e:active鼠标点击元素时增加款式
5.:focus表单元素被聚焦时,增加款式
(四)方针伪类选择器
语法:方针:target{特点:特点值}被选中的方针增加款式
方针:targetE子元素{特点:特点值}被选中的方针里的E子元素增加款式
(五)ui状态伪类选择器
1.:enabled可用的表单元素增加款式
2.:disabled不可用的表单元素增加款式(disabled)
3.:checked+E被选中的表单元素增加款式
(六)结构伪类选择器
1.E:first-child获取到E元素,且要满意为其父元素的榜首个孩子。
2.E:last-child获取到E元素,且要满意为其父元素的最终一个孩子
3.E:nth-child(n)获取到E元素,且要满意为其父元素的第n个孩子
n的用法:
(1)6n倍数(2)even偶数/2nodd奇数/2n-1(如可用来选中奇偶行来实现“隔行换色”)
(3)-n+5选中1-5
(4)p:nth-child(-n+3):nth-child(n+2)2-3个
4.E:nth-last-child(n)获取到E元素,且要满意为其父元素的倒数第n个孩子
5.E:first-of-type获取到E元素,且要满意为其父元素的榜首个该类型的孩子
6.E:last-of-type获取到E元素,且要满意为其父元素的最终一个该类型的孩子
7.E:nth-of-type(n)获取到E元素,且要满意为其父元素的第n个该类型的孩子
8.E:nth-last-of-type(n)获取到E元素,且要满意为其父元素的倒数第n个该类型的孩子
9.E:empty获取到空的E元素(注:连空格都不能有)
(七)特点选择器
1.E[attr]拥0有attr特点的E元素增加款式如div[class];
2.E[attr=”val”]具有attr特点值为val的E元素增加款式如p[class=”ab”]
3.E[attr*=”val”]attr特点值包括val的E元素增加款式
如ul[class=”c”]指class类名中包括有c字母的E元素
4.E[attr^=”val”]attr特点值以val开头的E元素增加款式
5.E[attr$=”val”]attr特点值以val结束的E元素增加款式
(八)伪元素
1.E::before给E元素增加榜首个子元素(前面)
2.E::after给E元素增加最终一个子元素(后边)
3.E::first-letter给E元素榜首个字增加款式
4.E::first-line给E元素榜首行增加款式
5.E::selection元素内容被选中时增加款式(火狐需求加前缀-moz-)

未经允许不得转载:IT技术网站 » 七种基本的css选择器
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

志在指尖 用双手敲打未来

登录/注册IT技术大全

热门IT技术

C#基础入门   SQL server数据库   系统SEO学习教程   WordPress小技巧   WordPress插件   脚本与源码下载