正文  软件开发 > html5 >

html5知识点:CSS3新增选择器,html5css3

html5知识点:CSS3新增选择器,html5css3css3选择器是在css2.0的基础上的修改创新。他增加了一些UI元素状态伪类选择器、结构伪类选择器、属性选择器等。Css3新增的这些选择器...

html5知识点:CSS3新增选择器,html5css3

css3选择器是在css2.0的基础上的修改创新。他增加了一些UI元素状态伪类选择器、结构伪类选择器、属性选择器等。Css3新增的这些选择器很多强大,他的出现给我们前端带来了好多便利。

一、使我们的网页代码更简洁、结构更加清晰,结构清晰就会有利于SEO(搜索引擎)的优化,代码简洁说明代码会少,代码少文件就会小,占用的网络带宽就会少,那么网页的加载速度就会快,用户体验度就会更好。例如::first-child是用来选择某个元素的第一个子元素,比如你想让列表中的"1"具有与众不同的样式,我们就可以使用:first-child来实现:

li:first-child {background: #ff0;}

在没有这个选择器出现之前,我们都需在要第一个li上加上一个不同的class名,比如说“first”,然后在给他应用不同的样式

li.first {background: #ff0;}

其实这两种最终效果是一样的,只是后面这种,我们需要在html增加一个额外的class名,前一种就不需要如图所示:

二、免除起名的烦恼,之前我们用css2.0写一个网站需要给标签添加id或class名称去区分不同的标签,id或class名称的起名要求是:以英文字母开头,后面可以连接数字、字母、下划线、连字符和特殊字符,建议尽量使用英文字母,适当使用下划线和连接线;词必达意,名称要反映用途和相关信息,同时也要简短。这一要求对于我们大多数不是英语专业、英语又不好的来说就比较困难。如果起的名字不是很规范那么就容易叫人觉得你不够专业。而不专业的起名也会给后期的开发维护带来一些不必要的麻烦,css3新增的结构伪类选择器的出现给我们带来了福利,我们不需要添加class或id名称,也能轻松控制某一个标签,例如::nth-child()可以选择某个的一个或多个特定的子元素,你可以按以下的方式进行选择:

:nth-child(length);/*参数是具体数字*/

:nth-child(n);/*参数是n,n从0开始计算*/

:nth-child(n*length)/*n的倍数选择,n从0开始算*/

:nth-child(n+length);/*选择大于length后面的元素*/

:nth-child(n*length+1);/*表示隔几选一*/

//上面length为整数

:nth-child()可以定义他的值(值可以是整数,也可以是表达式),如上面所示,用来选择特定的子元素,例如:nth-child(3),选择某元素下的第三个子元素,(这里的3可以是你自己需要的数字),比如说,我需要选择列表中的第三个li元素,那么我们可以直接这样使用:

li:nth-child(3) {background: #f00;}

:nth-child(n),其中n是一个简单的表达式,那么"n"取值是从“0”开始计算的,到什么时候结束我也不知道,如果你在实际应用中直接这样使用的话,将会选中所有子元素,比如说,在我们的demo中,你在li中使用":nth-child(n)",那么将选中所有的"li",如:

li:nth-child(n) {background: #ff0;} 等于li {background:#ff0;}

他其实是这样计算的

n=0 --》 没有选择元素

n=1 --》 选择第一个li,

n=2 --》 选择第二个li,后在的依此类推,这样下来就选中了所有的li

请看效果: