你应该知道的30个css选择器

2020-05-08 08:53:54易采站长站整理

这工作的很好,但有点不够灵活。如果链接确实直接连接到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;
}