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;
}

...

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

实现效果

伪元素选择器

伪元素选择器可以帮助我们利用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;
}
    posted @ 2020-08-10 16:30  海物chinono  阅读(166)  评论(0)    收藏  举报