CSS基础之伪类和伪元素

就是小王同学啊

于 2023-04-14 17:59:20 发布

阅读量789

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/javaMr_wwq/article/details/130159325

版权

伪类

伪类是特殊的选择器，用于选择特定状态的元素。例如：鼠标悬停在元素上、第一个元素等。它表现的就像是向HTML元素添加了一个类一样。可以帮你减少在HTML中显示指定类，使代码更灵活，更好维护。

列表（部分）

位置相关

伪类	介绍
`:root`	匹配文档树根元素，对于HTML来说就是<html>，相比于html选择器它的优先级更高。
`:first-child`	表示一组兄弟元素的第一个元素。
`:first-of-type`	同一组类型元素的第一个
`:last-child`	表示一组兄弟元素的最后一个元素。
`:last-of-type`	同一组类型元素的最后一个
`:only-child`	匹配没有任何兄弟元素的元素。等效的选择器还可以写成 :first-child:last-child或者:nth-child(1):nth-last-child(1)，当然前者的权重会低一点。
`:only-of-type`	代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。
`:nth-child()`	首先找到所有当前元素的兄弟元素, 用 n 来筛选出在当前元素的兄弟元素节点的位置。
`:nth-last-child()`	与`:nth-child()`一样，只是它是从后往前计数。
`:nth-of-type()`	针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。
`:nth-last-of-type()`	与`nth-of-type`一样，只是它是从后往前计数。

表单相关

伪类	介绍
`:autofill`	当input元素值被浏览器自动填充时，会匹配，用户编辑字段，则停止匹配。
`:default`	匹配表单中默认选中的元素。
`:invalid`	验证失败的input、fieldset或其它form元素。
`:valid`	验证成功的input、fieldset或其它form元素。
`:disabled`	禁用的元素。
`:enabled`	启用的元素。
`:empty`	表示没有子元素的元素，子元素可以是元素、也可以是文本（包括空格）。注释、处理指令和CSS内容不会影响元素是否为空。
`:required`	设置了required属性的input、select、textarea元素。
`:optional`	表示没有required属性的<input>、<select> 或 <textarea>。
`:read-only`	用户不可编辑的元素（input或textarea）。
`:read-write`	用户可以编辑的元素（input或textarea）。
`:focus`	获得焦点的元素（如表单输入），当用户点击元素或通过键盘的tab键选择元素时会被触发。
`:focus-within`	表示一个元素获得焦点，或该元素的后代元素获得焦点。
`:in-range`	匹配当前值在min和max之间的input元素。
`:out-of-range`	匹配当前值在min和max之外的input元素。
`:indeterminate`	表示状态不确定的表单元素（例如值小于100的progress）。

链接相关

伪类	介绍
`:link`	匹配所有具有href属性的未被访问的元素，例如：a、area、link。
`:any-link`	匹配所有具有href属性的a、area、link元素。
`:visited`	被用户访问过的链接元素（具有href属性的a和area元素），出于隐私原因，使用该伪类修改的样式非常有限。`:vistited`放在`:link`之后`:hover`和`:active`之前。
`:hover`	被用户将光标悬停的元素，由`:hover`伪类定义的样式可以被其它链接相关的伪类（`:link`、`:vistited`、`:active`）覆盖。`:hover`规则放在`:link`和`:vistited`之后`:active`之前。
`:active`	被用户激活的元素，例如：当用户使用鼠标按下按钮开始。
`:target`	URL片段匹配的唯一页面元素。

打印相关

伪类	介绍
`:first`：	和`@page at-rule`一起使用，表示打印文档的第一页。
`:right`：	和`@page at-rule`一起使用，表示打印文档的所有右侧页面。
`:left`：	和`@page at-rule`一起使用，表示打印文档的所有左侧页面。

其它

伪类	介绍
`:is()`	匹配提供的选择器列表中任意一个的元素（用来替换`matches`）。
`:not()`	不匹配提供的选择器列表中任意一个的元素。
`:lang()`	匹配元素的`lang`属性。
`:where()`	它与`:is()`的区别是，不增加权重。
`:picture-in-picture`	匹配当前处于画中画模式的元素。

例子（部分）

示例-1（A元素样式）


/* 默认样式 */
:link{
    display: block;
    padding: 0px 30px 0px 30px;
    border: 1px red solid;
    width: 50px;
    color: red;
    text-decoration:blink;
}

/* 访问过 */
:visited{
    display: block;
    padding: 0px 30px 0px 30px;
    border: 1px red solid;
    width: 50px;
    color: gainsboro;
    text-decoration:blink;
}

/* 鼠标悬停 */
:hover{
    color: yellow;
}

/* 鼠标按下 */
:active{
    color: yellowgreen;
}

<!doctype html>
<html lang="en-US" prefix="og: https://ogp.me/ns#">
    <head>
        <meta charset="ASCII"/>
        <meta property="og:locale" content="zh-CN"/>
        <title>CSS基础语法</title>
        <link rel="stylesheet" href="伪元素A元素.css">
        <style></style>
    </head>
    <body>
        <div>
            <a href="https://www.baidu.com?a=1">百度</a>
        </div>
    </body>
</html>

示例-2（表单校验）

/* 邮箱校验 */
input[type=email]:valid{
    border: solid 1px yellowgreen;
}
input[type=email]:invalid{
    border: solid 2px red;
}
input[type=email]:focus{
    outline: solid 1px yellow;
}

/* 数值校验 */
input[type=number]:in-range{
    border: solid 1px yellowgreen;
}
input[type=number]:out-of-range{
    border: solid 2px red;
}
input[type=number]:focus{
    outline: solid 1px yellow;
}

<!doctype html>
<html lang="en-US" prefix="og: https://ogp.me/ns#">
    <head>
        <meta charset="ASCII"/>
        <meta property="og:locale" content="zh-CN"/>
        <title>CSS基础语法</title>
        <link rel="stylesheet" href="表单校验.css">
        <style></style>
    </head>
    <body>
        <form>
            <input type="email" />
            <input type="number" min="60" max="80">
        </form>
    </body>
</html>

示例-3（第一个段落）

@charset "utf-8";

/* 伪类：匹配article下的第一个p子元素 */
article p:first-child {
    font-size: 120%;
    font-weight: bold;
}

<html lang="en-US" prefix="og: https://ogp.me/ns#">
    <head>
        <meta charset="ASCII"/>
        <meta property="og:locale" content="zh-CN"/>
        <title>CSS基础语法</title>
        <link rel="stylesheet" href="CSS语法2.css">
        <style></style>
    </head>
    <body>
        <article>
            <!-- <p>滕王阁序</p> -->
            <p> 豫章故郡，洪都新府。
                星分翼轸，地接衡庐。
                襟三江而带五湖，控蛮荆而引瓯越。
                物华天宝，龙光射牛斗之墟；
                人杰地灵，徐孺下陈蕃之榻。
                雄州雾列，俊采星驰。
                台隍枕夷夏之交，宾主尽东南之美。
                都督阎公之雅望，棨戟遥临；
                宇文新州之懿范，襜帷暂驻。
                十旬休假，胜友如云；
                千里逢迎，高朋满座。
                腾蛟起凤，孟学士之词宗；
                紫电青霜，王将军之武库。
                家君作宰，路出名区；
                童子何知，躬逢胜饯。
            </p>
            <p> 时维九月，序属三秋。
                潦水尽而寒潭清，烟光凝而暮山紫。
                俨骖騑于上路，访风景于崇阿。
                临帝子之长洲，得天人之旧馆。
                层峦耸翠，上出重霄；
                飞阁流丹，下临无地。
                鹤汀凫渚，穷岛屿之萦回；
                桂殿兰宫，即冈峦之体势。
            </p>
        </article>
    </body>
</html>

伪元素

伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的 HTML 元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号::。

列表（部分）

伪类	介绍
::after	用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合`content`属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。
::before	用来创建一个伪元素，作为已选中元素的第一个子元素。通常会配合`content`属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。
::file-selector-button	代表 `type="file"`的按钮。
::first-letter	代表块级元素第一行的第一个字母，并且文字所处的行之前没有其他内容（如图片和内联的表格）。
::first-line	代表块级元素的第一行。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的字体大小。
::marker	代表列表的标记框，它作用在设置了`display: list-item`的元素和伪元素上，例如`li`和`summary`。
::selection	代表获得焦点的元素，例如通过鼠标或tab选中的元素。

列子（部分）

示例-4（列表）

li::marker{
    content: '★ ';
    font-size: 1.2em;
}

<html lang="en-US" prefix="og: https://ogp.me/ns#">
    <head>
        <meta charset="ASCII"/>
        <meta property="og:locale" content="zh-CN"/>
        <title>CSS基础语法</title>
        <link rel="stylesheet" href="标记框.css">
        <style></style>
    </head>
    <body>
      <ul>
        <li>李白</li>
        <li>辛弃疾</li>
        <li>李清照</li>
        <li>苏轼</li>
        <li>范仲淹</li>
        <li>王安石</li>
        <li>司马光</li>
      </ul>
    </body>
</html>

示例-5（首行）

/* 首字 */
p::first-line{
    color: gold;
}
/* 首行 */
p::first-letter{
    color: yellowgreen;
    font-size: 1.2em;
}

<html lang="en-US" prefix="og: https://ogp.me/ns#">
    <head>
        <meta charset="ASCII"/>
        <meta property="og:locale" content="zh-CN"/>
        <title>CSS基础语法</title>
        <link rel="stylesheet" href="首行.css">
        <style></style>
    </head>
    <body>
      <p>豫章故郡，洪都新府。
        星分翼轸，地接衡庐。
        襟三江而带五湖，控蛮荆而引瓯越。
        物华天宝，龙光射牛斗之墟；
        人杰地灵，徐孺下陈蕃之榻。
        雄州雾列，俊采星驰。
        台隍枕夷夏之交，宾主尽东南之美。
        都督阎公之雅望，棨戟遥临；
        宇文新州之懿范，襜帷暂驻。
        十旬休假，胜友如云；
        千里逢迎，高朋满座。
        腾蛟起凤，孟学士之词宗；
        紫电青霜，王将军之武库。
        家君作宰，路出名区；
        童子何知，躬逢胜饯。</p>
    </body>
</html>

示例-5（按钮角标）

button {
    border: 1px yellowgreen solid;
    padding: 0px 0px 0px 0px;
    width: 100px;
    height: 30px;
}
button > span{
    margin:0px 0px 0px 0px;
}
button::before {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px yellowgreen solid;
    content: "";
    border-radius:50%;
    position: relative;
    top: 3px;
    left: -9px;
}

button::after {
    display: inline-block;
    width: 5px;
    height: 5px;
    border: 2px navajowhite solid;
    background-color: navajowhite;
    content: "";
    border-radius:50%;
    position: relative;
    top: -2px;
    left: -49px;
}

<!doctype html>
<html lang="en-US" prefix="og: https://ogp.me/ns#">
    <head>
        <meta charset="ASCII"/>
        <meta property="og:locale" content="zh-CN"/>
        <title>CSS基础语法</title>
        <link rel="stylesheet" href="第一个子元素.css">
        <style></style>
    </head>
    <body>
      <button><span>保存</span></button>
    </body>
</html>

结合使用

示例6（第一段落的第一行）

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

<html lang="en-US" prefix="og: https://ogp.me/ns#">
    <head>
        <meta charset="ASCII"/>
        <meta property="og:locale" content="zh-CN"/>
        <title>CSS基础语法</title>
        <link rel="stylesheet" href="结合使用.css">
        <style></style>
    </head>
    <body>
        <article>
            <!-- <p>滕王阁序</p> -->
            <p> 豫章故郡，洪都新府。
                星分翼轸，地接衡庐。
                襟三江而带五湖，控蛮荆而引瓯越。
                物华天宝，龙光射牛斗之墟；
                人杰地灵，徐孺下陈蕃之榻。
                雄州雾列，俊采星驰。
                台隍枕夷夏之交，宾主尽东南之美。
                都督阎公之雅望，棨戟遥临；
                宇文新州之懿范，襜帷暂驻。
                十旬休假，胜友如云；
                千里逢迎，高朋满座。
                腾蛟起凤，孟学士之词宗；
                紫电青霜，王将军之武库。
                家君作宰，路出名区；
                童子何知，躬逢胜饯。
            </p>
            <p> 时维九月，序属三秋。
                潦水尽而寒潭清，烟光凝而暮山紫。
                俨骖騑于上路，访风景于崇阿。
                临帝子之长洲，得天人之旧馆。
                层峦耸翠，上出重霄；
                飞阁流丹，下临无地。
                鹤汀凫渚，穷岛屿之萦回；
                桂殿兰宫，即冈峦之体势。
            </p>
        </article>
    </body>
</html>