Vue设置全局css文件以及css组合器

CSS选择器详解与应用

原创已于 2022-04-12 10:53:22 修改 · 3.6k 阅读

CC 4.0 BY-SA版权

文章标签：

于 2022-04-12 10:48:52 首次发布

6 篇文章

订阅专栏

3 篇文章

订阅专栏

本文介绍了CSS中常用的选择器，包括组群选择器、后代选择器、子选择器、相邻兄弟选择器和通用兄弟选择器，详细阐述了它们的工作原理和使用场景，帮助开发者更好地理解和运用CSS进行网页样式控制。

ue设置全局css只要在main.js里引入css文件即可，如：

import '@/assets/style.css'; // 全局css

记录一下自己常常记混的几个选择器

//分组选择器选取所有具有相同样式定义的 HTML 元素。
h1, h2, p {
  text-align: center;
  color: red;
}

//下面的例子选择 <div> 元素内的所有 <p> 元素：
div p {
  background-color: yellow;
}

//下面的例子选择属于 <div> 元素子元素的所有 <p> 元素：
div > p {
  background-color: yellow;
}

/*相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。
兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。
下面的例子选择紧随 <div> 元素之后的所有 <p> 元素：*/
div + p {
  background-color: yellow;
}

/*通用兄弟选择器匹配属于指定元素的同级元素的所有元素。
下面的例子选择属于 <div> 元素的同级元素的所有 <p> 元素：*/
div ~ p {
  background-color: yellow;
}