.nav li::before,.nav li::after{
content:"";
position:absolute;
top:14px;
height:25px;
width:1px;
}
.nav li::before{
left:0;
background:-webkit-linear-gradient(to bottom,#f06254,#ffffff,#f06254);
background:-moz-linear-gradient(to bottom,#f06254,#ffffff,#f06254);
background:-o-linear-gradient(to bottom,#f06254,#ffffff,#f06254);
background:-ms-linear-gradient(to bottom,#f06254,#ffffff,#f06254);
background:linear-gradient(to bottom,#f06254,#ffffff,#f06254);
}
.nav li::after{
right:0;
background:-webkit-linear-gradient(to bottom,#f06254,#bf554c,#f06254);
background:-moz-linear-gradient(to bottom,#f06254,#bf554c,#f06254);
background:-o-linear-gradient(to bottom,#f06254,#bf554c,#f06254);
background:-ms-linear-gradient(to bottom,#f06254,#bf554c,#f06254);
background:linear-gradient(to bottom,#f06254,#bf554c,#f06254);
}
.nav li:first-child::before{ background:none;}
.nav li:last-child::after{ background:none;}
2 、
html 代码：
我链接的是 PDF 文件
我类名是 icon
我的 title 是 more"> 我的 title 是 more
css 代码
a[class^=icon]{
background: green;
color:#fff;//定义以 icon 开头的任何字符串
}
a[href$=pdf]{
background: orange;
color: #fff;定义 href 以pdf 结尾任何字符串
}
a[title*=more]{
background: blue;
color: #fff;定义有 title 的的任何字符串
}
例如：
a[class^=column]{
background:#fc0001;
}
a[href$=doc]{
background:#007d02;
}
a[title*=box]{
background:#0000fe;
}
我的背景想变成红色
我的背景想变成红色
我的背景想变成红色
我的背景想变成绿色
我的背景想变成绿色
我的背景想变成蓝色
我的背景想变成蓝色
我的背景想变成蓝色
3 、
结构性伪类选择器 root
:root 选择器，从字面上我们就可以很清楚的理解是根选择器，
他的意思就是匹配元素 E 所在文档的根元素。在 HTML 文档中，根元素始终是
（[:root] 选择器等同于 元素，简单点说：
:root{background:orange}
html {background:orange;}
得到的效果等同。
建议使用 :root 方法。
另外在 IE ９以下还可以借助 [:root] 实现 hack 功能。 ）
4 、
结构性伪类选择器 —not
:not 选择器称为 否定选择器，和 jQuery 中的 :not 选择器一模一样， 可以选择除某个元素之外的所有元素。就拿 form 元素来说，比如说你想给表单中 除 submit 按钮之外 的 input 元素添加红色边框， CSS 代码 可以写成： form {
input:not([type="submit"]){
border:1px solid red;
}//意思是除了 type=submit 意外的 input 边框为红色
5 、 结构性伪类选择器 —empty
:empty 选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有， 哪怕是一个空格。
比如说，你的文档中有三个段落 p 元素，你想把没有任何内容的 P 元素隐藏起来。我们就可以使用 [:empty] 选择器来控制。
HTML 代码：
我是一个段落
CSS 代码：
p{
background: orange;
min-height: 30px;
}
p:empty {
display: none;
}
6 、 结构性伪类选择器 —target
:target 选择器称为目标选择器，用来匹配文档 ( 页面 ) 的 url 的某个标志符的目标元素 。
例 :
Brand
content for Brand