【後转前要多久】# Day15 CSS -难东西 (伪元素)

这篇纪录了CSS中不算少见、却也有些难理解的东西

DOM Tree之中不涵盖伪元素及伪类别，可以对DOM元素以外的部分做一些修饰、点缀。

DOM Tree

伪元素 Pseudo-elements

伪元素前面通常会挂上两个冒号::

伪元素不是真正的元素，而是看起来很像元素的虚拟元素，看的到他、却不存在於DOM结点上。
伪元素因为是假的，必须要加上content属性才会存在

HTML

...
<div class="a"> DIV </div>
...

CSS

* :not(body){
    outline: 3px orange solid;
}

.a{
    content: "这里打啥都不会出现";
}

.a::before{
    content: 'before ';
}

.a::after{
    content: 'after ';
}

Chrome开发者模式

可以看到<body>里只出现一个<div>标签，
<div>元素底下的内容(content)分别是::before、DIV文字、::after，
::before与::after内容完全不会出现在Chrome浏览器的检查元素中。
而元素border橘色框框居然也只有框出<div>标签，没有框出伪元素，可见他根本就不是元素嘛！

CSS

.a{
    outline: 3px orange solid;
    content: "改成这样也不会出现伪元素的边框";
}

因为伪元素能够画面中呈现的文字并不是因为HTML Element的关系，而是靠CSS渲染出来的，就像幽灵人口，
除非有额外爬CSS、对CSS来作解析，否则爬虫光是爬HTML或JS是无法爬到伪元素内容的

我们在这个元素挂上伪元素，让伪元素实体化後，便可对元素进行一些额外的间接操作。

对伪元素加上display: block;以及width、height，让他具有实体宽高。
CSS

.a::before{
    content: 'before ';
    display: block;
    width: 100px;
    height: 100px;
    background: yellowgreen;
}

.a::after{
    content: 'after ';
    display: block;
    width: 100px;
    height: 100px;
    background: yellow;
}

伪元素实体化

我们来玩一下，
让HTML只留下空白标签、稍加修改一下CSS并且加上前一章的绝对定位 position: absolute;
另外将相对定为点设在长出伪元素的元素身上。

HTML

...
<div class="a"></div>
...

CSS

.a{
    position: relative;
}

.a::before{
    content: 'before ';
    display: block;
    width: 150px;
    height: 150px;
    background: yellowgreen;
    position: absolute;
}

.a::after{
    content: 'after ';
    display: block;
    width: 100px;
    height: 100px;
    background: yellow;
    position: absolute;
}

绝对定位伪元素

嗯，这样感觉很酷，
透过伪元素，我们可以办到只用一个元素时做不到的事情、效果

伪元素不只::before、::after

::before、::after是较常出现的两大宗，
一个指定在该元素前、一个指定在该元素後出现

另外比较常见的还有
::first-letter 指定元素内容中的第一个文字
::first-line 指定元素内容中第一行文字
等等

详见MDN Pseudo-elements

伪类别 Pseudo-classes

伪类别前面通常会挂上一个冒号:

伪类别不是真正的类别(class)，而是当元件处於一或多个特定状态时去做选取，
依照使用者互动动态行为而让当网页元素处於特殊状态、事件时(例如被滑鼠覆盖、被点击、被选取等等)，
我们可以透过一些伪类别来描述出上述的变化状态，并根据元素的状态而设置元素样式、加以修饰。

伪类别能对DOM产生影响。

常见的有
:link、:visited 未被造访过、以造访过的连结
:hover、:active 滑鼠在上方悬浮、被滑鼠选中
:checked、:focus 单选或复选框被确认、元素被聚焦
:is()、:not() 是或否匹配的选取器
:first-chid、:last-child 指定元素底下的第一个、最後一个子元素
:only-child 指定元素底下只有单个子元素(没有其他兄弟)
:nth-child()、:nth-col() 元素底下第N个子元素、表格网格(table、grid)第N栏

详见MDN Pseudo-classes


<<:  Day 29：「欸！你填一下这张表！」- 弹跳视窗、Modal

>>:  DAY30 - [React] useMemo 与 後续

《赖田捕手：追加篇》第 35 天：制造 Deploy to Heroku 按钮

第 35 天：制造 Deploy to Heroku 按钮 我打开信封，有张明信片在里面。明信片封面...

Day5 参加职训(机器学习与资料分析工程师培训班)，Python程序设计

上午: Python程序设计 初步介绍Python，此次课程设计为完全没学过该语言的情况，因此老师从...

JS 19 - 我要一份能控制网页内容的三人全家桶！

大家好！ 今天要介绍的是能控制网页内容的原型方法。 我们进入今天的主题吧！ 插入元素 Felix.p...

Cobol 语言和你 SAY HELLO!!

第六天 各位点进来的朋友，你们好阿 小的不才只能做这个系列的文章，但还是希望分享给点进来的朋友，知道...

RISC-V on Rust 从零开始(7) - 实作指令基本框架

使用Spike执行RISC-V gnu toolchain编译出来的ELF档，就可以得到完整执行此E...