伪类选择器和伪元素

最新推荐文章于 2022-11-21 20:29:26 发布

不爱编程的小方

最新推荐文章于 2022-11-21 20:29:26 发布

阅读量215

点赞数

分类专栏： html&css 文章标签： css

本文链接：https://blog.csdn.net/qq_38053677/article/details/107088580

版权

html&css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

伪类选择器

伪类选择器有以下6种：

动态伪类：
- 锚点伪类
- 用户行为伪类
目标伪类
UI元素状态伪类
否定伪类选择器
语言伪类选择器
CSS3结构伪类

动态伪类

这些伪类并不存在于HTML中，只有当用户和网站交互的时候才能体现出来

锚点伪类 link visited hover active（一定要按照这个顺序写）

用户行为伪类 hover active focus

目标伪类

用于命名锚记

<!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>
        div{
            height: 600px;
            font-size: 100px;
            text-align: center;
            line-height: 600px;
        }
        /* 目标添加效果 */
        div:target{
            background: yellowgreen;
            color: yellow;
        }
    </style>
</head>
<body>
    <p>
        <a href="#box1">1</a>
        <a href="#box2">2</a>
        <a href="#box3">3</a>
        <a href="#box4">4</a>
        <a href="#box5">5</a>
    </p>
    <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="box3">3</div>
    <div id="box4">4</div>
    <div id="box5">5</div>
</body>
</html>

UI元素状态伪类

概念：

我们把“:enabled”，“:disable”，“:checked”，“:seclect"伪类称为UI元素状态伪类

兼容性：

IE9+，FireFox、Chrome、Safari、Opera

否定选择器（:not）

概念：

:not(Element/selector) 选中除了括号里的其它元素

兼容性：

IE9+，FireFox，Chrome，Safari，Opera

举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>not</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	border: none;
}
a {
	text-decoration: none;
	color: #333;
	font-size: 14px;
	display: block;
	float: left;
	width: 100px;
	height: 30px;
}
nav {
	width: 800px;
	margin: 0 auto;
}
nav > a:not(:last-of-type) { /*除了最后一个a没有被选中，nav下的所有a都被选中*/ 
	border-right: 1px solid red;
}
</style>
</head>
<body>
<nav>
	<a href="#">first</a>
	<a href="#">second</a>
	<a href="#">third</a>
	<a href="#">fourth</a>
	<a href="#">fifth</a> <!-- 最后一个没有右边框效果 -->
</nav>
</body>
</html>

语言伪类选择器

用来匹配使用指定语言的元素

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       p:lang(zh-cn){
           background-color: red;
       }
    </style>
</head>
<body>
    <p lang="en"><q>Quote in English</q></p>
    <p lang="zh-cn"><q>中文的引号</q></p>
</body>
</html>

CSS3结构伪类

CSS3的:nth选择器

我们把CSS3的:nth选择器也称为CSS3结构类

选择方法：
:first-child，:last-child，:nth-child()，:nth-last-chld，nth-of-type()，:nth-last-of-type()，:first-of-type()，:last-of-type，:only-child，:only-of-type，:empty