CSS伪类和伪元素 ,超详细的总结

莹莹酱~

已于 2023-08-21 08:45:19 修改

阅读量312

点赞数

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

于 2023-08-04 16:11:39 首次发布

本文链接：https://blog.csdn.net/qq_36825145/article/details/132106607

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

2.1 ::first-line | 选择文本的第一行

2.2 ::first-letter | 选择这一行的第一字

2.3 : :before 和 ::after

三.伪类和伪元素的区别

一.伪类

什么是伪类?

*伪类*是添加到选择器的关键字，用于指定所选元素的特殊状态.

伪类由冒号（:）后跟着伪类名称组成（例如，:active）,函数式伪类还包含一对括号来定义参数（例如，:dir()）。

1.1 表示状态的伪类

伪类	描述
:link	所有未访问链接
:visited	所有访问过的链接
:hover	鼠标放到标签上的时候
:active	鼠标点击标签的状态
:focus	标签获得焦点时的样式

*注意：* 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

*注意：* 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

*注意：*伪类的名称不区分大小写。

 <a href="www.cctv.com">www.cctv.com</a>

 <style>
     /*超链接点击之前是黑色*/
     a:link {
         color: black;
     }
     /*超链接点击之后是蓝色*/
     a:visited {
         color: blue;
     }
     /*鼠标悬停，放到标签上的时候是绿色*/
     a:hover {
         color: green;
     }
     /*鼠标点击链接，但是不松手的时候*/
     a:active {
         color: red;
     }
 </style>

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

<form>
   <p>Which flavor would you like to order?</p>
   <label>Full Name: <input name="firstName" type="text" /></label>
   <label>Flavor:
     <select name="flavor">
       <option>Cherry</option>
       <option>Green Tea</option>
       <option>Moose Tracks</option>
       <option>Mint Chip</option>
     </select>
   </label>
 </form>
 
 <style>
 label {
   display: block;
   margin-top: 1em;
 }
 input:focus {
   background-color: lightblue;
 }
 select:focus {
   background-color: ivory;
 }
 </style>

1.2 树结构的伪类

这些伪类与文档树中的元素位置有关。

:root

表示文档的根元素。在 HTML 中这通常是 <html> 元素。

 /* 选择文档的根元素（HTML中的 <html>） */
 :root {
   background: pink;
 }

:empty

表示除空白字符外没有子元素的元素。用于选择不包含任何子元素的元素。子元素可以是元素节点或文本（包括空格）。但是注释、处理指令不会影响元素是否被认定为空。

  div:empty {
             border:2px solid lightblue; ;
             height: 1em;
             width: 8em;
         }
 
     <p>1.div下没有子元素</p>
     <div></div>
     <p>2.div下有注释内容</p>
     <div><!-- 注释内容 --></div>
     <p>3.div嵌套了空元素</p>
     <div><p></p></div>  //看这里

1.3 语言的伪类

这些伪类根据文档语言而反应，可以基于语言或书写方向来选择元素。

:dir

方向性伪类基于由文档语言所确定的其方向性来选择元素。

.dir :dir(ltr) {
   color: blue;
 }
 .dir :dir(rtl) {
   color: green;
 }
 
 <div class="dir">  
   <p dir="ltr">从左到右</p>
   <p dir="rtl">从右到左</p>
 </div>

:lang

基于其内容语言来选择元素。

 *:lang(en-US) {
             border: 2px solid orangered;
         }
 
     <p lang="en-US"> //看这里
     Spring will come when spring goes.Flowers fade and flowers will bloom again.as long as you want.Let the dream row to your heart sea.
     </p>
     <p lang="pl-PL">
     Gdy widzimy znak z narysowaną czaszką i napisem <strong lang="en-US">DANGER</strong> to lepiej nie wchodzić dośrodka.
     </p>

1.4 否定伪类

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

 p:not(.irrelevant) {
   font-weight: bold;
 }
 p > :not(strong, b.important) {
   color: darkmagenta;
 }

1.5 子元素的伪类

① :first-child 选择第一个子元素

示例：

 p:first-child{
      background: pink;
  }

②:last-child 选择最后一个子元素

示例：

  p:last-child{
      background: pink;          
 }

③:nth-child ()选择指定位置的子元素注意：该选择器后边可以指定一个参数，指定要选中第几个子元素示例：

p:nth-child(1){
      color: yellowgreen;
  }
 p:nth-child(even){  /* 偶数 */
      color: palevioletred;
  }  
  p:nth-child(odd){  /* 奇数 */
      color: blueviolet;
  }

④:nth-last-child（）从后往前选择指定位置的子元素

注意：该选择器后边可以指定一个参数，指定要选中第几个子元素示例：

 p:nth-last-child(1){
      color: yellowgreen;
  }

⑤:first-of-type选中指定类型的第一个子元素

示例：

 p:first-type-of{
      color: yellowgreen;
  }

⑥:last-of-type选中指定类型的最后一个子元素

示例：

 p:nth-of-type{
      color: yellowgreen;
  }

⑦:nth-of-type（）选中指定类型指定位置的子元素示例：

 p:nth-type-of(1){
      color: yellowgreen;
 }

⑧:nth-last-of-type（）从后往前选中指定类型指定位置的子元素示例：

 p:nth-last-of-type(1){
      color: yellowgreen;
 }

⑨only-child 只有一个子元素才有作用

:only-child 匹配没有任何兄弟元素的元素.等效的选择器还可以写成 :first-child:last-child或者:nth-child(1):nth-last-child(1),当然,前者的权重会低一点。

 p:only-child{
   background: #409EFF;
 }
 
 <div>
   <p>第一个没有任何兄弟元素的元素</p>
 </div>
 <div>
   <p>第二个</p>
   <p>第二个</p>
 </div>

⑩:target 表示一个唯一的元素（目标元素），其 id 与当前 URL 片段匹配。

:target{
 border:2px solid black;
 background-color:lightblue;
 } 
 //点击链接,:target选择器会突出显示当前活动的HTML锚.Internet Explore 8 以及更早的版本不支持 :target 选择器
 <a href="#news1"><a>
 <a href="#news2"><a>
 <p id="news1">内容1..</p>
 <p id="news2">内容2..</p>

1.6 表单相关的伪元素

列举几个平时比较常用的:

①:checked 选择一个选中的复选框

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

 input:checked {
   box-shadow: 0 0 0 3px lightblue;
 }
 
 <input type="checkbox" />

②:valid | 选择一个有效的元素

:valid CSS 伪类表示内容验证正确的<input> 或其他 <form> 元素。这能简单地将校验字段展示为一种能让用户辨别出其输入数据的正确性的样式。

input:valid {
   box-shadow: 0 0 0 3px lightblue;
 }

③:invalid | 选择一个无效的元素

:invalid CSS 伪类表示任意内容未通过验证的 <input> 或其他 <form> 元素。

 input[type="text"]:invalid {
     border-color: green;
 }

二.伪元素

伪元素是什么?

和伪类很像，元素就是标签，使用伪元素来表示元素中的一些特殊的位置。

2.1 `::first-line` | 选择文本的第一行

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

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

用法如下：

 p:first-line {
   color: lightcoral;
 }

2.2 `::first-letter` | 选择这一行的第一字

CSS 伪元素 ::first-letter会选中某块级元素第一行的第一个字母。用法如下：

 <style>
     p::first-letter{
       color: red;
       font-size: 2em;
     }
 </style>
 
 <p>我叫小叮当</p>

2.3 : :before 和 ::after

注意::before和:before写法是等效的,

:before是Css2的写法，::before是Css3的写法

:before的兼容性要比::before好

建议：不过在H5开发中使用::before比较好

 p::before{
    content: "《";
    color: #000000;
}
p::after{
    content: "》";
    color:#000000;
}
 
<p>小王子</p>

效果:《小王子》

三.伪类和伪元素的区别

有些人搞不清楚伪类和伪元素的区别，我们先来讲讲这个。

最主要的最核心的区别就是：有没有产生新的元素。

使用上伪类使用一个冒号：,伪元素使用两个冒号 ::

伪类可以说是补充了选择器，在页面无标签，但是真实的存在Dom文档中。

伪元素是创建了一个新的元素，不存在于Dom文档中，真实不存在的，但又是一个可以装载内容的元素。

莹莹酱~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS伪类和伪元素 ,超详细的总结

用于选择不包含任何子元素的元素。在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小。是创建了一个新的元素，不存在于Dom文档中，真实不存在的，但又是一个可以装载内容的元素。在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。和伪类很像，元素就是标签，使用伪元素来表示元素中的一些特殊的位置。:before是Css2的写法，::before是Css3的写法。
复制链接

扫一扫