目录

属性选择器

属性选择器可以元素特定属性来进行选择,这样就可以不借助于类选择器或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;
}

...

<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>

实现效果
CSS3 新添选择器插图

伪元素选择器

伪元素选择器可以帮助我们利用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;
    }
    
    
    本站资源均源自网络,若涉及您的版权、知识产权或其他利益,请附上版权证明邮件告知。收到您的邮件后,我们将在72小时内删除。
    若下载资源地址错误或链接跳转错误请联系站长。站长q:770044133。

    » CSS3 新添选择器

    发表评论

    免登录下载网,提供全网最优质的资源集合!