伪类(:first-child、:focus、:hover、:last-child、:nth-child(n)、:nth-last-child(n)等)和伪元素(::after、::before等)

最新推荐文章于 2024-05-21 23:21:19 发布

小白_ysf

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量1.1k

点赞数 21

分类专栏：前端基础文章标签：前端 vue.js css css3

本文链接：https://blog.csdn.net/weixin_41549971/article/details/135378947

版权

前端基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、什么是伪类？

伪类用于定义元素的特殊状态。（①设置鼠标悬停在元素上时的样式；②为已访问和未访问链接设置不同的样式；③设置元素获得焦点时的样式等等；）

2、什么是伪元素？

1.CSS 伪元素用于设置元素指定部分的样式。（①设置元素的首字母、首行的样式；②在元素的内容之前或之后插入内容等等；）

3、伪类和伪元素的区别

伪类: 用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的；伪类没有创造元素，例如：first-child只是给子元素添加样式。
伪元素: 用于创建一些不在DOM树中的元素，并为其添加样式；伪元素相当于创造了一个元素，例如：before和：after都相当于创造了一个新的元素，然后添加了响应的效果。
值得注意的是：标准而言，单引号（:）用于CSS3伪类，双引号（::）用于CSS3伪元素。当然，也有例外，例如：before和 ::before 无论是单引号还是双引号before的用法都是一样的。
①如果网站只需要兼容Webkit 、Firefox、Opera等浏览器或是移动端页面，建议伪元素选择器使用两个冒号（::）的写法；②如果一定要兼容低版本的IE浏览器时，还是使用CSS2的单个冒号（:）的写法更加保险一些网站；）
注意： 不要大量使用伪元素，非常重要的信息，不要使用伪元素。比如产品标题，产品介绍等。它主要用来装饰作用的。（比如：做一些装饰类的小图标的时候，可以使用伪元素；）

4、常见伪类种类

状态伪类

:link 应用于未被访问过的链接；

:hover 应用于鼠标悬停到的元素；

:active 应用于被激活的元素；

:visited 应用于被访问过的链接，与:link互斥。

:focus 应用于拥有键盘输入焦点的元素。

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}
</style>
</head>
<body>

<h1>CSS 链接</h1>
<p><b><a href="/index.html" target="_blank">这是一个链接</a></b></p>
<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后才能生效。</p>
<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后才能生效。</p>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<style>
input:focus
{
background-color:yellow;
}
</style>
</head>
<body>

<p>在文本框中点击，您会看到黄色的背景：</p>

<form>
First name: <input type="text" name="firstname" /><br>
Last name: <input type="text" name="lastname" />
</form>

<p><b>注释：</b>如果 :focus 用于 IE8 ，则必须声明 <!DOCTYPE>。</p>

</body>
</html>

在这里插入图片描述

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

结构化伪类 (css3新增选择器)

:first-child 选择某个元素的第一个子元素；
:last-child 选择某个元素的最后一个子元素；
:nth-child(n) 匹配属于其父元素的第 n个子元素，不论元素的类型；
:nth-last-child() 从这个元素的最后一个子元素开始算,选匹配属于其父元素的第 n个子元素，不论元素的类型；
:nth-of-type() 规定属于其父元素的第n个指定元素；
:nth-last-of-type() 从元素的最后一个开始计算,规定属于其父元素的指定元素；
:first-of-type 选择一个上级元素下的第一个同类子元素；
:last-of-type 选择一个上级元素的最后一个同类子元素；
:only-child 选择它的父元素的唯一一个子元素；
:only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；
:not(selector) :not(p) 选择每个非 <p> 元素的元素。
:target #news:target 选择当前活动的 #news 元素（单击包含该锚名称的 URL）。

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
  color: blue;
} 
</style>
</head>
<body>

<p>这是一段文本。</p>

<p>这是一段文本。</p>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<style>
p i:first-child {
  color: blue;
} 
</style>
</head>
<body>

<p>我是一个<i>强壮</i>的男人。我是一个<i>强壮</i>的男人。</p>

<p>我是一个<i>强壮</i>的男人。我是一个<i>强壮</i>的男人。</p>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child i {
  color: blue;
} 
</style>
</head>
<body>

<p>我是一个<i>强壮</i>的男人。我是一个<i>强壮</i>的男人。</p>

<p>我是一个<i>强壮</i>的男人。我是一个<i>强壮</i>的男人。</p>

</body>
</html>

在这里插入图片描述

表单相关伪类

:checked input:checked 选择每个被选中的 <input> 元素。
:disabled input:disabled 选择每个被禁用的 <input> 元素。
:empty p:empty 选择没有子元素的每个 <p> 元素。
:enabled input:enabled 选择每个已启用的 <input> 元素。
:in-range input:in-range 选择具有指定范围内的值的 <input> 元素。
:invalid input:invalid 选择所有具有无效值的 <input> 元素。
:optional input:optional 选择不带 “required” 属性的 <input> 元素。
:out-of-range input:out-of-range 选择值在指定范围之外的<input>元素。
:read-only input:read-only 选择指定了 “readonly” 属性的 <input> 元素。
:read-write input:read-write 选择不带 “readonly” 属性的 <input> 元素。
:required input:required 选择指定了 “required” 属性的 <input> 元素。
:valid input:valid 选择所有具有有效值的 <input> 元素。
:visited a:visited选择所有已访问的链接。

<!DOCTYPE html>
<html>
<head>
<style> 
input[type="text"]:enabled
{
background:#ffff00;
}
input[type="text"]:disabled
{
background:#dddddd;
}
</style>
</head>
<body>

<form action="">
First name: <input type="text" value="Mickey" /><br>
Last name: <input type="text" value="Mouse" /><br>
Country: <input type="text" disabled="disabled" value="Disneyland" /><br>
</form>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<style>
input:required {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>演示 :required 选择器</h1>

<p>可选的 input 元素：<br><input></p>

<p>必填的 input 元素：<br><input required></p>

<p>:required 选择器选取带有 “required” 属性的表单元素。</p>

<p>Internet Explorer 9 以及更早的版本不支持 :required 选择器。</p>

</body>
</html>

在这里插入图片描述

语言相关伪类

:lang(language) p:lang(it) 选择每个 lang 属性值以 “it” 开头的
元素。

<!DOCTYPE html>
<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="en">A quote in a paragraph</q> Some text.</p>

<p>在本例中，:lang 为 lang="en" 的 q 元素定义引号：</p>

</body>
</html>

在这里插入图片描述

其他伪类

1.:root 选择元素的根元素。

<!DOCTYPE html>
<html>
<head>
<style> 
:root
{
background:#ff0000;
}
</style>
</head>
<body>

<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>

</body>
</html>

在这里插入图片描述

5、常见伪元素种类

1.::after p::after 在每个 <p> 元素之后插入内容。
2. ::before p::before 在每个 <p> 元素之前插入内容。
3.::first-letter p::first-letter 选择每个 <p> 元素的首字母。
3. ::first-line p::first-line 选择每个 <p> 元素的首行。
4. ::selection p::selection 选择用户选择的元素部分。

<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
  content: url(./cd06ad1ad4b74cfa9d3d037b4e582183.png);
  width:50px;
  
}
</style>
</head>
<body>

<h1>这是一个标题</h1>

<p>::before 伪元素在一个元素的内容之前插入内容。</p>

<h1>这是一个标题</h1>

</body>
</html>

在这里插入图片描述

<template>
  <div class="before">
     <div class="notice">消息通知</div>
  </div>
</template>
          
  <script>
export default {
  name: "beforePage",
  props: {},
  data() {
    return {};
  },
};
</script>
            
<style scoped>
.notice{
    display: flex;
    align-items: center;
}
.notice::before{
    content:'';
    width: 4px;
    height: 20px;
    background: #409EFF;
    margin: 5px;
}
</style>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
  content: url(./cd06ad1ad4b74cfa9d3d037b4e582183.png);
}
</style>
</head>
<body>

<h1>这是一个标题</h1>

<p>::after 伪元素在一个元素之后插入内容。</p>

<h1>这是一个标题</h1>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
</style>
</head>
<body>

<p>您可以使用 ::first-line 伪元素将特殊效果添加到文本的第一行。一些更多的文字。越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多。</p>

</body>
</html>

在这里插入图片描述

注意：::first-line 伪元素只能应用于块级元素。

以下属性适用于 ::first-line 伪元素：

字体属性
颜色属性
背景属性
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
</style>
</head>
<body>

<p>您可以使用 ::first-letter 伪元素为文本的第一个字符添加特殊效果！</p>

</body>
</html>

在这里插入图片描述
注意：::first-letter 伪元素只适用于块级元素。

下面的属性适用于 ::first-letter 伪元素：

字体属性
颜色属性
背景属性
外边距属性
内边距属性
边框属性
text-decoration
vertical-align（仅当 “float” 为 “none”）
text-transform
line-height
float
clear

<!DOCTYPE html>
<html>
<head>
<style>
::-moz-selection { /* 针对 Firefox 的代码 */
  color: red;
  background: yellow;
}

::selection {
  color: red;
  background: yellow;
}
</style>
</head>
<body>

<h1>请选择本页中的文本：</h1>

<p>这是一个段落。</p>
<div>这是 div 元素中的文本。</div>

<p><b>注释：</b>Firefox 支持可供替代的 ::-moz-selection 属性。</p>

</body>
</html>

在这里插入图片描述

6、before和:after详解与妙用

<template>
    <div class="beforeAfter">
        <!-- -------------------------------------------------------- -->
        <div class="notice">消息通知</div>

        <!-- ----------------------------------------------------------->
        <div class="chart-box">
            <div class="chart-div">这是一个聊天框</div>
        </div>
        <div class="chart-box">
            <div class="chart-div">这是一个聊天框这是一个聊天框这是一个聊天框这是一个聊天框这是一个聊天框这是一个聊天框</div>
        </div>
        <div class="chart-box">
            <div class="chart-div">123456123456123456123456123456123456123456123456123456123456123456123456123456</div>
        </div>
        <!-- ----------------------------------------------------------->
        <div class="hover-box">
            <span>before</span>
            <span>after</span>
        </div>
        <!-- ----------------------------------------------------------->
        <div class="list">
            <a href="#">HTML</a>
            <a href="#">CSS</a>
            <a href="#">JS</a>
        </div>
         <!-- ----------------------------------------------------------->
         <div class="wrap">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>    
        </div>
          <!-- ----------------------------------------------------------->
        <div class="wrap2">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>

    </div>
</template>
          
<script>
export default {
    name: "beforeAfter",
    props: {},
    data() {
        return {};
    },
};
</script>
            
<style scoped>
/* 消息通知 */
.notice {
    display: flex;
    align-items: center;
}

.notice::before {
    content: '';
    width: 4px;
    height: 20px;
    background: #409EFF;
    margin: 5px;
}

/* 聊天框 */
.chart-box {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
    margin-top: 10px;
}

.chart-div {
    display: inline-block;
    position: relative;
    border: 1px solid black;
    border-radius: 5px;
    background: rgba(245, 245, 245, 1);
    word-break: break-all;
    padding: 5px 10px;
    text-align: left;
    box-sizing: border-box;
}

.chart-div:before,
.chart-div:after {
    content: "";
    display: block;
    position: absolute;
    top: 8px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
}

.chart-div:before {
    left: -11px;
    border-right-color: #f5f5f5;
    z-index: 1
}

.chart-div:after {
    left: -12px;
    border-right-color: #000;
    z-index: 0
}

/* 元素 hover 特效 */
.hover-box {
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

.hover-box span {
    margin: 30px;
    position: relative;
    display: inline-block;
    color: #000;
    font-size: 32px;
}

.hover-box span:hover::before,
.hover-box span:hover::after {
    position: absolute;
}

.hover-box span:hover::before {
    content: "\5B";
    left: -20px;
    color: aqua;
}

.hover-box span:hover::after {
    content: "\5D";
    right: -20px;
    color: aqua;
}


/* 元素间隔效果 ,使用:not排除掉最后一个元素 */
.list{
    display: flex;
    justify-content: flex-start;
}
.list a {
    text-decoration: none;
    font-weight: bold;
    color: #000;
}

.list a:after {
    content: " /";
}

.list a:first-of-type::before {
    content: " » ";
}

.list a:last-of-type:after {
    content: "";
}

/* CSS justify-content布局让最后一行元素左对齐的两种实用方式  */

/* 使用CSS中after(伪元素)来实现最后一行的左对齐 */
.wrap {
    width: 200px;
    margin-top: 30px;
    border: 1px solid skyblue;
    display: flex;        
    flex-wrap: wrap;
    justify-content: space-around;
}
.wrap div {
    width: 30px;
    height: 30px;
    margin: 10px;
    background: #67C23A;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* 与flex: auto;等效都是自适应剩余空间*/
.wrap::after {
    content: "";
    display: block;
    flex: 1; 
}



/* 使用margin自适应的方法解决最后一行的左对齐 */

.wrap2 {
    width: 200px;
    border: 1px solid skyblue;
    display: flex;        
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 20px;
}
.wrap2 div {
    width: 30px;
    height: 30px;
    margin: 10px;
    background: skyblue;
}
.wrap2 div:last-child {
     /* 让最后一个元素的右边距自动适应，从而实现左对齐的效果。*/
    margin-right: auto; 
}
/* 给最后一个元素设置margin-right取值为auto，让该元素的右边距自适应剩余空间 */


</style>

在这里插入图片描述

小白_ysf

关注

21
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
伪类(:first-child、:focus、:hover、:last-child、:nth-child(n)、:nth-last-child(n)等)和伪元素(::after、::before等)

伪类(:first-child、:focus、:hover、:last-child、:nth-child(n)、:nth-last-child(n)等)和伪元素(::after、::before等)
复制链接

扫一扫