V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
maiziedu
V2EX  ›  程序员

CSS3 学习之伪元素选择器

  •  
  •   maiziedu · 2016-12-27 11:45:32 +08:00 · 1647 次点击
    这是一个创建于 2867 天前的主题,其中的信息可能已经有所发展或是发生改变。

    本文和大家分享的主要是前端开发中, 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/

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2730 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 12:34 · PVG 20:34 · LAX 05:34 · JFK 08:34
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.