CSS3 学习之伪元素选择器

本文和大家分享的主要是前端开发中， CSS3 伪元素选择器相关用法实例，希望对大家有所帮互助。

源代码

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>not 选择器</title>

<style>

    :root{
    
        background: #126fb0;
        
    }
    
    body *:not(h1){
    
        background: #fff;
        
    }
    
    :empty{
    
        background: #ff6600;
        
    }
    
</style>

</head>

<body>

<h1>not 选择器</h1>

<p>not 选择器 not 选择器 not 选择器 not 选择器 not 选择器 not 选择器 not 选择器 not 选择器 not 选择器 not 选择器 not 选择器 not 选择器 not 选择器 not 选择器 not 选择器 not 选择器 not 选择器 not 选择器 not 选择器 not 选择器 not 选择器 not 选择器 not 选择器 not 选择器 not 选择器</p>

<br/>

<table border="1" cellpadding="0" cellspacing="0" width="100%">

<tr>

    <td>1</td>
    
    <td>2</td>
    
    <td>3</td>
    
    <td>4</td>
    
</tr>

<tr>

    <td>1</td>
    
    <td>2</td>
    
    <td></td>
    
    <td>4</td>
    
</tr>

<tr>

        <td>A</td>
        
    <td>B</td>
    
    <td>C</td>
    
    <td></td>
    
</tr>

</table>

</body>

</html>

伪元素选择器是什么

针对于 CSS 中已经定义好的伪元素使用的选择器。伪元素和我们上面的这个伪类，顾名思义它就是假的，那么这个为伪元素的使用方法呢。就是选择器，伪元素{属性：值}，那么与类配合使用就是选择器.类名：伪元素{属性：值}

原文链接： http://www.maiziedu.com/wiki/css3/element/