伪类选择器和伪元素

最新推荐文章于 2022-06-13 21:00:32 发布

不爱编程的小方

最新推荐文章于 2022-06-13 21:00:32 发布

阅读量213

点赞数

分类专栏： 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

Element:first-child

概念：

选择第一个元素

兼容性：

IE8+，FireFox、Chrome、Safari、Opera

Element:last-child

概念：

选择最后一个元素

兼容性：

IE8+，FireFox、Chrome、Safari、Opera

Element:nth-child()

概念：

选择确切的位置上的元素，nth-child(1)等于first-child

兼容性：

IE9+，FireFox4+，Chrome，Safari，Opera

关于参数（n）

nth-child(n)选取每一行

n:所有的行

2n:每2行选择一行

3n:每3行选择一行

n+2:除第1行外所有的行

2n+4:从第4行开始隔1行选择1行

:nth-last-child(n) 从后向前选择,n为参数

n:所有行

2:倒数第2行

-n+3:最后3行

:only-child只有一个元素时使用

Element:nth-last-child(N)

概念：

匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数

兼容性：

IE9+，FireFox4+，Chrome，Safari，Opera

Element:nth-of-type(N)

概念：

:nth-of-type(N)选择匹配属于父元素的特定类型的第N个子元素的每个元素

兼容性：

IE9+，FireFox4+，Chrome，Safari，Opera

Element:nth-last-of-type(N)

概念：

匹配属于父元素的特定类型的第N个子元素的每个元素，从最后一个子元素开始计数

兼容性：

IE9+，FireFox4+，Chrome，Safari，Opera

Element:first-of-type

概念：

:first-of-type选择器匹配属于其父元素的特定的首个子元素的每个元素

兼容性：

IE9+，FireFox4+，Chrome，Safari，Opera

Element:last-of-type

概念：

:last-of-type选择器匹配属于其父元素的特定的首个子元素的每个元素

兼容性：

IE9+，FireFox4+，Chrome，Safari，Opera

Element:only-child

概念：

:only-child选择器匹配属于其父元素的唯一子元素的每个元素

兼容性：

IE9+，FireFox，Chrome，Safari，Opera

Element:only-of-type

概念：

:only-of-type选择器匹配属于其父元素的特定类型的唯一子元素的每个元素

兼容性：

IE9+，FireFox4+，Chrome，Safari，Opera

Element:empty

概念：

:empty选择器匹配没有子元素（包括文本节点）的每个元素

兼容性：

IE9+，FireFox，Chrome，Safari，Opera

伪元素

CSS伪元素用于向某些选择器设置特殊效果

语法格式：

元素::伪元素 (Element::pseudo-element)

兼容性：

IE9+，FireFox，Chrome，Safari，Opera

Element::first-line

概念：

根据“first-line”伪元素中的样式对Element元素的第一行文本进行格式化

说明：

“first-line”伪元素只能用于块级元素

Element::first-letter

概念：

用于向文本的首字母设置特殊样式

说明：

“first-letter”伪元素只能用于块级元素

Element::before

概念：

在元素的内容前面插入新的内容

说明：

常用“content”配合使用

Element::after

概念：

在元素的内容后面插入新内容

说明：

常用“content”配合使用，多用于清除浮动

Element::selection

概念：

用于设置在浏览器选中文本后的背景色和前景色

兼容性说明：

::selection在IE家族中，只有IE9+版本支持，在Firefox中需要加上其前缀“-moz”

伪类选择器和伪元素选择器的区别

css伪类：状态伪类基于元素当前状态进行选择的。结构伪类利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素。

css伪元素：对元素中的特定内容进行操作，而不是描述状态。

css3为了区分两者伪类使用单冒号，伪元素使用双冒号，但因为兼容问题现在大部分还是用单冒号。

不爱编程的小方

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
伪类选择器和伪元素

伪类选择器伪类选择器有以下6种：动态伪类：锚点伪类用户行为伪类目标伪类UI元素状态伪类否定伪类选择器语言伪类选择器CSS3结构伪类动态伪类这些伪类并不存在于HTML中，只有当用户和网站交互的时候才能体现出来锚点伪类 link visited hover active（一定要按照这个顺序写）用户行为伪类 hover active focus目标伪类用于命名锚记<!DOCTYPE html><html lang="en"&gt
复制链接

扫一扫

专栏目录