12伪类选择器和伪元素应用

12伪类选择器和伪元素应用

1.伪类选择器

CSS 伪类（pseudo-class） 是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字。

<style>
	li:nth-of-type(2n){
		background-color:red;
	}
</style>

关于伪类选择器，做了一个简单的思维导图来表示他们的作用：

2.伪元素

• 伪元素的目的即为现有选中的元素内部增加第一子元素和最后一个子元素，目的是为了能够增加显示的内容。
• 伪元素一定要有content样式来激活伪元素，哪怕content样式的内容是空着的“”，也得加上去，一旦没有写content样式，伪元素即失效。
• 伪元素是行内的特性。

伪元素不会影响结构选择器（伪元素无法通过其他选择器选中！！！）
伪元素用的最多的就是清除浮动，不会影响seo 不会被搜索引擎收录。

content样式值种类：

• none不会产生伪类元素
• normal :效果同上
• 文本内容：展示字符内容
• url()：URI值会指定一个外部资源（比如图片）。如果该资源或图片不能显示，它就会被忽略或显示一些占位符（比如无图片标志）。

<style>
      div::before {
            content: "";
            display: block;
            width: 100px;
            height: 50px;
            background-color: #abcdef;
        }
		ul::after {
            content: "";
            display: block;
            clear: both;
	}
 </style>

其他一些伪元素：

<style>
        p {
            width: 300px;
            height: 500px;
        }
        /* ::selection被选中的内容 */
        p::selection {
            background-color: pink;
        }
        /* ::first-letter首字符（/是个例外） */
        p::first-letter {
            font-size: 40px;
            color: red;
        }
        /* ::first-line首行 */
        p::first-line {
            color: pink;
        }
    </style>