CSS学习笔记（一）：伪元素选择器

伪元素选择器

一般情况下，在html中通过基础选择器和复合选择器（如id、class等）就能定位到大多数的元素从而进行样式的修改。但是，部分情况下，可能存在使用其他手段就能更为简单的定位到需要修改的元素。这些补充手段中，伪类选择器和伪元素选择器就是比较知名的一种。但是由于伪类选择器和伪元素选择器定位性过于广泛，因此语法规则也相当多。
首先来讲伪元素选择器。在html文本中，通过在<style>标签后添加::<伪元素选择器>来定位到指定的位置。
用法：

<!-- 注意，为了减少不必要的篇幅，已忽略html标签、head标签及body标签等的书写 -->
<style>
	::first-line {
	color:black;
	background-color:orange;
</style>
<div>
	 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim a pariatur eligendi? Tempora officia non quidem consequuntur similique ducimus porro dolore doloremque, et vero repellat tempore eum voluptatem nobis delectus?
</div>

效果：

可以看到正如first-line的字面意思般，伪元素选择器定位到了第一行的元素，如果尝试改变浏览器的宽度的话，能看到对应第一行被css渲染到的字的数量也会改变。也就是说，first-line总是定位到第一行。
需要注意：::first-line选择器仅对块级元素的第一行有效，对于像a元素等行内元素是不起作用的
我们也可以让其仅对特定块级元素生效，比如在之前的例子中增加一个<p>标签，让伪元素选择器选择p元素的内容。
用法：
在"::first-line"前添加需要定位的块级元素的名称，如下例。

<!-- 同样需要注意，已忽略html标签、head标签及body标签等的书写 -->
<style>
	div::first-line {
	color:black;
	background-color:orange;
</style>
<p>
	 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim a pariatur eligendi? Tempora officia non quidem consequuntur similique ducimus porro dolore doloremque, et vero repellat tempore eum voluptatem nobis delectus?
</p>
<div>
	 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim a pariatur eligendi? Tempora officia non quidem consequuntur similique ducimus porro dolore doloremque, et vero repellat tempore eum voluptatem nobis delectus?
</div>

效果：

可以看到只有被选中的div元素的内容被first-line选中了。
接下来介绍其他的伪元素选择器。

• ::first-letter：选中文本块的第一个
  字符。
  效果：
  
  同样，可以在双冒号前加div等元素名称以选中特定元素内容。
• ::before与::after

这两个伪元素选择器比较特殊，可以对选中的内容进行修改。
用法：

[元素名称]::before/after{ content:[内容] }

例：

<!-- 注意，仍忽略了html等标签的书写 -->
<style>
	p::before{
		content:"你好";
		}
</style>
<p>
	hello
</p>

效果：

::after伪元素选择器用法同理，效果为在选中的元素后添加内容。
注意：并不是只能添加文本内容，可以添加图片，如需添加图片则需在content后添加url(本地图片位置)即可。

• ::selection选择器

用于匹配用户所选中的部分文本。
用法：

::selection {（所要进行的操作）}

<!-- 注意，仍忽略了html等标签的书写 -->
    <style>
      ::selection {
        background-color: orange;
        color: orchid;
      }
    </style>
    <p>
   		hello
    </p>

效果：
若未选中，则无任何效果

一旦用户选中了文本，则文本效果改变。这里用鼠标选中了"ello"，导致相应的文字效果改变了。

总结

好了，根据以上的内容复述，总结下这次笔记的内容。
学习的部分伪元素选择器有：

• ::first-line
• ::first-letter
• ::before
• ::after
• ::selection
  学习了以上伪元素选择器的用法与相应的特点，需要注意的是，以上伪元素选择器可以轻易的通过名称回忆起相应的用法及特点，掌握这点可以更轻松地学习伪元素选择器的相关知识。