0_1 CSS的样式、选择器及其权重、伪类伪元素

------------恢复内容开始------------

一、样式修改+vue

有三种途径：

（1）第一种（内联样式/行内样式），直接在标签内部通过style属性来设置元素样式

问题：样式只能对一个标签生效，变化时必须要一个一个修改

（2）第二种（内部样式表）将样式写到style标签里面，通过选择器来选中元素并设置

问题：内部样式表只能对一个网页起作用，不能跨页面进行复用

（3）第三种（外部样式表）最佳实践，将css样式编写到一个外部的css文件中，通过link标签来引入；

使样式可以在不同页面中复用，可以利用浏览器缓存机制，加快网页的加载速度，提高用户体验。

另：在vue中则是利用第二种（内部样式表），以便组件式开发

二、选择器（按照权重由高到底）

1. 内联样式
2. id选择器（vue里面利用ref='' xxx"，this.$refs.xxx）
3. 类和伪类选择器
4. 元素和伪元素选择器
5. 通配选择器
6. 继承的样式

利用伪类和伪元素是解决 高度塌陷的最好方法

伪类：不存在的类||特殊的类，用来描述一个元素的特殊状态，一般都是使用“：”开头

1. 根据所有的子元素:first-child第一个元素，:last-child最后一个元素，:nth-child（）选中第n个子元素
2. 根据同类型元素:first-of-type  :last-of-type  :nth-of-type()
3. :not() 否定伪类 - 将符合条件的元素从选择器中去除
4. ...

伪元素：页面中一些特殊的并不真实存在的元素（特殊的位置），使用“::”开头

1. ::first-letter表示第一个字母
2. ::first-line 表示第一行
3. ::selection 鼠标选中的内容　
4. ::before 元素的开始
5. ::after 元素的最后；　　【before 和 after 必须结合content属性来使用】

 

------------恢复内容结束------------