1.5 特殊选择器

伪类

::frist-letter

  • 首字
p::first-letter {
    font-size: 24px;
    color: green;
}

<p>创新者和应用程序开发人员在这个新的区块链经济中面临的一个挑战是从头构建新的区块链应用程序是很困难的。最重要的是,通过传统的工作量证明(PoW)和权益证明机制(PoS),网络和应用程序的安全性取决于计算能力和/或 token。对于小企业主和创业公司来说,这些挑战使得门槛很高。小型创业公司无法独立部署广泛分布而功能强大的计算机网络来保护其应用程序。</p>

::frist-line

  • 首行
p::first-line {
    color: red;
}

<p>创新者和应用程序开发人员在这个新的区块链经济中面临的一个挑战是从头构建新的区块链应用程序是很困难的。最重要的是,通过传统的工作量证明(PoW)和权益证明机制(PoS),网络和应用程序的安全性取决于计算能力和/或 token。对于小企业主和创业公司来说,这些挑战使得门槛很高。小型创业公司无法独立部署广泛分布而功能强大的计算机网络来保护其应用程序。</p>

::after

  • 之前插入
p::after {
    content:'-- xx新闻社';
    color: darkgray;
    font-size: 12px;
}

<p>创新者和应用程序开发人员在这个新的区块链经济中面临的一个挑战是从头构建新的区块链应用程序是很困难的。最重要的是,通过传统的工作量证明(PoW)和权益证明机制(PoS),网络和应用程序的安全性取决于计算能力和/或 token。对于小企业主和创业公司来说,这些挑战使得门槛很高。小型创业公司无法独立部署广泛分布而功能强大的计算机网络来保护其应用程序。</p>

::before

  • 之后插入
p::before {
    content:"重大新闻:";
    color: red;
    font-size: 24px;
}

<p>创新者和应用程序开发人员在这个新的区块链经济中面临的一个挑战是从头构建新的区块链应用程序是很困难的。最重要的是,通过传统的工作量证明(PoW)和权益证明机制(PoS),网络和应用程序的安全性取决于计算能力和/或 token。对于小企业主和创业公司来说,这些挑战使得门槛很高。小型创业公司无法独立部署广泛分布而功能强大的计算机网络来保护其应用程序。</p>

::selection

  • 高亮状态(不知与 active 有何区别)
::selection {
    color:#ff0000;
    background-color: aliceblue;
}
<a href="index.html">selection</a>

特殊功能

:target

  • 锚点标记时
p:target {
    border: 2px solid greenyellow;
}
a:target {
    border: 2px solid red;
}

<a href="#target1">选择target1</a>
<a href="#target2">选择target2</a>
<p id="target1">target</p>
<a id="target2">target</a>