CSS面试20真题高频版- CSS3新增了哪些新特性

选择器

CSS3新增了多种选择器，主要包括属性选择器、结构伪类选择器和伪元素选择器这些选择器使得CSS的选择更加灵活和强大。‌

属性选择器

属性选择器可以根据元素的属性和属性值来选择元素。其基础语法如下：

• E[att^=value]：选择属性值以特定字符串开头的元素，例如 div[class^=icon] 选择class属性值以“icon”开头的div元素。
• E[att$=value]：选择属性值以特定字符串结尾的元素，例如 div[class$=data] 选择class属性值以“data”结尾的div元素。
• E[att*=value]：选择属性值包含特定字符串的元素，例如 div[class*=va] 选择class属性值包含“va”的div元素。

结构伪类选择器

结构伪类选择器主要用于根据父级选择器来选择里面的子元素。其基础语法和用法包括：

• :first-child：选择父元素下的第一个子元素，例如 ul li:first-child 选择ul下的第一个li元素。
• :last-child：选择父元素下的最后一个子元素，例如 ul li:last-child 选择ul下的最后一个li元素。
• :nth-child(n)：选择父元素下的第n个子元素，例如 ul li:nth-child(2) 选择ul下的第二个li元素。
• :first-of-type：选择父元素下的第一个符合条件的子元素，例如 div p:first-of-type 选择div下的第一个p元素。

伪元素选择器

伪元素选择器可以创建新的标签，简化HTML结构。其基础语法和用法包括：

• ::before：在元素内容的前面插入内容，例如 div::before{content:"前面的";} 在div元素内容前插入“前面的”。
• ::after：在元素内容的后面插入内容，例如 div::after{content:"后面的";} 在div元素内容后插入“后面的”。

这些新增的选择器使得CSS的选择更加灵活和强大，能够更好地控制页面布局和样式

新样式

边框

• border-radius:创建圆角边框
• box-shadow:为元素添加阴影
• border-image:使用图片来绘制边框

背景

• background-clip
• background-origin
• background-size
• background-break

文字

• word-wrap:换行
• text-overflow:
• text-shadow
• text-decoration

颜色

• rgba
• hala

tranition