伪类和伪元素学习记录

柑橘乌云_

于 2024-08-09 14:55:48 发布

阅读量975

点赞数 19

分类专栏： css 文章标签：前端 css

本文链接：https://blog.csdn.net/m0_57033755/article/details/141059939

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

4、::first-line (:first-line)

5、::selection

mdn文档

一、伪类

1、:active

:active 伪类匹配被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。

/* Selects any <a> that is being activated */
a:active {
  color: red;
}

:active 伪类一般被用在 <a> 和 <button> 元素中。这个伪类的一些其他适用对象包括包含激活元素的元素，以及可以通过他们关联的<label>标签被激活的表格元素。其中和其他某些伪类存在优先级关系：:link — :visited — :hover — :active

2、:checked

:checked CSS 伪类选择器表示任何处于选中状态的radio(<input type="radio">), checkbox (<input type="checkbox">) 或 ("select") 元素中的option HTML 元素 ("option")。

/* 匹配任意被勾选/选中的 radio(单选按钮),checkbox(复选框),或者 option(select 中的一项) */
:checked {
  margin-left: 25px;
  border: 1px solid blue;
}

3、:disabled

:disabled CSS 伪类表示任何被禁用的元素。如果一个元素不能被激活（如选择、点击或接受文本输入）或获取焦点，则该元素处于被禁用状态。元素还有一个启用状态，在启用状态下，元素可以被激活或获取焦点。

4、:first-child

:first-child CSS 伪类表示在一组兄弟元素中的第一个元素。

<div>
  <p>此文本已选中！</p>
  <p>此文本未选中。</p>
</div>

<div>
  <h2>此文本未被选中：它不是一个 `p`。</h2>
  <p>此文本未被选中。</p>
</div>

p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

5、:focus

:focus CSS 伪类表示获得焦点的元素（如表单输入）。当用户点击或轻触一个元素或使用键盘的 Tab 键选择它时，它会被触发。

input:focus {
  background-color: lightblue;
}

select:focus {
  background-color: ivory;
}

6、:focus-within

:focus-within CSS 伪类表示当元素或其任意后代元素被聚焦时，将匹配该元素。换言之，它表示 :focus 伪类匹配到该元素自身或它的后代时，该伪类生效。（这也包括 shadow 树中的后代元素。）

这个选择器非常有用，举个常见的例子，当用户聚焦于一个 <input> 字段时，可以用它来突出显示整个 <form> 容器。

<p>试试在这个表单中输入点什么。</p>

<form>
  <label for="given_name">给定名称：</label>
  <input id="given_name" type="text" />
  <br />
  <label for="family_name">家庭名称：</label>
  <input id="family_name" type="text" />
</form>


form {
  border: 1px solid;
  color: gray;
  padding: 4px;
}

form:focus-within {
  background: #ff8;
  color: black;
}

input {
  margin: 4px;
}

7、:hover

:hover CSS 伪类在用户使用指针设备与元素进行交互时匹配，但不一定激活它。通常情况下，用户将光标（鼠标指针）悬停在元素上时触发。

8、:placeholder-shown

:placeholder-shown CSS 伪类表示当前显示占位符文本的任何 <input> 或 <textarea> 元素。

9、:only-child

:only-child CSS 伪类表示没有任何兄弟元素的元素。这与 :first-child:last-child 或 :nth-child(1):nth-last-child(1) 相同，但前者具有更小的权重性。

10、:nth-last-child

:nth-last-child() 这个CSS 伪类从兄弟节点中从后往前匹配处于某些位置的元素

11、:nth-child()

CSS :nth-child() 伪类根据元素在父元素的子元素列表中的索引来选择元素。换言之，:nth-child() 选择器根据父元素内的所有兄弟元素的位置来选择子元素。

12、:not()

:not() CSS 伪类用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。

13、:last-child

:last-child CSS 伪类代表一组兄弟元素中的最后元素。

二、伪元素

1、::after

在 CSS 中，::after 会创建一个伪元素，作为所选元素的最后一个子元素。它通常用于为具有 content 属性的元素添加修饰内容。默认情况下，它是行向布局的。

2、::before

CSS 中，::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认是行级的。

3、::first-letter

::first-letter CSS 伪元素将样式应用于区块容器第一行的第一个字母，但仅当其前面没有其他内容（例如图像或行内表格）时才有效。

4、::first-line (:first-line)

::first-line CSS pseudo-element （CSS 伪元素）在某 block-level element （块级元素）的第一行应用样式。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小。

和其他所有的伪元素一样，::first-line 不能匹配任何真实存在的 html 元素。

::first-line 伪元素只能在块容器中，所以，::first-line伪元素只能在一个 display 值为 block, inline-block, table-cell 或者 table-caption中有用.。在其他的类型中，::first-line 是不起作用的。