CSS 伪类和伪元素-笔记

最新推荐文章于 2024-07-25 08:14:42 发布

洪海洋

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量227

点赞数

分类专栏： CSS 文章标签： css 伪元素伪类

本文链接：https://blog.csdn.net/afr3828/article/details/79213479

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

资料：

作者-静子：https://www.w3cplus.com/css/an-ultimate-guide-to-css-pseudo-classes-and-pseudo-elements.html

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

伪类

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).

明显 MDN 的英文原文比翻译过来的要好理解一点。伪类是用来指定、描述元素状态的关键词。

常见的伪类：

:link（链接的正常状态）

:visited（已经访问过的链接）

:hover（悬停在链接上）

:active（鼠标点击链接但是还未放开）

:focus（获得焦点的元素，如触摸板上的点击或键盘触发）

:first-child（表示该元素是第一个儿子，伪类是描述冒号前面元素的状态）：

<body>
    <p>
        111
    </p>
    <div>
        <p>222</p>
        <div>
            <p>333</p>
        </div>
    </div>
</body>

p:first-child{
    color:red;
}

结果：

:first-of-type （代表一群兄弟元素中该种类元素的第一个）

<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

p:first-of-type {
  color: red;
  font-style: italic;
}

结果：

<article>
  <div>This `div` is first!</div>
  <div>This <span>nested `span` is first</span>!</div>
  <div>This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div>
  <div>This <span>nested `span` gets styled</span>!</div>
  <b>This `b` qualifies!</b>
  <div>This is the final `div`.</div>
</article>

注意这里的 css article 后面有个空格：

article :first-of-type {
  background-color: pink;
}

结果：

:nth-child() 按照括号中的公式渲染一群兄弟元素中元素，

公式可以是 an+b 或 odd 或 even 后两个就是字面意思。

an+b，b 是从第几个开始（包括它），an 就是每几（a）个渲染。

<ol>
    <li>Alpha</li>
    <li>Beta</li>
    <li>Gamma</li>
    <li>Delta</li>
    <li>Epsilon</li>
    <li>Zeta</li>
    <li>Eta</li>
    <li>Theta</li>
    <li>Iota</li>
    <li>Kappa</li>
</ol>

注意这里的 css ol 后面也有一个空格：

ol :nth-child(2){
  color:red;
}

结果：变红的是 Beta。nth-child(2) 这里可以理解为 0n+2

ol :nth-child(3n){
  color:red;
}

结果：变红的是 Gamma，Zeta，Iota。nth-child(3n) 这里是 3n+0

ol :nth-child(3n+5){
  color:red;
}

结果：变红的是 Epsilon，Theta。

ol :nth-child(even){
  color:red;
}

结果：偶数变红，odd 是奇数变红。

伪元素

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s).

伪元素是用来设计元素的部分样式的。伪元素不存在文档树和 DOM 中。

常见的伪元素：::after ::before ::first-letter ::first-line ::selection

伪类和伪元素都可以用 : 一个冒号，在 CSS3 中可以用 :: 双引号来使用伪元素。一些伪元素如 ::backdrop 只能用双冒号。IE8 及其以下不支持双冒号。

常见的伪元素：

::before ::after

::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

两者都是创建被修饰的元素的子元素，一个是第一个子元素，一个是最后一个子元素

<q>Some quotes,</q> he said, <q>are better than none.</q>

q::before { 
  content: "«";
  color: blue;
}
q::after { 
  content: "»";
  color: red;
}

结果：

::first-letter 用来选择文本的第一个字母，用 ::before 生成的内容，也可以用 ::first-letter 来指定。

::first-line 用来指定元素的第一行，只对块级元素起作用。

洪海洋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 伪类和伪元素-笔记

资料：作者-静子：https://www.w3cplus.com/css/an-ultimate-guide-to-css-pseudo-classes-and-pseudo-elements.html https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes伪类 A CSS pseudo
复制链接

扫一扫

专栏目录