html&CSS-----高级选择器

前言

前面我们学习了CSS中的相关选择器（链接html&CSS-----CSS选择器（上）_灰勒塔德的博客-CSDN博客 html&CSS-----CSS选择器（下）_灰勒塔德的博客-CSDN博客）今天我们接着学习比较高级的选择器，下面就一起来去看看吧！

伪类选择器

当你希望元素在特定的状态下发生样式的变化时，可以使用伪类选择器。

状态类

写法	介绍	举例
:hover	鼠标悬停	a:hover{color:pink;}
:link	未被访问的链接（特指a标签）	a:link{color:red};
:visited	被访问过的链接（特指a标签）	a:visited{color:blue;}
:active	被点击按下状态	a:active{color:green;}

:hover :active 不仅仅能用在a标签上。

:hover最为常用最为重要。

可以进一步在伪类后进行选择，比如：#wrap:hover .nav{display:none;

写法	介绍	举例
:focus	获得焦点状态(接收键盘事件或其他用户输入的元素都允许 :focus 选择器。)	input:focus{border:1px solid blue;}
:checked	（单选/多选）表单被勾选状态	input:checked{background-color:#aaa;}

下面看个示例

html 复制代码

<!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>
        *{
            font-size: 30px;
        }
       .first ul li:hover{
            color: violet;
       }
       .second a:link{
        /* 这里可以改变未被访问时的a标签颜色（样式） */
            color: red;
       }
       .third{
            color: green;
       }
       .forth:active{
            color: blue;
       }
    </style>
</head>
<body>
    <!-- :hover选择器 -->
    <div class="first">
        <ul>
            <li>《Re:从零开始的异世界生活》</li>
            <li>《来着新世界》</li>
            <li>《紫罗兰永恒花园》</li>
        </ul>
    </div>
    <!-- :link选择器 -->
    <div class="second">
        <a href="www.baidu.com">访问百度</a>
    </div>
    <!-- :visited选择器 -->
    <div class="third">
        <a href="www.baidu.com" target="_blank">访问baidu</a>
    </div>
    <!-- :active选择器 -->
    <div class="forth">
        点我变颜色，看看吧
    </div>
</body>
</html>

效果如下：

1691821211078

结构类

写法	介绍	举例
E:nth-child(n)	这个表示选择列表中的倒数第n个标签	p:nth-child(2){color:red;}
E:nth-of-type(n)	E元素父级的第n个E元素，无视其他元素	p:nth-of-type(2){color:red;}
E:first-child	E元素父级的第一个子元素（该子元素需要满足E的选择规则，不满足则不会选中任何元素）	p:first-child{color:red;}
E:last-child	E元素父级的最后一个子元素（该子元素需要满足E的选择规则，不满足则不会选中任何元素）	p:last-child{color:red;}

上述选择器 n 所表示的可以是一个数字或者奇数odd 或者偶数even 或者一个表达式。

:nth-child(n) :nth-of-type(n)有对应的"倒着数"属性 :nth-last-child(n) :nth-last-of-type(n)。

下面看个示例：

html 复制代码

<!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>
        *{
            font-size: 30px;
        }
        ul li:first-child{
            color: red;
        }
        ul li:last-child{
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <div>start</div>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <!-- <div>end</div> -->
    </ul>
</body>
</html>

效果：这里要注意first-child和last-child这两个选择器的使用，因为这里作用的标签必须是父类元素的第一个或者最后一个，否则不起效果，如上所示。

伪元素选择器

伪类选择器相当于在某种情况下添加一个虚拟类名，而伪元素选择器则是相当于创建了一个虚拟元素。

写法	介绍	举例
E::before	相当于在E元素的最前面添加一个额外的子元素	#wrap::before{content:"Hello World!"}
E::after	相当于在E元素的最后面添加一个额外的子元素	#wrap::after{content:"Hello World!"}

必须拥有 content 样式，上述两个伪元素才会生效。

创建的子元素是一个行内元素。

::after常用来清除浮动。

content 除了写文字之外，还可以用url指定一张图片等其他写法。

css 复制代码

        /* 消除浮动自适应问题的写法 */
        E::after{
            content: '';
            display: block;
            clear: both; 
        }

属性选择器

这一类选择器跟正则匹配搭配使用，实际上并不是怎么用到，比较少用的那种，我们可以去选择性的去使用

|----------------|---------------------------|------------------------------------------------|
| $attr$ | 属性选择器（拥有attr标签属性） | $title$ { color:red; } |
| $attr=val$ | 属性选择器（拥有标签属性attr并值为val） | $target=_blank$ { color:red; } |
| $attr\*=val$ | 属性选择器（拥有标签属性attr并值包含val） | $src\*=baidu$ {border:5px solid pink;} |
| $attr$=val$ | 属性选择器（拥有标签属性attr并值以val结尾） | $src\~=jpg$ { border:5px solid pink; } |
| $attr\^=val$ | 属性选择器（拥有标签属性attr并值以val开头） | $class\^=nav$ { background:pink; } |
| 选择规则1选择规则2 | 复合选择器（多个规则来匹配元素） | div.nav.left{ width:100px; } 有nav和left类名的div标签 |

下面看个示例：

html 复制代码

<!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>
        *{
            font-size: 30px;
        }
        /* 这里匹配到的是含有o字母的选择器 */
        div[class*='o']{
            color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="hhh">哈喽哦</div>
    <div class="food">吃饭了吗</div>
    <div class="look">快看快看</div>
</body>
</html>

效果：

好了，以上就是今天的全部内容了，我们下一期再见！

分享一张壁纸：