css3添加了哪些新的选择器,CSS3 新添选择器

属性选择器

属性选择器可以元素特定属性来进行选择，这样就可以不借助于类选择器或id选择器

选择符

简述

E[att]

选择具有att属性的E元素

E[att="val"]orE[att=val]

选择具有att属性且属性值为val的E元素

E[att="val"]orE[att=val]

选择具有att属性且属性值以val开头的E元素

E[att$="val"]orE[att$=val]

选择具有att属性且属性值以val结尾的E元素

E[att="val"]orE[att=val]

选择具有att属性且属性值种含有val的E元素

/*选取具有class属性的div*/

div[class]{

...

}

/*选取具有class属性且class=icon的div*/

div[class="icon"]{

...

}

/*选取具有class属性且class以icon开头的div 例如icon1、icon2...*/

div[class^="icon"]{

...

}

/*选取具有class属性且class以icon结尾的div 例如ficon、picon...*/

div[class$="icon"]{

...

}

/*选取具有class属性且class含有icon的div 例如 h-icon-1、icon1、ficon...*/

div[class*="icon"]{

...

}

属性选择器、类选择器、伪类选择器权重都是10

结构伪类选择器

结构伪类选择器可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。

选择器

简述

E:first-child

选择父元素的第一个子元素E，相当于E:nth-child(1)

E:last-child

选择父元素的倒数第一个子元素E，相当E:nth-last-child(1)

E:nth-child(n)

选择父元素的第n个子元素，n从1开始计算

E:nth-last-child(n)

选择父元素的倒数第n个子元素，n从1开始计算

E:first-of-type

选择父元素下同种标签的第一个元素，相当于E:nth-of-type(1)

E:last-of-type

选择父元素下同种标签的倒数第一个元素，相当于E:nth-last-of-type(1)

E:nth-of-type(n)

与:nth-child(n)作用类似，用作选择使用同种标签的第n个元素

E:nth-child(n)会将所有兄弟盒子排序再检查类型是否匹配，而E:nth-of-type(n)会先选出所有类型匹配的盒子然后再排序。

注意，例如li:first-child表示选择父元素下的第一个子元素li，而不是选择li的第一个子元素！ul li:first-child表示选择ul下的li且li为ul第一个子元素。

对于E:nth-child(n) 其中n既可以是数字，也可以是关键字(even | old)，也可以是公式，若n为公式，则从0开始计算且变量必须为n，常见公式如下

公式

取值

2n

2,4,....

2n+1

1,3,5,...

5n

5,10,15,...

n+5

选取第5个元素到最后一个元素

-n+5

选取前5个元素

ul li:nth-child(3n+1){

background-color:yellow;

}

ul li:nth-child(3n+2){

background-color:green;

}

ul li:nth-child(3n+3){

background-color:pink;

}

ul li:first-child{

background-color:white;

}

ul li:last-child{

background-color:black;

}

...

实现效果

伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签，而不需要HTML标签，从而简化HTML结构。

选择符

简介

::before

在元素内部的前面插入内容

::after

在元素内部的后面插入内容

before和after创建一个新元素，但是属于行内元素

新创建的这个元素在文档树中找不到，故称为伪元素

before和after必须有content属性

before在父元素内容的前面插入元素，after在父元素内容的后面插入元素

伪元素选择器和标签选择器一样权重为1

::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。默认情况下，伪类元素的display是默认值inline，可以通过设置display:block来改变其显示。

可以利用before和after清除浮动

.clearfix:before,

.clearfix:after {

content: " ";

display: table;

}

.clearfix:after {

clear: both;

}

.clearfix {

*zoom: 1;

}

CSS系列：CSS3新增选择器

1. CSS1定义的选择器 选择器 类型 说明 E 类型选择器 选择指定类型的元素 E#id ID选择器 选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略. E.class 类选择器 选 ...

CSS3常用选择器(三)

在CSS3的选择器中,除了结构性伪类选择器外,还有一种UI元素状态伪类选择器.这些选择器的共同特征: 指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用. 1.hover.focus.a ...

CSS3 ::selection选择器

一.介绍 之前看到有些网站选中内容的颜色和背景色都不是平时看到的蓝色和白色.今天有兴趣查看了一下,原来是一个很简单的CSS3的选择器::selection的用法. 上例子:

CSS3属性选择器与(:not)选择器

一:css3属性选择器: img[alt]{ border:2px dashed #000; } 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签.   还可以通过设定属性值来缩小匹配范围: ...

【前端开发系列】—— CSS3属性选择器总结

想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS ...

CSS3之选择器

总结了下CSS3新增的一些选择器. CSS3的选择器有基本选择器.属性选择器.伪类选择器几类. CSS3选择器 选择器 举例 例子描述 element1~element2 p~a 选择前面有 < ...

CSS3 &colon;nth-child&lpar;&rpar; 选择器

CSS3 :nth-child() 选择器 代码: