前端小白的学习之路(CSS3 一)

提示：CSS3 是 Cascading Style Sheets（层叠样式表）的第三个主要版本，引入了许多新的特性和增强功能，用于设计和布局网页。本章记录CSS3新增选择器，盒子模型。

目录

一、C3新增选择器

1) 属性选择器 

1.[class^='className']

2.tag[class^='className']

3.tag[class$='className']

4.tag[class*='className']

5.input[type='typeName']

 2)伪类选择器

1.first-child

2.last-child

3.nth-child(n) 与 nth-of-type(n)

3)其他选择器

1.empty

2.not('className')

3.+相邻选择器

4.~兄弟选择器

二、盒子模型box-sizing

1.content-box

2.border-box

一、C3新增选择器

1) 属性选择器 

1.[class^='className']

2.tag[class^='className']

3.tag[class$='className']

4.tag[class*='className']

5.input[type='typeName']

 2)伪类选择器

1.first-child

选择第一个标签

• 列表1
• 列表2
• 列表3
• 列表4
• 列表5
• 123456
这才是最后一个标签

2.last-child

选择最后一个标签

• 列表1
• 列表2
• 列表3
• 列表4
• 列表5
• 123456
这才是最后一个标签

3.nth-child(n) 与 nth-of-type(n)

选择第n个标签

• 列表1
• 列表2
• 列表3
• 列表4
• 列表5
• 123456
这才是最后一个标签

3)其他选择器

1.empty

没有任何内容的标签

1. 选项1
2. 选项2
3. 选项3
4. 选项4
5. 选项5
6. 选项6

2.not('className')

选择除了包含className类名的其他标签 

1. 选项1
2. 选项2
3. 选项3
4. 选项4
5. 选项5
6. 选项6

3.+相邻选择器

选择相邻的标签

1. 选项1
2. 选项2
3. 选项3
4. 选项4
5. 选项5
6. 选项6

4.~兄弟选择器

选择兄弟标签

1. 选项1
2. 选项2
3. 选项3
4. 选项4
5. 选项5
6. 选项6

二、盒子模型box-sizing

box-sizing 是一个 CSS 属性，用于指定元素的盒子模型的计算方式。它有以下几种取值：

1.content-box

box-sizing: content-box;

/*默认属性,表示内容盒子,盒子模型总宽高=width/height+左右/上下padding+左右/上下border*/

2.border-box

box-sizing: border-box;/*表示怪异盒子,盒子模型总宽高=width/height*/

好文阅读