CSS3 学习笔记（1）——新的选择器

是什么

CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

现状

1.浏览器支持差，需要添加对应私有前缀
2.移动端支持由于pc端
3.不断改进中
4.应用广泛

新的选择器

属性选择器

• div[class]，存在class属性的div:
• div[class=val]，class属性值完全等于val的div标签
• div[class*=val]，class属性值的任意位置包含val字符的div标签
• div[class^=val]，class属性值以val开头的div标签
• div[class$=val，class属性值以val结束的div标签

伪类选择器

1. 兄弟结构伪类，包括两种：

• + , 获取当前元素相邻的指定元素，下例表示获取class属性为first的相邻的li标签，设置为红色字体：

.first + li {
color: red;
}

• ~ ，获取当前元素满足条件的所有兄弟元素

2. 相对于父元素的结构伪类
   li:first-child：查找li的父元素的第一个li子元素
   li:last-child：查找li的父元素的最后一个li子元素
   以上两个实际不推荐使用，有危险

推荐使用以下两个：
li:first-of-type
li:last-of-type

指定索引位置的nth-child(从1开始的索引 || 关键字 || 表达式)，举例：

li:nth-child(5)：查找li的父元素的第5个子元素

li:empty：查找li标签中空内容的标签（空格不算空内容）

其他：

伪元素

主要有：E::before 和 E::after
特点：

• 是行内元素，设置宽高之前需要转换display: block;
• 必须添加content:"" (就算是空内容也要)
• 功能完全等价于dom元素（E的子元素），但不会在dom树生成

其他伪元素：

• E:: first-letter 文本的第一个字或者字母
• E:: first-line 文本第一行
• E:: selection 可改变选中文本的样式（如背景色字体色，但不能改变内容大小）