每日刷题：CSS 介绍一下伪类以及伪元素CSS 选择器选择器的种类有：类型、类和ID选择器属性选择器关系选择器

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情

CSS 选择器

选择器的种类有：

类型、类和ID选择器
属性选择器
关系选择器
伪类与伪元素

类型、类和ID选择器

h1 { } /* 类型选择器 */
.box { } /* 类选择器 */
#unique { } /* ID选择器 */

属性选择器

元素上的某个属性是否存在
属性是否是特定值

a[title] { } //是否存在

a[href="https://example.com"] { } //是否特定值
a[href*="google"] ｛ } //是否包含'google'
a[href^="https"] { } // 是否以'https'开头
a[href$="https"] { } // 是否以'https'结尾
a[href^="https"][href*="google"] { } //是否以'https'开头且包含'google'

关系选择器

// html
<section id="products">
  <p>lorem<p> //直接后代 p1
  <article>
    <p>lorem<p> //p2
  </article>
</section>
<p>lorem<p> //p3
<p>lorem<p> //p4
    
//descendant selector 后代选择器
#products p { } // #products所有后代中的p元素 p1/p2
#products > p { } // #products的直接后代中的p元素 p1
#products + p { } // 只影响与#products同级且紧跟在#products之后的p元素 p3
#products ~ p { } // 影响在#products之后的所有与之同级的p元素 p3/p4

伪类与伪元素

MDN文档

伪类

用于选择处于 特定状态 的元素
比如当它们是这一类型的第一个元素时 (:first-of-type)，
或者是当鼠标指针悬浮在元素上面的时候(:hover)
表现得像是添加了一个类，从而减少类的使用
特征是以:开头

:pseudo-class-name

常见伪类

article :first-child //article的第一个子元素
article :first-of-type //article内第一次出现的任何标签都将应用这个格式
article :nth-of-type(3)
article p:last-child //必须是article的last child且是p元素才会生效

a:hover
a:visted
a:link
a:focus

伪元素

表现得是像你往标记文本中加入全新的 HTML 元素一样
开头为双冒号::

::pseudo-element-name

常见伪元素

p::first-letter //段落首字母
p::first-line //段落第一行
p::selection //段落被鼠标选中部分
p::before
p::after

::before 与 ::after

::before 表示在元素内容之前插入一个虚拟的元素， ::after 则表示在元素内容之后插入，并且 ::before 和 ::after 中支持所有的 CSS 属性，必须和content 属性一同使用。

常见用法

插入图标

<p class="box">Content in the box in my HTML page.</p>

.box::after {
    content: " ➥"
}

添加样式

<p class="box">Content in the box in my HTML page.</p>

//创建菱形图案，显示在文字下方
.box::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    transform: scale(1.07,1.05) skewX(-15deg);
    background-image: linear-gradient(to top left, #39b385, #9be15d);
    
    position: absolute;
    bottom: 0;
    left:0;
    z-index: -1;   
}