跳至主要內容
CSS进阶：逻辑组合伪类 :not() :is() :where() :has()

CSS进阶：逻辑组合伪类 :not() :is() :where() :has()

本文将介绍4个逻辑组合伪类，分别是:not() :is() :where() :has() ，这四个伪类的自身优先级为0，这与其他伪类相同，但处理时是将其和括号里的参数作为一个整体计算优先级，这就导致了实际表现出的优先级由参数决定（除了:where() 的优先级总是为 0）。

目前这四位目前都得到了大多数浏览器的支持，同时非常实用，务必掌握哦~

Yihui大约 5 分钟CSS
CSS 自定义属性/变量 (variables）

CSS 自定义属性/变量 (variables）

自定义属性（有时候也被称作CSS 变量或者级联变量）是由 CSS 开发者自行定义的，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： --main-color: black;），由 var() 函数来获取值（比如： color: var(--main-color);）复杂的网站都会有大量的 CSS 代码，通常也会有许多重复的值。

基本用法

声明一个自定义属性，属性名需要以两个减号（--）开始，属性值则可以是任何有效的 CSS 值。和其他属性一样，自定义属性也是写在规则集之内的，如下：

Yihui大约 4 分钟CSS前端
scoped属性的用途和工作原理

关于写公司项目的时候因为没有给组件的<style>加上scoped 属性，导致影响了整个项目的样式，而且还push上了gitlab，特别写了此篇避坑，希望大家引以为戒。

scoped属性的用途和工作原理

style加scoped的用途和原理

在标签上绑定了自定义属性，防止css全局污染 但是很多时候使用ui框架如果加scope就不能覆盖，这个时候一般写sass 会在最外层包裹该组件名的id 就可以不使用scoped 了, 不过用/deep/也可以对组件内的样式进行覆盖

Yihui大约 7 分钟CSS前端
Flex 布局

Flex 布局

本文总结自两篇非常不错的Flex布局讲解文章，希望可以帮到你。

简介

弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。

Yihui大约 9 分钟CSS前端
Grid 布局

Grid 布局

作者：Gopal 链接：https://juejin.cn/post/6854573220306255880 来源：稀土掘金

Grid 布局是什么？

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。利用 Grid 布局，我们可以轻松实现类似下图布局，演示地址

Yihui大约 19 分钟CSS前端
Less 知识点汇总

作者：SimonMa 链接：https://juejin.cn/post/6844903520441729037

Less 知识点汇总

变量

值变量

/* Less */
@color: #999;
@bgColor: skyblue;//不要添加引号
@width: 50%;
#wrap {
  color: @color;
  background: @bgColor;
  width: @width;
}

/* 生成后的 CSS */
#wrap {
  color: #999;
  background: skyblue;
  width: 50%;
}
Yihui大约 13 分钟CSS前端
Stylus 学习整合

Stylus 学习整合

stylus 代码很简介，但是工作过程当中更多的接触的是scss和less，stylus很少人可以驾驭，而且语法更加的简洁和不同

特征

冒号可选、分号可选逗号可选、括号可选、变量、插值、混合书写、算术、强制类型转换、动态导入、条件、迭代、嵌套选择、父级参考、变量函数调用、词法作用域、内置函数、内部语言函数、压缩可选、图像内联可选、可执行 Stylus、健壮的错误报告、单行和多行注释、CSS 字面量、字符转义、TextMate 捆绑等。

Yihui大约 19 分钟CSS前端
伪类与伪元素的区别

伪类与伪元素的区别

伪类(pseudo-classes)

其核心就是用来选择那些不能够被普通选择器选择的文档之外的元素，比如:hover。

伪元素(Pseudo-elements)

其核心就是需要创建通常不存在于文档中的元素，比如::before。

伪类与伪元素的区别

  • 表示方法

    CSS2 中伪类、伪元素都是以单冒号:表示，CSS2.1 后规定伪类用单冒号表示，伪元素用双冒号::表示，浏览器同样接受 CSS2 时代已经存在的伪元素(:before, :after, :first-line, :first-letter 等)的单冒号写法。对于 CSS2 之后所有新增的伪元素(如::selection)，应该采用双冒号的写法。但是因为兼容性问题，大部分还是用的单冒号。

  • 定义不同

    伪类即假的类，通常可以添加类来达到效果，伪元素即假元素，需要通过添加元素才能达到效果。来看下面的例子

    例 1:将一行字符串的首字母变成红色

    现在不用伪元素应该如何实现？用 CSS slector 选择？想了一晚上也没想出来，既然没法选择也就没法添加一个类来改变首字母的颜色。

    <p>I am snow</p>

    添加元素试试，如下，创建一个元素 span 将首字母包裹起来，进而改变其颜色，成功了。这里，关键点在于我们创建了新的元素达到了::first-letter的作用，且不能通过添加其他类来实现这一效果，因此将::first-letter叫做伪元素而不是伪类。

    <p><span style={{ color: red }}>I<span/> am snow</p>

    例 2: 如下要将 I am snow 这句话变为红色

    很简单用:first-child，同样添加一个类试试，显然很容易达到同样效果，我们并没有创建新的元素只是添加了一个类.red-line，因此将:first-child叫做伪类而不是伪元素，尽管它和::first-letter在语义上十分相似。

    div:first-child {
 color: red;
}
或
.red-line {
   color: red;
}

<div class='red-line'>
 <p>I am snow</p>
<div>
Yihui大约 2 分钟CSS前端