Coding-everyday

# 1. 伪类和伪元素的区别

伪类和伪元素的根本区别在于：它们是否创造了新的元素。

  1. 伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。例如：用::before和::after。
  2. 伪类：表示已存在的某个元素处于某种状态，但是通过dom树又无法表示这种状态，就可以通过伪类来为其添加样式。例如a元素的:hover, :active等。

伪元素：

伪元素

伪类：

伪类

另外：

  1. 伪类的效果可以通过添加实际的类来实现
  2. 伪元素的效果可以通过添加实际的元素来实现
  3. 所以它们的本质区别就是是否抽象创造了新元素

注意：

  1. 伪类只能使用：
  2. 除了::placeholder和::selection，伪元素既可以使用:，也可以使用::。
  3. 因为伪类是类似于添加类所以可以是多个，而伪元素在一个选择器中只能出现一次，并且只能出现在末尾。

# 1.1. :after/::after和:before/::before的异同

相同点

  1. 都可以用来表示伪元素，用来设置对象前的内容。
  2. :before和::before写法是等效的， :after和::after写法是等效的。

不同点

  1. :before/:after是CSS2的写法，::before/::after是CSS3的写法。
  2. :before/:after的兼容性要比::before/::after好 ，不过在H5开发中建议使用::before/::after比较好。

注意：

  1. 伪元素要配合content属性一起使用
  2. 伪元素不会出现在DOM中，所以不能通过js来操作，仅仅是在CSS 渲染层加入
  3. 伪元素的特效通常要使用:hover伪类样式来激活 eg: 当鼠标移在span上时，span前插入'mike'
span:hover::before{
    content: 'mike'
}

# 2. 伪元素注意事项

  1. 伪元素，它是一个元素的子元素，其意思就是说，我们无法用JS获取到这些伪元素，我们无法通过JS对其进行增、删、改，所以这也是它们的优点，因为它们不会增加JS查询DOM的负担，即对于JS来说伪元素是透明的。然后因为它们也不是实际的HTML标签，所以可以加快浏览器加载HTML文件，对SEO也有帮助（SEO 搜索引擎优化）。
  2. 如果我们把伪类的样式有absolute定位的话会把伪类强制变成块级元素，伪类本身是行内元素的。
  3. img、input和其他的单标签是没有after和before伪元素的，因为单标签本身不能有子元素。

# 3. nth-child和nth-of-type的区别

  1. p:nth-child(2)是先找到第2个元素，然后看看它是否是p，是p才渲染
  2. p:nth-of-type(2)是找到这些个p元素，然后渲染第2个p元素(如果第二个p存在，一定会渲染)

# 3.1. select:last-child

选择父元素的最后一个子元素，且同时满足select条件的。两者缺一不可！

# 4. active、hover、link、visited、focus的区别

  • link表示链接在正常情况下（即页面刚加载完成时）显示的颜色。
  • visited表示链接被点击后显示的颜色。
  • hover表示鼠标悬停时显示的颜色。
  • focus表示元素获得光标焦点时使用的颜色，主要用于文本框输入文字时使用（鼠标松开时显示的颜色）。
  • active表示当所指元素处于激活状态（鼠标在元素上按下还没有松开）时所显示的颜色。

# 4.1. a标签伪类的触发顺序

触发顺序为link-->visited--->hover--->active即记为love and hate， 然后单独记住focus在hover和active之间即可

← 动画 →