属性选择器、伪类选择器、伪类选择器在超链接中的应用&伪元素

最新推荐文章于 2021-12-30 09:54:55 发布

尐╋猪

最新推荐文章于 2021-12-30 09:54:55 发布

阅读量513

点赞数 4

分类专栏：前端文章标签： css html js html5 web

本文链接：https://blog.csdn.net/qq_45623543/article/details/109151747

版权

前端专栏收录该内容

18 篇文章 4 订阅

订阅专栏

《个人学习笔记十二》

属性选择器

[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值中含有某值的元素的元素
示范代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p[title] {
            background-color: aquamarine;
        }
        
        p[title=abc] {
            font-size: 150%
        }
        
        p[title^=abc] {
            color: red
        }
        
        p[title$=xyz] {
            color: blue
        }
        
        p[title*=nml] {
            color: blueviolet
        }
    </style>
</head>

<body>
    <p title="abc">静夜思</p>
    <p title="abcdef">李白</p>
    <p title="worldxyz">床前明月光</p>
    <p title="helloxyz">疑是地上霜</p>
    <p title="nmldrui">举头望明月</p>
    <p title="abjinml">低头思故乡</p>
    <p title="abjinmldjeg">低头思故乡</p>
</body>

</html>

显示结果：
在这里插入图片描述

伪类选择器：

伪类：不存在的类，特殊的类
伪类用来描述一个元素的特殊状态
比如：第一个子元素、被惦记的元素、鼠标移入的元素等
伪类一般情况下都是使用:开头

:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child 选中第n个子元素
特殊值：
n 第n个 n的范围到正无穷
2n或even 表示选中偶数位的元素
2n+1或odd 表示选中奇数位的元素
示范代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul>li:first-child {
            color: yellowgreen
        }
        
        ul>li:last-child {
            color: red;
        }
        
        ul>li:nth-child(3) {
            color: blueviolet;
        }
        
        ul>li:nth-child(4) {
            color: blue;
        }
        
        ul>li:nth-child(2) {
            color: pink;
        }
        
        ul>li:nth-child(even) {
            font-size: 150%;
        }
        
        ul>li:nth-child(odd) {
            font-size: 200%;
        }
    </style>
</head>

<body>
    <ul>
        <li>第〇个</li>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
    </ul>
</body>

</html>

显示结果：
在这里插入图片描述
注意：：first-child{} 只会死板的指向该元素的第一个子元素，在日常中不常用。所以出现了后面出现了另一个标签 :first-of-type{}。
:first-of-type{} 指向指定元素中相同子元素数目最多的子元素的第一个
:not(){} 将符合条件的元素从浏览器中去除
示范代码;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul>li:first-of-type {
            color: red;
        }
        
        ul>li:not(:nth-last-of-type(5)) {
            color: blue;
        }
        
        ul>li:not(:nth-of-type(2)) {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <ul>
        <span>这是一个span</span>
        <li>第〇个</li>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
    </ul>
</body>

</html>

显示结果：
在这里插入图片描述

伪类选择器在超链接中的应用：

:link{} 用来表示没访问过的链接（正常的链接）
:visited{} 用来表示访问过的链接
由于隐私的原因，所以visited这个伪类只能修改连接的颜色
:hover{} 用来表示鼠标移入的状态
:active{} 用来表示鼠标的点击
参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:link {
            color: skyblue;
            font-size: 150%;
        }
        
        a:visited {
            color: red
        }
        
        a:active {
            color: yellowgreen
        }
        
        a:hover {
            color: blue;
            font-size: 50%;
        }
    </style>
</head>

<body><a href="http://www.sina.com.cn">搜狐</a><br>
    <a href="http://www.baidu.com">百度一下</a><br>
<a href="http://www.sougou.com">某网站</a>
</body>
</html>

显示结果：

注意：把鼠标移到前两个超链接，前两个超链接标题文本会变小，显示蓝色。
点击任一个超链接标题文本，文本会变成黄绿色。

伪元素：

伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
伪元素使用::开头

::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始
::after 元素的结尾
before和after必须结合content属性来使用
示范代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p::first-letter {
            color: darkgray;
            font-size: 50px
        }
        
        p::first-line {
            color: rgb(196, 44, 57);
        }
        
        p::selection {
            background-color: yellowgreen;
        }
        
        span::before {
            content: "『";
            color: blue;
        }
        
        span::after {
            content: "』";
            background-color: darkmagenta;
        }
    </style>
</head>

<body>
    <span>中国万岁</span>
    <p>LastEditorsttyyfufujdhdddddddddddddddddddddd ddddddddddddddddddddddddddddddddddddd ddddddddddddddddddddd </p>
</body>

</html>

</html>