CSS练习-导航栏斜线分隔-利用伪元素 - 五木十架

开始切第一张图了，第一个遇到的问题是顶部导航栏这里，用斜线分割。想到的思路是用伪类:before或者:after实现

先写html结构。

<span style="color: #008000;"><!--</span><span style="color: #008000;"> 导航栏begin </span><span style="color: #008000;">--></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="header_right fr"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="link"</span><span style="color: #0000ff;">></span>Home<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="link"</span><span style="color: #0000ff;">></span>About<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="link"</span><span style="color: #0000ff;">></span>Features<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="link"</span><span style="color: #0000ff;">></span>Blog<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="link"</span><span style="color: #0000ff;">></span>Shop<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="alarm fr"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="./images/alarm.png"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="alarm"</span> <span style="color: #0000ff;">/></span><span style="color: #800000;">images</span><span style="color: #0000ff;">><span style="color: #800000;">i </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="alarm_number"</span><span style="color: #0000ff;">></span>2<span style="color: #0000ff;"></span><span style="color: #800000;">i</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
 <span style="color: #008000;"><!--</span><span style="color: #008000;"> 导航栏end </span><span style="color: #008000;">--></span></span></span></span></span></span></span></span></span></span>

再是样式

<span style="color: #800000;">.link:before</span>{<span style="color: #ff0000;">content</span>:<span style="color: #0000ff;"> "/"</span>;<span style="color: #ff0000;">margin</span>:<span style="color: #0000ff;">0 24px</span>;<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;"> grey</span>;}<span style="color: #800000;">
.link:first-child:before</span>{<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">none</span>;}

先用：bofore，设定内容是"/"，前后margin，颜色。再用first-child将第一个元素之前的伪类去掉。

效果是这样的

似乎没有设计图里的斜线倾斜角度大呢……