伪类和伪元素

元子不圆呀
213 阅读7分钟

伪类

伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者失当鼠标指针悬浮在元素上面的时候，它们表现的会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。

伪类的特点

伪类就是开头为冒号的关键字

:pseudo-class-name

常见伪类

选择器描述
:active在用户激活（例如点击）元素的时候匹配。
:any-link匹配一个链接的:link和:visited状态。
:blank匹配空输入值的元素。
:checked匹配处于选中状态的单选或者复选框。
:current (en-US)匹配正在展示的元素，或者其上级元素。
:default匹配一组相似的元素中默认的一个或者更多的 UI 元素。
:dir基于其方向性（HTMLdir属性或者 CSSdirection属性的值）匹配一个元素。
:disabled匹配处于关闭状态的用户界面元素
:empty匹配除了可能存在的空格外，没有子元素的元素。
:enabled匹配处于开启状态的用户界面元素。
:first匹配分页媒体的第一页。
:first-child匹配兄弟元素中的第一个元素。
:first-of-type匹配兄弟元素中第一个某种类型的元素。
:focus当一个元素有焦点的时候匹配。
:focus-visible当元素有焦点，且焦点对用户可见的时候匹配。
:focus-within匹配有焦点的元素，以及子代元素有焦点的元素。
:future (en-US)匹配当前元素之后的元素。
:hover当用户悬浮到一个元素之上的时候匹配。
:indeterminate匹配未定态值的 UI 元素，通常为复选框。
:in-range用一个区间匹配元素，当值处于区间之内时匹配。
:invalid匹配诸如的位于不可用状态的元素。
:lang基于语言（HTMLlang属性的值）匹配元素。
:last-child匹配兄弟元素中最末的那个元素。
:last-of-type匹配兄弟元素中最后一个某种类型的元素。
:left在分页媒体 (en-US)中，匹配左手边的页。
:link匹配未曾访问的链接。
:local-link (en-US)匹配指向和当前文档同一网站页面的链接。
:is()匹配传入的选择器列表中的任何选择器。
:not匹配作为值传入自身的选择器未匹配的物件。
:nth-child匹配一列兄弟元素中的元素——兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配元素 1、3、5、7 等。即所有的奇数个）。
:nth-of-type匹配某种类型的一列兄弟元素（比如，

元素）——兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配元素 1、3、5、7 等。即所有的奇数个）。

:nth-last-child匹配一列兄弟元素，从后往前倒数。兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。
:nth-last-of-type匹配某种类型的一列兄弟元素（比如，

元素），从后往前倒数。兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。

:only-child匹配没有兄弟元素的元素。
:only-of-type匹配兄弟元素中某类型仅有的元素。
:optional匹配不是必填的 form 元素。
:out-of-range按区间匹配元素，当值不在区间内的的时候匹配。
:past (en-US)匹配当前元素之前的元素。
:placeholder-shown匹配显示占位文字的 input 元素。
:playing (en-US)匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“播放”的元素。
:paused (en-US)匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“暂停”的元素。
:read-only匹配用户不可更改的元素。
:read-write匹配用户可更改的元素。
:required匹配必填的 form 元素。
:right在分页媒体 (en-US)中，匹配右手边的页。
:root匹配文档的根元素。
:scope匹配任何为参考点元素的的元素。
:valid匹配诸如元素的处于可用状态的元素。
:target匹配当前 URL 目标的元素（例如如果它有一个匹配当前URL 分段的元素）。
:visited匹配已访问链接。

伪类的应用

我们根据伪类的应用特点，可以分为两类用途

结构性伪类

按照元素在文档中的结构状态，给元素添加状态样式：如：:nth-child(n), :first-child, :last-child等

article p:first-child {
  font-size: 120%;
  font-weight: bold;
}  

<article>
  <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
          melon azuki bean garlic.</p>

  <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
          greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
</article>
用户行为伪类

这些伪类主要用于用户以某种方式和文档交互的时候。这些用户行为伪类，有时也叫动态伪类，表现的就像是一个类在用户和元素交互的时候加到了元素上一样。 如：:hover,:focus等

a:link,
a:visited {
  color: rebeccapurple;
  font-weight: bold;
}

a:hover {
  color:hotpink;
}

<p><a href="">Hover over me</a></p>

伪元素

伪元素表现的就像是你往标记文本中添加了全新的html元素一样，而不是向现有的元素上应用类

伪元素的特点

伪元素开头以双冒号::

::pseudo-element-name

常用伪类

选择器描述
::after匹配出现在原有元素的实际内容之后的一个可样式化元素。
::before匹配出现在原有元素的实际内容之前的一个可样式化元素。
::first-letter匹配元素的第一个字母。
::first-line匹配包含此伪元素的元素的第一行。
::grammar-error匹配文档中包含了浏览器标记的语法错误的那部分。
::selection匹配文档中被选择的那部分。
::spelling-error匹配文档中包含了浏览器标记的拼写错误的那部分。

伪元素的应用

想要给第一行文本添加状态，但是第一行文本内容是不确定的，因为不同屏幕大小第一行内容是不一样的。因此不能使用伪类，这时就要使用伪元素，就好像是根据实际情况，每次都给第一行文本添加了一个span元素一样。

article p::first-line {
  font-size: 120%;
  font-weight: bold;
}

<article>
  <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
          melon azuki bean garlic.</p>

  <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
          greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
</article>

说到底，伪元素的用途本质上就是往现有元素中添加内容。

伪类和伪元素的结合应用

除了伪类和伪元素的单独应用外，我们还可以把他们结合起来一起使用。 比如上面的例子：

article p:first-child::first-line {
  font-size: 120%;
  font-weight: bold;
}

::before和::after

这两个伪元素想必我们都不陌生吧，它们经常被我们用在写一些的特殊的几何形状的css。在清除浮动中也会用到。 ::before和::after经常会和content属性一起使用，使用css将内容插入到你的文档中。

将具体文本内容插入到元素中

这种情况下用的比较少

.box::before {
  content: "This should show before the other 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>
将空字符串插入到元素中

这种情况下用的也比较多，通过将空字符串插入到元素中，然后设置display: block；这样就可以样式化了，然后可以设置width, height等等样式。

.box::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  background-color: rebeccapurple;
  border: 1px solid black;
}
<p class="box">Content in the box in my HTML page.</p>
avatar
文章
阅读
粉丝