关于CSS中的伪类和伪元素之间有什么区别？和css伪类与伪元素的区别的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于CSS中的伪类和伪元素、CSS属性-伪类和伪元素的区别、CSS的伪类和伪

关于CSS中的伪类和伪元素之间有什么区别？和css伪类与伪元素的区别的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于CSS 中的伪类和伪元素、CSS 属性 - 伪类和伪元素的区别、CSS 的伪类和伪元素、css 选择器，伪类和伪元素的区别等相关知识的信息别忘了在本站进行查找喔。

• CSS中的伪类和伪元素之间有什么区别？（css伪类与伪元素的区别）
• CSS 中的伪类和伪元素
• CSS 属性 - 伪类和伪元素的区别
• CSS 的伪类和伪元素
• css 选择器，伪类和伪元素的区别

CSS中的伪类和伪元素之间有什么区别？（css伪类与伪元素的区别）

table tr:nth-child(2n) td{
   background-color: #ccc;
}

table tr:nth-child(2n+1) td{
   background-color: #fff;
}

table tr:nth-child(2n+1):nth-child(5n) td{
   background-color: #f0f;
}

q:lang(de)::after{
    content: " (German) ";
}

q:lang(en)::after{
    content: " (English) ";
}

q:lang(fr)::after{
    content: " (french) ";
}

q:not(:lang(fr)):not(:lang(de)):not(:lang(en))::after{
    content: " (Unrecognized language) ";
}

CSS 中的伪类和伪元素

伪类

伪类与类相似，但又没有类附加标签上。伪类分为 UI 伪类和结构化伪类。

UI 伪类

• :link (将样式添加到未被访问的链接上)

• :visted(将样式已添加到访问的链接上)

• :hover(将样式添加到鼠标悬浮的元素上)

• :active(将样式添加到被激活的元素上)

• :focus(将样式添加到被选中的元素上)

结构化伪类

• :first-child(将样式添加到第一个子元素上)

• :last-child(将样式添加到最后一个子元素上)

  伪元素
  

• 伪元素是在文档中若有实无的元素。

• 主要有以下几种
  

• :first-letter(将样式添加到第一个字母)

• :first-line(将样式添加到第一行)

• :before(在某些元素前面插入某些内容)

• :after(在某些元素后面插入某些内容)

• 看到:after，大家脑子里应该都能浮现出那个清除浮动的 CSS 的吧。没错，就是这个。

• .clearfix:after {
      content:".";
      display:block;
      height:0;
      visibility:hidden;
      clear:both;
  }

区别

仔细琢磨下它们的定义。

伪类的实现就好比给这个标签添加了一个虚拟的类。

举个例子：

.hover{
    font-size:20px;
    color:red
}
<a href="#" class="hover">Hello,World</a>

这么一对比，” 伪类 “就顾名思义了啊。

而伪元素则好比添加了一个新的标签。

p:first-letter{
    font-size:20px;
    color:red
}
<p>Hello,World</p>

若不用伪元素，实现同样的效果，需要这么做

.first-letter{
    font-size:20px;
    color:red
}
<p><span class="first-letter">Hello,World</span></p>

因此总结下区分的方法：现实相同效果是需要添加一个类还是一个元素标签。

tips:

1.CSS3 为了区别伪类和伪元素，明确使用单冒号来表示伪类，双冒号来表示伪元素。但为兼容性考虑，目前基本还是使用单冒号来表示。

2. 搜索引擎不会搜索伪元素的信息。因此，不要通过伪元素添加你想让搜索引擎索引的重要内容

CSS 属性 - 伪类和伪元素的区别

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

  :Pseudo-classes
  ::Pseudo-elements
  

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

• 区别

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

• 伪类种类

• 

   

• 伪元素种类

• 

  对比

  这里用伪类 :first-child 和伪元素 :first-letter 来进行比较。

• p>i:first-child {color: red}
  <p>
      <i>first</i>
      <i>second</i> </p> 

   //伪类 :first-child 添加样式到第一个子元素
  如果我们不使用伪类，而希望达到上述效果，可以这样做：

  .first-child {color: red}
  <p> <i class="first-child">first</i> <i>second</i> </p> 

  即我们给第一个子元素添加一个类，然后定义这个类的样式。那么我们接着看看为元素：

   

  p:first-letter {color: red}
  <p>I am stephen lee.</p>

•  //伪元素 :first-letter 添加样式到第一个字母
  那么如果我们不使用伪元素，要达到上述效果，应该怎么做呢？

  .first-letter {color: red}
  <p><span class=''first-letter''>I</span> am stephen lee.</p> 

  即我们给第一个字母添加一个 span，然后给 span 增加样式。
  两者的区别已经出来了。那就是：

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

CSS 的伪类和伪元素

定义

伪类: CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。 例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

/* 所有用户指针悬停的按钮 */
button:hover {
  color: blue;
}

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

伪元素: 伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。 下例中的 ::first-line 伪元素可改变段落首行文字的样式。

/* 每一个 <p> 元素的第一行。 */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

伪类连同伪元素一起，他们允许你不仅仅是根据文档 DOM 树中的内容对元素应用样式，而且还允许你根据诸如像导航历史这样的外部因素来应用样式（例如 :visited），同样的，可以根据内容的状态（例如在一些表单元素上的 :checked），或者鼠标的位置（例如 :hover 让你知道是否鼠标在一个元素上悬浮）来应用样式。

分类：

伪类：

• :active，将样式添加到被激活的元素。
• :focus，将样式添加到被选中的元素。
• :hover，当鼠标悬浮在元素上方是，向元素添加样式。
• :link，将特殊的样式添加到未被访问过的链接。
• :visited，将特殊的样式添加到被访问的链接。
• :first-child，将特殊的样式添加到元素的第一个子元素。
• :lang，允许创作者来定义指定的元素中使用的语言。

伪元素：

• :first-letter，将特殊的样式添加到文本的首字母。
• :first-line，将特殊的样式添加到文本的首行。
• :before，在某元素之前插入某些内容。
• :after，在某元素之后插入某些内容。

区别：

下面是一个简单的 html 列表片段：

<ul>
    <li>我是第一列</li>
    <li>我是第二列</li>
</ul>

如果想要给第一项添加样式，可以在为第一个添加一个类，并在该类中定义对应样式：

<ul>
    <li class="first-item">我是第一列</li>
    <li>我是第二列</li>
</ul>

li.first-item {
    color: orange
}

如果不用添加类的方法，我们可以通过给设置第一个的:first-child 伪类来为其添加样式。这个时候，被修饰的元素依然处于文档树中。

li:first-child {
    color: orange
}

下面是另一个简单的 html 段落片段：

<p>Hello World, and wish you have a good day!</p>

如果想要给该段落的第一个字母添加样式，可以在第一个字母中包裹一个元素，并设置该 span 元素的样式：

	<p><span class="first">H</span>ello World, and wish you have a good day!</p>

.first {
    font-size: 5em;
}

如果不创建一个元素，我们可以通过设置 <p> 的:first-letter 伪元素来为其添加样式。这个时候，看起来好像是创建了一个虚拟的元素并添加了样式，但实际上文档树中并不存在这个元素。

<p>Hello World, and wish you have a good day!</p>

p:first-letter {
    font-size: 5em;
}

从上述例子中可以看出，伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。

总结:

• 伪类本质上是为了弥补常规 CSS 选择器的不足，以便获取到更多信息；
• 伪元素本质上是创建了一个有内容的虚拟容器；
• CSS3 中伪类和伪元素的语法不同；
• 可以同时使用多个伪类，而只能同时使用一个伪元素；

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

1、类选择器：class 名  =>p.info {} // 选择 class 为 info 的所有 p 元素

2、id 选择器： id 名  => #info {} // 选择 id 为 info 的元素 不能为多个元素同时设置相同的 id

3、标签选择器：标签名 =>  div {} // 选择所有的 div

4、并列选择器：#info，.info, p {} // 同时选择多个选择器

5、后代选择器：父选择器 子 / 孙选择器 或 父选择器 > 子选择器

　　　　　　　   div p {} //div 内的所有 p

　　　　　　　　div>p {} //div 内仅邻的子元素 p 不包含 p 元素内部的 p 元素

6、兄弟选择器： div+p // 选择每个紧跟在 div 元素后面的第一个 p 元素

　　　　　　　　p~ul  // 选择前面有 p 元素的所有 ul 元素　　　　

7、属性选择器：

　　　　　　　　[title] // 选择所有有 title 属性的元素

　　　　　　　　[title=info] // 选择所有 title 属性值为 info 的元素　　

　　　　　　　　[title~=info] // 选择所有 title 属性值包含 info 的元素　

　　　　　　　　[title|=info] // 选择所有 title 属性值以 info 开头的元素

　　　　　　　　[title^=info] // 选择所有 title 属性值以 info 开头的元素

　　　　　　　　[title$=info] // 选择所有 title 属性值以 info 结尾的元素

　　　　　　　　[title$=info] // 选择所有 title 属性值包含 info 的元素

8、伪类选择器：不修改 dom 内容，通过一些特定的选择器根据特定的状态，特定条件来修改元素的样式。

 　　　　　　　　a{

　　　　　　　　　　:link => 　　a 标签（默认）

　　　　　　　　　　:hover =>　　鼠标放在 a 标签

　　　　　　　　　　:active =>　　鼠标点 a 标签

　　　　　　　　　　:visited =>　　a 标签被访问过

　　　　　　　　　}

 　　　　　　　　input {// 表单元素

　　　　　　　　　　:focus => 　　匹配已聚焦点的表单元素

　　　　　　　　　　:enabled =>　　匹配已经启用的表单元素（默认）

　　　　　　　　　　:disabled =>　　匹配禁用的表单元素

　　　　　　　　　　:checked =>　　匹配被选中的表单元素

　　　　　　　　　}

　　　　　　　　　:root => 匹配根元素即 html

　　　　　　　　　:not (p) => 选择不是 p 的所有元素

　　　　　　　　　p:empty => 选择没有子节点的 p，包括空格

　　　　　　　　　:target => 用来修改被点击的 a 标签所对应的锚点的样式 eg：<a href="#mao1"></a> 点击这个 a 

　　　　　　　　　　　　　对应的 <p id="mao1"></p > 样式会被修改

　　　　　　　　　:lang (en) => 选择属性 lang 的值为 en 的元素

　　　　　　　　　:first-of-type =>p:first-of-type // 选择每个父容器内的第一个 p 元素

　　　　　　　　　:last-of-type =>p:last-of-type // 选择每个父容器内的倒数第一个 p 元素

　　　　　　　　　:nth-of-type =>p:nth-of-type (2) // 选择每个父容器内的第二个 p 元素

　　　　　　　　　:nth-last-of-type =>p:nth-last-of-type // 选择每个父容器内的倒数第二个 p 元素

　　　　　　　　　:only-of-type =>p:only-of-type // 选择每个只有一个 p 元素的父容器内的 p 元素（父元素可包含多个其他元素）

　　　　　　　　　:only-child =>p:only-child // 选择每个有且仅有一个 p 元素的父容器内的 p 元素

　　　　　　　　　:first-child =>p:first-child// 选择每个父容器中的第一个且为 p 的子元素

　　　　　　　　　:last-child =>p:last-child// 选择每个父容器中的最后一个且为 p 的子元素

　　　　　　　　　:nth-child (n) =>p:nth-child (2)// 选择每个父容器中的第二个且为 p 的子元素

　　　　　　　　　:nth-last-child (n) => p:nth-last-child (2) // 选择每个父容器中的倒数第二个且为 p 的子元素

9、伪元素：css3 规定伪元素由两个冒号开头作为标示::, 可能会改变 dom 结构，创建虚拟 dom。

　　::before,::after // 这两个伪类会在选择的元素的前面和后面创建虚拟 dom 通常和 content 联合 shiyong

　　::first-letter,first-line // 这两个伪类只要用于改变选中元素内文本节点的第一个字母，第一行的样式

　　::selection // 用于修改用户用鼠标选中的文本的样式，仅限于 color、background、cursor、outline 的修改。IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。Firefox 支持替代的 ::-moz-selection

我们今天的关于CSS中的伪类和伪元素之间有什么区别？和css伪类与伪元素的区别的分享已经告一段落，感谢您的关注，如果您想了解更多关于CSS 中的伪类和伪元素、CSS 属性 - 伪类和伪元素的区别、CSS 的伪类和伪元素、css 选择器，伪类和伪元素的区别的相关信息，请在本站查询。