知方可补不足～CSS中的几个伪元素

对于一个很好的编辑器VS来说,它对于编程语句的自动提示功能是很强大的,有时,我们根本不需要看相关API,而直接看VS给我们的提示就可以完成一个新技术的学习了.

今天我们来说几个CSS中的伪元素,它们在项目开发中用的并不多,但确实很有用,在项目中不用它,是因为大家不能了解它们,下面是一个工作场景,如有四个按钮,分别是建立,编辑,删除和修改,而我们要求这在前台显示的汉字是统一的,如果要改它们,就都要变的,如,我们希望把建立改为"新建",那么所有的建立都要改成新建,这代码量可是不小,当然,如果你这样写<a>建立</a>这改起来是挺麻烦的,而如果你使用伪元素呢?看下面代码:<a class="create"></a>,而在页面上也会显示"建立",而它就是通过伪元素来实现的.

一 元素前和元素后添加指定内容

    /* 在类名为read的a标签位置的后面添加查看字符,例如:<a class='read'>详细</a>,它的结果就是"详细查看" */
    a.read:after {
        content: '查看';
    }

    a.del:after {
        content: '删除';
    }

    a.edit:after {
        content: '编辑';
    }

    a.create:after {
        content: '新建';
    }

HTML调用代码

<a class="create"></a>
<a class="del"></a>
<a class="edit"></a>
<a class="read"></a>

页面显示截图

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAP8AAAB6CAIAAAD/FxL2AAAExklEQVR4nO3cu5HbOgBG4S3EfbiZrUQNbO6AGYvgVqCEGVgAMbMpIkZsAA4A8AmJD2k19v7nGwXXvlpBEg9BEPb4zd/19fV1/wnA/+vt/v+mfvxg1A9d1A9d1A9d1A9d1A9d1A9d1A9d1A9d1A9d1A9d1A9d1A9d1A9d1A9d1A9d1A9d1A9d2/UDP9VG/cAPRv3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QtVH/r99/XvZg3NePK267/vePzxc81jUw7gvGFUf90uOKo37pccVRv/S44l5Vf2ldZy//fA1q44o7W3/lfKbmxnhvqs+iTT/f2aLuF6/p6uupGq5VF1+gKK2bv1TRelN9vlduGKSY/JSpHqywMeMLhl/2Vbl8WtGG3xzep1+9mQfqr1zue2vMvaO3Pa64w/VfljW7ItNcfOZ4wIa5P38Ud9bvihBiaV3bhJcKo4z1t837R2PSmXmpe1dbk+vgQIXxPedTS6fWMOi16qbnRnjbx8cdv9W89deYTr97D+qfOjH3j4cz9h2bWx28zl5uTU6r68Yz608n2KXufTrlMu9w/7hteLfN+iwK447XOu9958yz5/6i7avaudqa5adYX2eOjSvu1MonTOQhwXxbq1BeN/fbMPVe6n56+Mcz4fgcnF7Z3Zn798y7J+oP51V4A3Gi8T53Jm8s8Kg/62j9mcnGtPNrdGcvw1X7aev+m5Oc6xb1OxMXY72b/4hpM/cqmxXGeT1ex26soErr2ma8Eq6dHveOttl+zta44k7v+Yxr62HuX81/k+c8Yc/n8MpnmPUfu+sdVnqNWZ1R3vvwHsZfd7Zqp9Nw/pzZe7ed+dLWNxLXql5eDW59auqfetJd77z++NWX1mXnp3MrkGN3vevFt/c+szbYHHf4vK51rnMmvIf56MMzw3+vPvID9ecPy3J3Ifsk6t90fO4vrfOuiIW5YnbU09xfWtfZYjr9PGHuD5PosT2fZ8z96RFvKpZf0XTX1fuXz/2lNV2/vhNg7t/jxLo/JB4OTGM6W6XopyufovU+xppxYg5O508TlvVhhX1rvz9tUMaT01Q3bwp37niml22qzNzfhFMi3IG8dO4P38mNvVHq3/Twun8yqa/qnyxyHp770xWmMd6ZMFC2/mEbyo/bsmlbJrNbsuvuM1xPfF+V11z9mZXPOKKffw8nrjm3H0Xrio/8fi5z/x7n9vu99z6t9cc5phgvAn7ccc86U2H6I96ud2kraXLHGc+H2SvHSfHeXuTeCuOZNl11xIl5+PjDGmxgqs/TK589ez7zj7lE/Zv4W27fPe4j6/5v/7ziqF96XHHULz2uOOqXHlcc9UuPK45/00F6XHH8ez7QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3QRf3Q9RduPzIbsVJ72gAAAABJRU5ErkJggg==" alt="" />

二 为元素集合的第一个元素添加指定样式

/* 为样式为list的table标签下的第一个tr标签,添加下面的CSS样式 */

table.list tr:first-child {
    background-color: #5C87B2;
    color: #fff;
    font-weight: bold;
}

HTML调用代码

<table class="list">
    <tr>
        <td>编号</td>
    </tr>
    <tr>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
    </tr>
</table>

页面显示截图

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQoAAABuCAIAAABQu8pmAAAC4klEQVR4nO3cPW7aAACG4Ryk9+hlcgGuwBqk7B3YzB2IFIkxC1sQM6yRTAfUwerUxR2AyiT5jJtWJMTPo09q0kaCqHnlH1qu6oMvX79d396dYc8eyOOe53HtDbtq5nG2Pftb9LhneFz7pzy+//j57s/G7ENNHmZx8jCLk4dZnDzM4uRhFncqj2Jd1vXjdP/pcF7VjU/3m5Z18PwrzS5qJ/IYzqu6LsfF+tUC9j/90zI1Iw+76LXnsXis63L+cF2sy7qaFo0/ah5V5GGfdG157A8dJ8+dnFzZJ11bHuPV4ad8/uLoYdaDdbj2WC3S8aGcL6bbdOQ42K6H7/1Nmr1trXkcqii31e7X8bSst+vxvNqFUc4frm/vdpco9Wrx7t+M2f/dqWuP1WL/wbZ6eQTZ5xHua7n2sEvf6ZcFd691lKuyjEeP1+bOlV3+OtzY3Vb1/ur8L/IYzqva1bxd+NrvXJXj27vhtCy362FxlMer507Dw+/vuRqxC59/c2UWJw+zOHmYxcnDLE4eZnHyMIuTh1mcPMzijvIws+aO8vgFNMgDInlAJA+I5AGRPCCSB0TygEgeEHXI47EYDAbF43mfF3wA7Xk83d8MBjdFcSMP+qjLydXTvTzoJXlAJA+I5AGRPCCSB0Qdbuw2iIRe8ao5RPKASB4QyQMieUAkD4jkAZE8IJIHRN5j1yzuKI8aaJAHRPKASB4QyQMieUAkD4jkAZE8IDqVx2Y2OvxH88nyfE8LPoL2PJaT0Wyz+3AzGwmEnul+crWZjf60Ar3QPY/lxNGDnumax3IycOygbzrlsZy4MKePTuehDXqrPY/NbOSciv5qzWM5OXqHXaXQM141h0geEMkDInlAJA+I5AGRPCCSB0TygMh77JrFXbWkAz0nD4jkAZE8IJIHRPKASB4QyQMieUAkD4jkAZE8IJIHRPKASB4QyQMieUAkD4jkAZE8IJIHRPKASB4QyQMieUAkD4h+A0Dzjnfjf9ryAAAAAElFTkSuQmCC" alt="" />