css伪元素和伪类的区别

2023-02-19 12:00:02html-css011

css伪元素和伪类的区别,第1张

伪类和伪元素的区别，其实很简单，从字面上就可以理解。它们有一个共同的修饰词“伪”，那么“伪”是什么意思呢?就是假的。所以，伪类就是假的类，伪元素就是假的元素，这就是在字面上它们之间的区别。

定义

伪类：

CSS3给出的定义是：

The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.

大致翻译过来的意思就是：伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。

通过上面的概念我们知道了伪类的功能有两种：

1.格式化DOM树以外的信息。比如：标签的:link、:visited 等。这些信息不存在于DOM树中。

2.不能被常规CSS选择器获取到的信息。比如：要获取第一个子元素，我们无法用常规的CSS选择器获取，但可以通过 :first-child 来获取到。

伪元素：

CSS3给出的定义如下：

Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element's content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document (e.g., the ::before and ::after pseudo-elements give access to generated content).

大致翻译过来的意思就是：伪元素可以创建一些文档语言无法创建的虚拟元素。比如：文档语言没有一种机制可以描述元素内容的第一个字母或第一行，但伪元素可以做到(::first-letter、::first-line)。同时，伪元素还可以创建源文档不存在的内容，比如使用 ::before 或 ::after。

伪类和伪元素的区别(CSS3下的区别)

通过上面的概念，我们就可以知道伪类与伪元素最本质的一个区别：

1、伪类其实是弥补了CSS选择器的不足，用来更方便地获取信息。

HTML:

CSS:

浏览器：

查看元素面板：

2、而伪元素本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式。

HTML:

CSS:

浏览器：

查看元素面板：

所以，你可以理解伪元素本质上是创建了一个虚拟容器(元素)了吧。

除了上面这个本质区别以外，在CSS3中：

3.伪类用单冒号:表示而伪元素用双冒号::表示。

4.一个选择器可以同时使用多个伪类(但有的伪类会互斥)而一个选择器只能同时使用一个伪元素(未来的版本可能会支持多伪元素)。

关于CSS的更多详解，可以下看这个详细直观的视频教程，网页链接

希望我的回答能帮到你

伪类用于向某些选择器添加特殊的效果。

伪元素用于将特殊的效果添加到某些选择器。

伪类有：:first-child ，:link:，vistited，:hover，:active，:focus，:lang

伪元素有：:first-line，:first-letter，:before，:after

使用伪类：

<style>

p>i:first-child {color: red}

</style>

<p>

<i>first</i>

<i>second</i>

</p>

如果我们不使用伪类，而希望达到上述效果，可以这样做：

不使用伪类：

<style>

.first-child {color: red}

</style>

<p>

<i class="first-child">first</i>

<i>second</i>

</p>

即我们给第一个子元素添加一个类，然后定义这个类的样式。

使用为元素：

<style>

p:first-letter {color: red}

</style>

<p>I am stephen lee.</p>

那么如果我们不使用伪元素，要达到上述效果，应该怎么做呢？

不使用为元素：

<style>

.first-letter {color: red}

</style>

<p><span class='first-letter'>I</span> am stephen lee.</p>

即我们给第一个字母添加一个 span，然后给 span 增加样式。

两者的区别已经出来了。那就是：

伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。

伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

:Pseudo-classes //伪类

::Pseudo-elements //伪元素

但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。

望采纳！

伪类选择器分为结构性、子元素、 UI、动态和其它伪类选择器

备注：为了更好的区分伪类和伪元素，书写上CSS做了区分。例如，伪类 :first-child；伪元素

在下面的示例中：

div >p:only-child{

color:red//不变红

}

div >p:only-of-type{

color:red//变红

}

<div>

</div>

ul >li:nth-child(2){

color:red //选择该元素所有子元素的第二个子元素

}

ul >li:nth-last-child(2){

color:red //选择该元素所有子元素的倒数第二个子元素

}

ul >li:nth-of-type(2){

color:red //选择该元素所有该类型子元素的第二个子元素

}

ul >li:nth-last-of-type(2){

color:red //选择该元素所有该类型子元素的倒数第二个子元素

}

:target{

color:red //定位到锚点，选择此元素

}

//锚点的定位：

首先在HTML元素中定义一个ID属性值，例如<p id="test">asd</p>

然后在浏览器地址栏，在URL最后加上#test，便可以定位到该锚点了。

锚点的使用：

可以用来将一篇很长的文章分段，

eg.<a href="#02">跳转到</a>

其实锚点只需name就可以可，加id是为了让它兼容性更好

所谓UI选择器：就是指定的样式只有当元素处于某种状态下时，才起作用，在默认状态下不起作用！

浏览器兼容性：

E:hover 支持firefox、safari、Opera、ie8、chrome------------

E:active 支持firefox、safari、Opera、chrome 不支持ie8

E:focus 支持firefox、safari、Opera、ie8、chrome-------------

E:enabled 支持firefox、safari、Opera、chrome不支持ie8

E:disabled支持firefox、safari、Opera、chrome不支持ie8

E:read-only 支持firefox、Opera 不支持ie8、safari、chrome

E:read-write 支持firefox、Opera 不支持ie8、safari、chrome

E:checked 支持firefox、safari、Opera、chrome不支持ie8

E::selection 支持firefox、safari、Opera、chrome 不支持ie8

E:default 只支持firefox ------------

E:indeterminate只支持chrome ------------

E:invalid 支持firefox、safari、Opera、chrome 不支持ie8

E:valid 支持firefox、safari、Opera、chrome 不支持ie8

E:required支持firefox、safari、Opera、chrome 不支持ie8

E:optional 支持firefox、safari、Opera、chrome 不支持ie8

E:in-range支持firefox、safari、Opera、chrome 不支持ie8

E:out-of-rang支持firefox、safari、Opera、chrome 不支持ie8

下面就其使用做详细的说明

1、选择器E:hover、E:active和E:focus

1)、E:hover选择器被用来指定当鼠标指针移动到元素上时元素所使用的样式

使用方法：

<元素>:hover{

CSS样式

}

我们可以在“<元素>”中添加元素的type属性。

例：

input[type="text"]:hover{

CSS样式

}

2)、E:active选择器被用来指定元素被激活时使用的样式

3)、E:focus选择器被用来指定元素获得光标聚焦点使用的样式，主要是在文本框控件获得聚焦点并进行文字输入时使用。

例如：

[html] view plain copy

<!DOCTYPE html>

<html>

<title>选择器E:hover、E:active和E:focus</title>

<style>

input[type="text"]:hover{

background: green

}

input[type="text"]:focus{

background: #ff6600

color: #fff

}

input[type="text"]:active{

background: blue

}

input[type="password"]:hover{

background: red

}

</style>

</head>

<body>

<h1>选择器E:hover、E:active和E:focus</h1>

<form>

姓名：<input type="text" placeholder="请输入姓名">

<br/>

密码：<input type="password" placeholder="请输入密码">

</form>

</body>

</html>

2、E:enabled伪类选择器与E:disabled伪类选择器

1)、E:enabled选择器被用来指定当元素处于可用状态时的样式。

2)、E:disabled选择器被用来指定当元素处于不可用状态时的样式。

例如：

[html] view plain copy

<!DOCTYPE html>

<html>

<title>E:enabled伪类选择器与E:disabled伪类选择器</title>

<style>

input[type="text"]:enabled{

background: green

color: #ffffff

}

input[type="text"]:disabled{

background: #727272

}

</style>

</head>

<body>

<h1>E:enabled伪类选择器与E:disabled伪类选择器</h1>

<form>

姓名：<input type="text" placeholder="请输入姓名" disabled>

<br/>

学校：<input type="text" placeholder="请输入学校">

</form>

</body>

</html>

3、E:read-only伪类选择器与E:read-write伪类选择器

1)、E:read-only选择器被用来指定当元素处于只读状态时的样式。

2)、E:read-write选择器被用来指定当元素处于非只读状态时的样式。

[html] view plain copy

<!DOCTYPE html>

<html>

<title>read-only伪类选择器与E:read-write伪类选择器</title>

<style>

input[type="text"]:read-only{

background: #000

color: green

}

input[type="text"]:read-write{

color: #ff6600

}

</style>

</head>

<body>

<h1>read-only伪类选择器与E:read-write伪类选择器</h1>

<form>

姓名：<input type="text" placeholder="请输入姓名" value="winson" readonly>

<br/>

学校：<input type="text" placeholder="请输入学校">

</form>

</body>

</html>

4、伪类选择器E:checked、E:default和indeterminate

1)、E:cehcked伪类选择器用来指定当表单中的radio单选框或者是checkbox复选框处于选取状态时的样式。

2)、E:default选择器用来指定当页面打开时默认处于选取状态的单选框或复选框的控件的样式。

3)、E:indeterminate选择器用来指定当页面打开时，一组单选框中没有任何一个单选框被设定为选中状态时，整组单选框的样式。

[html] view plain copy

<!DOCTYPE html>

<html>

<title>checked伪类选择器</title>

<style>

input[type="checkbox"]:checked{

outline: 2px solid green

}

</style>

</head>

<body>

<h1>checked伪类选择器</h1>

<form>

房屋状态：

<input type="checkbox">水

<input type="checkbox">电

<input type="checkbox">天然气

<input type="checkbox">宽带

</form>

</body>

</html>

默认的选择项

[html] view plain copy

<!DOCTYPE html>

<html>

<title>default伪类选择器</title>

<style>

input[type="checkbox"]:default{

outline: 2px solid green

}

</style>

</head>

<body>

<h1>default伪类选择器</h1>

<form>

房屋状态：

<input type="checkbox" checked>水

<input type="checkbox">电

<input type="checkbox">天然气

<input type="checkbox">宽带

</form>

</body>

</html>

[html] view plain copy

<h1 style="color: rgb(0, 0, 0)font-family: Simsunfont-style: normalfont-variant: normalletter-spacing: normalline-height: normalorphans: autotext-align: starttext-indent: 0pxtext-transform: nonewhite-space: normalwidows: 1word-spacing: 0px-webkit-text-stroke-width: 0px">indeterminate伪类选择器</h1><!DOCTYPE html>

<html>

<title>indeterminate伪类选择器</title>

<style>

input[type="radio"]:indeterminate{

outline: 2px solid green

}

</style>

</head>

<body>

<h1>indeterminate伪类选择器</h1>

<form>

性别：

<input type="radio">男

<input type="radio">女

</form>

</body>

</html>

5、伪类选择器E::selection

1)、E:selection伪类选择器用来指定当元素处于选中状态时的样式。

例如

[html] view plain copy

<!DOCTYPE html>

<html>

<title>伪类选择器E::selection</title>

<style>

::selection{

background: green

color: #ffffff

}

input[type="text"]::selection{

background: #ff6600

color: #ffffff

}

</style>

</head>

<body>

<h1>伪类选择器E::selection</h1>

<p>今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！</p>

</body>

</html>

6、E:invalid伪类选择器与E:valid伪类选择器

1)、E:invalid伪类选择器用来指定，当元素内容不能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容不符合元素规定的格式时的样式。

2)、E:valid伪类选择器用来指定，当元素内容能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容符合元素规定的格式时的样式。

例如

[html] view plain copy

<!DOCTYPE html>

<html>

<title>E:invalid伪类选择器与E:valid伪类选择器</title>

<style>

input[type="email"]:invalid{

color: red

}

input[type="email"]:valid{

color: green

}

</style>

</head>

<body>

<h1>E:invalid伪类选择器与E:valid伪类选择器</h1>

<form>

</form>

</body>

</html>

7、E:required伪类选择器与E:optional伪类选择器

1)、E:required伪类选择器用来指定允许使用required属性，而且已经指定了required属性的input元素、select元素以及textarea元素的样式。

2)、E:optional伪类选择器用来指定允许使用required属性，而且未指定了required属性的input元素、select元素以及textarea元素的样式。

[html] view plain copy

<!DOCTYPE html>

<html>

<title>E:required伪类选择器与E:optional伪类选择器</title>

<style>

input[type="text"]:required{

background: red

color: #ffffff

}

input[type="text"]:optional{

background: green

color: #ffffff

}

</style>

</head>

<body>

<h1>E:required伪类选择器与E:optional伪类选择器</h1>

<form>

姓名：<input type="text" placeholder="请输入姓名" required>

<br/>

学校：<input type="text" placeholder="请输入学校">

</form>

</body>

</html>

8、E:in-range伪类选择器与E:out-of-range伪类选择器

1)、E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，且实际的输入值在该范围之内时的样式。

2)、E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，但实际输入值在超过时使用的样式。

例如

[html] view plain copy

<!DOCTYPE html>

<html>

<title>E:in-range伪类选择器与E:out-of-range伪类选择器</title>

<style>

input[type="number"]:in-range{

color: #ffffff

background: green

}

input[type="number"]:out-of-range{

background: red

color: #ffffff

}

</style>

</head>

<body>

<h1>E:in-range伪类选择器与E:out-of-range伪类选择器</h1>

</body>

</html>

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：wps表格怎么搜索

# 下一篇：组装电脑什么配件最重要？

推荐阅读

热门文章

最新发布

标签列表

css伪元素和伪类的区别

给您推荐相同类型的内容：