这工作的很好,但有点不够灵活。如果链接确实直接连接到Nettus+还好,但是,也许路径是到nettust的相对路径呢?在这种情况下,我们可以使用一点正则表达式语法。
查看例子
兼容性
•IE7+
•Firefox
•Chrome
•Safari
•Opera
12. X[href*=nettuts]
a[href*=”tuts”] {
color: #1f6053; /* nettuts green */
}
来了不是~这就是我们需要的代码。*号指定了包含该属性的值必须包含定义的值。就是说,这句代码包含了href值为 nettuts.com,net.tutsplus.com或者tutsplus.com。
记住这个描述过于宽泛,如果是某个锚点标签链接到某个连接中带有tuts非Envato的网站(tutsplus属于Envato旗下网站)呢?因此你需要更多特性来限制,分别使用^和&来限定字符串的开始和结束。
查看例子
兼容性
•IE7+
•Firefox
•Chrome
•Safari
•Opera
13. X[href^=http]
a[href^=”http”] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
有没有想过某些网站是如何定义一个图标的链接的?我确定你肯定看到过。这些链接很容易让你跳转到另一个网站。
使用^(carat)符灰常简单啦。这个符号常常在正则表达式中表示字符串的开始。如果我们想指向所有以”http”开头的”href”属性的锚点的话,我们就可以使用类似于上面的那段代码啦。
注意啦,我们不需要搜索”http://”,完全没必要,因为我们还要包含以https://开头的链接呢。
如果我们想为所有链接到图片的链接定义样式咋办?这种情况下,我们得搜索字符串的结束了不是。
查看例子
兼容性
•IE7+
•Firefox
•Chrome
•Safari
•Opera
14. X[href$=.jpg]
a[href$=”.jpg”] {
color: red;
}
又来了,我们还是使用正则表达式符号,$(dolor),来作为字符串的结束标记。这种情况下,我们就会搜索所有url以.jpg为结尾的锚点啦。记住记住这种情况下gif和png格式的图片不会被选择哦。
查看例子
兼容性
•IE7+
•Firefox
•Chrome
•Safari
•Opera
15. X[data-*=foo]
a[data-filetype=”image”] {
color: red;
}
回顾最近一条,我们如何能包含各种图片类型:png,jpeg,jpg,gif?很容易想到,我们能通过多个选择器来不是,像这样:
a[href$=”.jpg”],
a[href$=”.jpeg”],
a[href$=”.png”],
a[href$=”.gif”] {
color: red;
}










