CSS 学习笔记

CSS 学习笔记

• 1.选择器
• 1.1.伪类选择器
• an+b 常用举例
• :nth-child(an+b)
• :nth-of-type(an+b)
• :target
• 1.2.伪元素
• 2.CSS_背景、边框
• background
• background-image 背景图
• border-image-source 边框图片
• 3.CSS_定位_Positioning
• 3.1.position定位类型
• 清除浮动
• 父元素自动高度
• 参考资料

CSS 的细节太多，只作解惑，不搬文档。

1.选择器

1.1.伪类选择器

伪类一般跟在其它选择器后，是对前者的补充描述。

an+b 常用举例

例子	效果
:nth-child(-n+a)	前a名
:nth-last-child(-n+a)	后a名
:nth-child(n+a)	从第a个开始
:nth-last-child(n+a)	从倒数第a个开始
:nth-child(an)	a和a的倍数行

:nth-child(an+b)

1. 在兄弟元素中匹配，但效果只应用在当前元素上。（计算索引时把兄弟都算上了，应用样式时只顾自己）
   1.1. <p> 和 <h1> 一起有Bug。可以用 :nth-of-type() 解决。
2. a,b常量整数。n从0开始，子元素从1开始。a、n、b的位置不能变。
3. :nth-last-child() 从后向前匹配的版本。
   

:nth-of-type(an+b)

• 与 :nth-child(an+b) 类似。但只在当前选择的元素中匹配。
• :nth-last-of-type 从后向前匹配的版本。

:target

用于高亮目标对象。（点链接跳转锚点后就会生效）

1.2.伪元素

• 在元素的前后添加额外内容
• 对占位符、段落首行首字 设置样式

伪元素	例子	说明
::before	:hover::before {content: “★”;}	鼠标悬停时元素前面显示 ★
::after		同理在元素后添加元素
::placeholder		设置站位符样式
::selection	::selection {color:red; background-color:gold;}	选中文字为黄底红字

---

2.CSS_背景、边框

官方页面上有个推荐的样式生成器

background

• 支持纯色、渐变、图片

background-image 背景图

1. 支持多张
   1.1. 用逗号分隔。先上后下
   1.2. 相应控制属性也一样用逗号分隔。
2. 支持各种填充方式

border-image-source 边框图片

---

3.CSS_定位_Positioning

3.1.position定位类型

清除浮动

父元素自动高度

子元素浮动后，父元素自动撑起高度的各种方法：

1. 通过在子元素末尾加一个不可见的子元素，将其清除浮动，实现撑高父元素。
2. 通过伪类实现末尾添加一个元素。
3. 触发BFC比如 overflow : hidden

---

参考资料

MDN 之：CSS（层叠样式表）
后盾人 CSS 文字教程