本文共 3813 字，大约阅读时间需要 12 分钟。

CSS3新属性

※属性选择器

一、概念

1.属性选择器

①E[att]选择具有att属性的E元素

②E[att=“val”]选择具有att属性且属性值等于val的E元素

③E[att^=“val”]匹配具有att属性且属性值以val开头的E元素

④E[att$=“val”]匹配具有att属性且值以val结尾的E元素

⑤E[att*=“val”]匹配具有att属性且值中含有val的E元素

二、不借助类或者id选择器，利用属性选择器选择

选择必须是input，但是同时具有value这个属性的元素

.one input[value] {        background-color: pink;    }

效果

三、选择属性=值的某些元素

选择属性为text的元素。重点！！！务必掌握

.two input[type=text] {            border-color: pink; }

效果

四、属性选择器可以选择属性值开头的某些元素

   
    小图标1
   
   
    小图标2
   
   
    小图标3
   
   
    小图标4
   
   
    我是打酱油的
   

选择首先是div，然后具有class属性并且属性值必须是icon开头的这些元素

div[class^=icon] {            color: purple; }

效果

五、属性选择器可以选择属性值结尾的某些元素

   
    菲谢尔
   
   
    可莉
   
   
    原来你也玩原神
   

选择以data为结尾的元素

section[class$=data] {        color: purple;}

效果

※结构选择器

2.结构伪类选择器

①E:first-child匹配父元素中的第一个子元素E

②E:last-child匹配父元素中最后一个E元素

③E:nth-child(n)匹配父元素中的第n个子元素E（n可以是数字，关键字和公式）

④E:first-of-type指定类型E的第一个

⑤E:last-of-type指定类型E的最后一个

⑥E:nth-of-type(n)指定类型E的第n个

   
            
    
可莉
            
    
魈
            
    
钟离
            
    
阿贝多
            
    
迪卢克
            
    
温迪
            
    
琴
            
    
刻晴
   

一、1.选择ul里第一个孩子li

ul li:first-child {    background-color: purple;}

二、选择ul里最后一个孩子li

ul li:last-child {            background-color: red;}

三、选择ul里第6个孩子li

ul li:nth-child(6) {            background-color: blue;}

效果

/* nth-child(n) 从0开始，每次加1，往后计算；这里必须是n，不能是其他字母 */ 四、选择ul里偶数位孩子li

ul li:nth-child(even) {            background-color: #ccc;}

/* nth-child(2n) 选择了所有偶数孩子，等价于even */

五、选择ul里奇数位孩子li

ul li:nth-child(odd) {        background-color: rgb(94, 64, 64);}

/* nth-child(2n+1) 选择了所有奇数孩子，等价于odd */

效果 六、从第3个孩子开始到最后一个孩子

ul li:nth-child(n+3) {            background-color: rgb(18, 16, 143);}

效果

七、前6个孩子（包括第6个）

ul li:nth-child(-n+6) {            background-color: rgb(134, 38, 75);}

效果

八、nth-child与nth-of-type的区别

   
        
    
迪卢克
        
    
     钟离
    
        
    
     魈
    
        
    
     阿贝多
    
        
    
     达达利亚
    
   

/* div:nth-child(n) 无论是p标签的迪卢克还是div标签的钟离都没变色。因为:nth-child会把所有盒子都排序，迪卢克为1号，钟离为2号，然后先看nth-child(1)之后会去看前面的div，发现1号迪卢克并不是div标签，因此谁都没变色 */

div:nth-child(1) {            background-color: rgb(134, 38, 75);}

无效果

/* nth-of-type会把指定的盒子排序，执行的时候先看div，然后再看是第几个孩子 */

div:nth-of-type(1) {            background-color: rgb(134, 38, 75);}

有效果

※伪元素选择器

3.伪元素选择器

一、清除浮动

.b {            float: left;            width: 120px;            height: 120px;            background-color: skyblue;}

没清除浮动由于盒子是浮动的，不受标准流影响，因此父盒子的边框没有包住

.clearfix::after {            content: "";            /* 伪类选择器必须要写 */            display: block;            /* 插入的元素必须是块级元素 */            /* 不要看见这个元素 */            height: 0;            visibility: hidden;            clear: both;            /* 核心代码，清除浮动 */}

清除浮动后父盒子边框包住.box盒子了

二、双伪类清除浮动

.cleardiv {     border: 2px solid orange;}.cleardiv::after,.cleardiv::before {     content: "";     display: table;     /* 让前后两个伪类选择器不仅转换为块元素，还能同一行显示 */}.cleardiv::after {     clear: both;}a {     float: left;     width: 120px;     height: 120px;     background-color: green;}

效果

三、CSS3盒子模型

①content-box=width+padding+border（默认） ②border-box=width

   
    
    
     杜一刀
    
    
    
杜一刀
   

.hezi div {            width: 200px;            height: 200px;            border: 20px solid red;            padding: 15px;            box-sizing: content-box;}.hezi p {            width: 200px;            height: 200px;            border: 20px solid red;            padding: 15px;            box-sizing: border-box;            /* border和padding不会再撑开盒子了 */}

四、calc函数.需求子盒子永远比父盒子小30px

.father {            width: 200px;            height: 100px;            background-color: pink;        }.son {            width: calc(100% - 30px);            /* 一定要加空格！！！！！ */            height: 30px;            background-color: skyblue;}

转载地址：https://blog.csdn.net/zx2014567296/article/details/116379394 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！