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属性来使用】

 

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

posted @ 2022-03-03 16:19  踏燕白梅  阅读(61)  评论(0)    收藏  举报