css基础-学习css 03区分伪类和伪元素

伪类和伪元素的区别

我认为可以理解伪类并不脱离我们的标签元素；伪元素就是我们脱离了我们当前的元素；

• 伪类：以：开头

伪类示例

• 像下面的例子一样，我是想让第一个p标签进行加深，我们并没有脱离第一个p标签内容操作，这样就是伪类；

<article>
  <p>
    蔬菜对你有好处，所以你需要多吃大头菜、大葱、白萝卜、苋菜、番茄酱、甜瓜、红豆、大蒜。
  </p>

  <p>
    秋葵浓汤、甜菜叶、玉米、鸡冠菜、菊苣、秋葵浓汤、葫芦。欧芹、葱、西葫芦、塌棵菜、豌豆芽、蚕豆、羽衣甘蓝、蒲公英、秋葵、裙带菜、番茄。蒲公英、黄瓜、花生、豌豆、花生、鸡冠菜、西葫芦。
  </p>
</article>




article p:first-child {
  font-size: 120%;
  font-weight: bold;
}

所以更多的时候我们使用伪类大多都瘦（:hover）划过激活（:focus）键盘控制事件；

• 伪元素 以::开头

伪元素示例1

• 像下面的例子一样，我们使用::伪元素，就脱离了单一p标签，而是指向所有的p标签的第一行颜色加深；

<article>
  <p>
    蔬菜对你有好处，所以你需要多吃大头菜、大葱、白萝卜、苋菜、番茄酱、甜瓜、红豆、大蒜。
  </p>

  <p>
    秋葵浓汤、甜菜叶、玉米、鸡冠菜、菊苣、秋葵浓汤、葫芦。欧芹、葱、西葫芦、塌棵菜、豌豆芽、蚕豆、羽衣甘蓝、蒲公英、秋葵、裙带菜、番茄。蒲公英、黄瓜、花生、豌豆、花生、鸡冠菜、西葫芦。
  </p>
</article> 




article p::first-line {
  font-size: 120%;
  font-weight: bold;
}

如果你觉得还不太理解伪元素，那么还有一个例子；

伪元素示例2

<p class="box">我的 HTML 页面的盒子中的内容。</p>

.box::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  background-color: rebeccapurple;
  border: 1px solid black;
}

我们已经用:: before伪元素加入了个空字符串content。我们把它设为弹性dispaly:block，以让它可以用 width 和 height 进行样式化。然后我们可以用 CSS 像任何元素那样样式化。你可以摆弄 CSS，改变它的外观和行为。所以我们的操作就和这个p标签没什么关系了

总结：其实伪类可以将特定类型的元素作为目标，就像在Dom上添加了一个类一样。伪元素就是向这个Dom添加了全新的元素，并准许你设置它的样式布局，就像插入了一个新的标签元素一样！