本文目录
- CSS3:伪类前的冒号和两个冒号区别
- CSS3如何给伪元素::before添加hover
- css伪元素和伪类的区别
- css中什么是伪类和伪元素
- CSS3 怎么分清伪元素和伪类举例子
- vue css伪元素after的使用
- 浅谈css伪类和伪元素的区别、优先级
- css中什么是伪类和伪元素通俗点
- 伪类和伪元素的区别是什么
- HTML中常见伪类和伪元素的区别
CSS3:伪类前的冒号和两个冒号区别
在一次项目中，有一次要用到::selection伪元素，然后开发同学问我，CSS中一个冒号和两个冒号有神马区别？这好像真的是个问题，或许很多前端同学对此都有疑惑，查了些资料，证实了下两个符号的区别，简而言之：单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。W3C关于CSS3选择器的规范中有一段描述：A pseudo-element is made of two colons (::) followed by the name of the pseudo-element.This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in CSS level 3.简单翻译一下，大意就是，伪元素由双冒号和伪元素名称组成。双冒号是在当前规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。那么现在就可以完整的回答标题中的问题了，对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。所以，如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全。
CSS3如何给伪元素::before添加hover
CSS3给伪元素before添加hover操作：
1、伪元素的由两个冒号“::”开头，然后是伪元素的名称 ，使用两个冒号是为了区别伪类和伪元素。当然，考虑到兼容性，CSS2中已存的伪元素仍然可以使用一个冒号的语法，但是CSS3中新增的伪元素必须使用两个冒号；
2、一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后，如果我们利用伪元素来进行动画设置，需要给父元素添加样式（position：relative）；给:after或者:before添加（position:absolute）；
3、某些内容时，只用在css样式表中利用:after与:before来输入内容样式，但更多的，可以结合伪类:hover 来设置动画样式。
这里要注意的是，这几个伪类如果同时出现在一个元素的操作上，顺序不能改变，否则很大程度上会产生紊乱，效果不生效。
css伪元素和伪类的区别
简单的来说，伪类是针对CSS，而伪元素是针对HTML，伪类选择器是CSS选择器的一种，而伪类是“假”的HTML标签伪类（选择器）本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；伪元素本质上是创建了一个有内容的虚拟容器；在CSS3中，伪类和伪元素的语法得到了进一步的调整（一个冒号和两个冒号）；在开发当中，可以同时使用多个伪类，而只能同时使用一个伪元素。
css中什么是伪类和伪元素
伪类一开始单单只是用来表示一些元素的动态状态，典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。
伪元素则代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。
与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。
CSS3 怎么分清伪元素和伪类举例子
伪类用于向某些选择器添加特殊的效果。
伪元素用于将特殊的效果添加到某些选择器。
伪类有：: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 //伪元素
但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。
望采纳！
vue css伪元素after的使用
开篇一句话：CSS的伪类，伪元素就当成vue的过滤器使用就好了，我也是想到这个突然就茅塞顿开了。 用法： :after 选择器表示向选定的元素之后插入内容。 要有content属性 需求举例：div按钮后面有个朝下的ico,点击div后 ico方向朝上 实现办法: 1.可以使用JS实现，div的class名绑定到一个变量上，根据变量的真假值更换class 2.伪类的实现方法 先说思路： 要借助两个class，基础class(’base_class’)和激活class(’rotate’). base_class 相对定位。 base_class:after 放ico朝上的样式，绝对定位。 rotate不要单独加after，不然会取代掉base_class的after, 要两个class都出现才加after rotate绑定到一个布尔变量上，该变量的真假值由open_select_window更改 html:
浅谈css伪类和伪元素的区别、优先级
css的伪类和伪元素在我们平常的工作中有着很广泛的应用，比如:hover、:active、:after等等，但是大部分人可能并不清楚伪类和伪元素的具体区别，所以我们今天来简单的梳理一下。 css伪类的定义 由于css2.1中伪类和伪元素的定位并无区别，所以我们直接引用css3中对于伪类的定义（引入来源w3c） 定义： 引入伪类概念是用于选择不存在于DOM树中的信息或那些不能够通过常规css选择器得到的信息。（比如:hover,:active就属于不在于dom中的信息，nth-child()属于不能够通过常规css选择器得到的信息） 伪类由“冒号”（:）+伪类的名称和伪类括号内的可选参数组成。（伪类括号内的可选参数指:nth-child(n)里的n） 所有的常规选择器都可以在任何位置使用伪类。伪类名称不区分大小写。一些伪类是互斥的，另一些伪类可以同时应用于同一个元素。为了满足用户在操作DOM时产生的DOM结构改变，伪类可以是动态的。 css伪元素的定义 定义： 伪元素用于创建和访问文档中不存在的抽象元素。例如，文档语言不提供访问元素内容的第一个字母或第一行的机制。使用伪元素可以访问到这些。伪元素还可以让我们访问文档中原本不存在的抽象元素（例如，::before和::after）。 伪元素由两个冒号（::）后跟伪元素的名称组成。 ::两个冒号这种格式，是为了区别伪类和伪元素。与现有样式表的兼容性，考虑到兼容性有部分伪元素可以同时使用1个或者2个冒号，（即:first-line，:first-letter，:before和:after）。对于css3中引入的新伪元素，则必须要使用2个冒号。 每个选择器只能出现一个伪元素，并且伪元素要位于选择器的后面。注意：此规范的未来版本可能允许每个选择器使用多个伪元素。 css伪类和伪元素的区别 伪类和伪元素的语法结构不同，伪类为冒号（:）加伪类名称，伪元素为两个冒号（::）加伪元素名称，不过为了考虑兼容性(css2.1中伪类和伪元素都是一个冒号)，部分伪元素也支持一个冒号的写法，例如（:after,:before,:first-line,:first-letter）。 一个选择器只能使用一个伪元素，但是可以使用多个伪类。 ***隐藏网址***
css中什么是伪类和伪元素通俗点
比如鼠标移到链接上，链接变色的效果a:hover {color: #FF00FF} 这就是伪类。不专业的说带冒号的就是伪类或者伪元素了。作用就是提供一些特定的效果，比如未访问过的链接link，已访问过的链接visited这些。p:first-line{color:#ff0000;font-variant:small-caps;}first-line这个就是伪元素这个是特定的首行效果，还有特定的首字母效果first-letter伪元素的作用就是为你提供一些方便，如果有3行字，第一行要有不一样的效果，那么如果没有伪元素，你需要自己创建一个容器，《p》《div class=“first”》第一行《/div》第二行第三行《/p》之类的，有了伪元素就不用了。直接是《p》第一行第二行第三行《/p》，然后定义p:first-line就可以了。如果想要区分伪类和伪元素，那么就根据他的作用来判断。
伪类和伪元素的区别是什么
伪类和伪元素的区别是它们是否创造了新的元素，这个新创造的元素就叫伪元素。伪元素不存在在DOM文档中，是虚拟的元素，是创建新元素，这个伪元素是某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
伪类和伪元素的区别
伪类是类似于添加类所以可以是多个，而伪元素在一个选择器中只能出现一次，并且只能出现在末尾，可以同时使用多个伪类，而只能同时使用一个伪元素，CSS3中伪类和伪元素的语法不同，伪类link，hover，伪元素before，after。
相同点都可以用来表示伪类对象，用来设置对象前的内容，before和before写法是等效的，after和after写法是等效的。不同点beforeafter是Css2的写法，beforeafter是Css3的写法，所以css2的要比css3的兼容好，beforeafter的兼容性要比beforeafter好。
在H5开发中建议使用beforeafter比较好，注意伪对象要配合content属性一起使用，伪对象不会出现在DOM中，所以不能通过js来操作，仅仅是在CSS渲染层加入，伪对象的特效通常要使用hover伪类样式来激活。
HTML中常见伪类和伪元素的区别
提到伪类，在人们的印象中最常用的不过是:hover、:active、:link、:visited，还有css3里的常用伪类选择器:last-child、:first-child、nth-child(n)等等!w3c上对伪类和为元素的定义分别为:伪类：伪类用于向某些选择器添加特殊的效果。伪元素：伪元素用于将特殊的效果添加到某些选择器css3为了明确伪类和伪元素的区别，已经明确了单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素span:hover //伪类span::before //伪元素但是，为了保证兼容性，现在伪元素普遍还是使用单引号。下面我将用单引号的形式给大家做介绍常见的伪类（pseudo-classes）和伪元素（pseudo-elements）HTML中常见伪类和伪元素的区别伪元素的兼容性Chrome 2+,Firefox 3.5+ (3.0 had partial support),Safari 1.3+,Opera 9.2+,IE8+ (with some minor bugs),几乎所有的移动浏览器。伪元素:before和:after的定义和基本用法定义：:before 选择器在被选元素的内容前面插入内容。:after 选择器在被选元素的内容后面插入内容。使用：使用 content 属性来指定要插入的内容。 content有几个比较有用的值： – 使用引号包括一段字符串，将会向元素内容中添加字符串。示例：a:after { content: ""; }attr() – 调用当前元素的属性，可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来。示例：a:after { content:"(" attr(href) ")"; }url() / uri() – 用于引用媒体文件。示例：h1::before { content: url(logo.png); }counter() – 调用计数器，可以不使用列表元素实现序号功能。具体请参见 counter-increment 和 counter-reset 属性的用法。示例：h3:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }
