X+Y ul + p { color: red;}
这个叫相邻选择器。它指挥选中指定元素的直接后继元素。上面那个例子就是选中了所有`ul`标签后面的第一段,并将它们的颜色都设置为红色。
兼容性
-
IE7+
-
Firefox
-
Chrome
-
Safari
-
Opera
X>Y
div#container > ul { border: 1px solid black;}
`X Y`和`X > Y`的差别就是后面这个指挥选择它的直接子元素。看下面的例子:
- List Item
- Child
- List
- List
- List
`#container > ul`只会选中`id`为’container’的`div`下的所有直接`ul`元素。它不会定位到如第一个`li`下的`ul`元素。 由于某些原因,使用子节点组合选择器会在性能上有许多的优势。事实上,当在javascript中使用`css`选择器时候是强烈建议这么做的。
兼容性
-
IE7+
-
Firefox
-
Chrome
-
Safari
-
Opera
X ~ Y
ul ~ p { color: red;}
兄弟节点组合选择器跟`X+Y`很相似,然后它又不是那么的严格。`ul + p`选择器只会选择紧挨跟着指定元素的那些元素。而这个选择器,会选择跟在目标元素后面的所有匹配的元素。
兼容性
-
IE7+
-
Firefox
-
Chrome
-
Safari
-
Opera
X[title]
a[title] { color: green;}
这个叫属性选择器,上面的这个例子中,只会选择有title属性的元素。那些没有此属性的锚点标签将不会被这个代码修饰。那再想想如果你想更加具体的去筛选?那…
兼容性
-
IE7+
-
Firefox
-
Chrome
-
Safari
-
Opera
X[href="foo"]
a[href="http://strongme.cn"] { color: #1f6053; /* nettuts green */}
上面这片代码将会把`href`属性值为`http://strongme.cn`的锚点标签设置为绿色,而其他标签则不受影响。
注意我们将值用双引号括起来了。那么在使用Javascript的时候也要使用双引号括起来。可以的话,尽量使用标准的CSS3选择器。
这样可以用了,但是还是有点死,如果不是这个链接,而是类似的链接,那么这时就得用正则表达式了。
兼容性
-
IE7+
-
Firefox
-
Chrome
-
Safari
-
Opera
X[href*="strongme"]
a[href*="strongme"] { color: #1f6053;}
Tada,正是我们需要的,这样,就指定了`strongme`这个值必须出现在锚点标签的`href`属性中,不管是`strongme.cn`还是`strongme.com`还是`www.strongme.cn`都可以被选中。 但是记得这是个很宽泛的表达方式。如果锚点标签指向的不是`strongme`
相关的站点,如果要更加具体的限制的话,那就使用`^`和`$`,分别表示字符串的开始和结束。
兼容性
-
IE7+
-
Firefox
-
Chrome
-
Safari
-
Opera
X[href^="href"]
a[href^="http"] { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px;}
大家肯定好奇过,有些站点的锚点标签旁边会有一个外链图标,我也相信大家肯定见过这种情况。这样的设计会很明确的告诉你会跳转到别的网站。 用克拉符号就可以轻易做到。它通常使用在正则表达式中标识开头。如果我们想定位锚点属性`href`中以`http`开头的标签,那我们就可以用与上面相似的代码。
注意我们没有搜索http://,那是没必要的,因为它都不包含https://。
那如果我们想找到所有指向一张图片的锚点标签呢?那我们来使用下`&`字符。
兼容性
-
IE7+
-
Firefox
-
Chrome
-
Safari
-
Opera
X[href$=".jpg"]
a[href$=".jpg"] { color: red;}
这次我们又使用了正则表达式`$`,表示字符串的结尾处。这段代码的意思就是去搜索所有的图片链接,或者其它链接是以`.jpg`结尾的。但是记住这种写法是不会对`gifs`和`pngs`起作用的。
兼容性
-
IE7+
-
Firefox
-
Chrome
-
Safari
-
Opera
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;}
但是这样写着很蛋疼啊,而且效率会很低。另外一个办法就是使用自定义属性。我们可以给每个锚点加个属性`data-filetype`指定这个链接指向的图片类型。 [html] Image Link </a[/html] 那有了这个钩子,我们就可以去用标准的办法只去选定文件类型为`image`的锚点了。
a[data-filetype="image"] { color: red;}
兼容性
-
IE7+
-
Firefox
-
Chrome
-
Safari
-
Opera
X[foo~="bar"]
a[data-info~="external"] { color: red;}a[data-info~="image"] { border: 1px solid black;}
很少有人知道这个技巧。这个`~`符号可以定位那些某属性值是空格分隔多值的标签。 继续使用第15条那个例子,我们可以设置一个`data-info`属性,它可以用来设置任何我们需要的空格分隔的值。这个例子我们将指示它们为外部连接和图片链接。
Click Me, Fool
给这些元素设置了这个标志之后,我们就可以使用`~`来定位这些标签了。
/* Target data-info attr that contains the value "external" */a[data-info~="external"] { color: red;}/* And which contain the value "image" */a[data-info~="image"] { border: 1px solid black;} 兼容性
-
IE9+
-
Firefox
-
Chrome
-
Safari
-
Opera
X:checked
input[type=radio]:checked { border: 1px solid black;}
上面这个伪类写法可以定位那些被选中的单选框和多选框,就是这么简单。
兼容性
-
IE9+
-
Firefox
-
Chrome
-
Safari
-
Opera
X:not(selector)
div:not(#container) { color: blue;}
`取反`伪类是相当有用的,假设我们要把除`id`为`container`之外的所有`div`标签都选中。那上面那么代码就可以做到。
或者说我想选中所有出段落标签之外的所有标签。
*:not(p) { color: green;}
兼容性
-
IE9+
-
Firefox
-
Chrome
-
Safari
-
Opera
X::pseudoElement
p::first-line { font-weight: bold; font-size:1.2em;}
我们可以使用`::`来选中某标签的部分内容,如地一段,或者是第一个字没有。但是记得必须使用在块式标签上才起作用。
伪标签是由两个冒号 :: 组成的。
定位第一个字
p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px;}
上面这段代码会找到页面上所有段落,并且指定为每一段的第一个字。
它通常在一些新闻报刊内容的重点突出会使用到。
定位某段的第一行
p::first-line { font-weight: bold; font-size: 1.2em;}
跟`::first-line`相似,会选中段落的第一行 。
为了兼容性,之前旧版浏览器也会兼容单冒号的写法,例如`:first-line`,`:first-letter`,`:before`,`:after`.但是这个兼容对新介绍的特性不起作用。
兼容性
-
IE6+
-
Firefox
-
Chrome
-
Safari
-
Opera
X:nth-child(n)
li:nth-child(3) { color: red;}
还记得我们面对如何取到推跌式标签的第几个元素是无处下手的时光么,有了`nth-child`那日子就一去不复返了。
请注意`nth-child`接受一个整形参数,然后它不是从0开始的。如果你想获取第二个元素那么你传的值就是`li:nth-child(2)`.
我们甚至可以获取到由变量名定义的个数个子标签。例如我们可以用`li:nth-child(4n)`去每隔3个元素获取一次标签。
兼容性-
IE9+
-
Firefox3.5+
-
Chrome
-
Safari
X:nth-last-child(n)
li:nth-last-child(2) { color: red;}
假设你在一个`ul`标签中有N多的元素,而你只想获取最后三个元素,甚至是这样`li:nth-child(397)`,你可以用`nth-last-child`伪类去代替它。
这个技巧可以很正确的代替第16个TIP,不同的就是它是从结尾处开始的,倒回去的。
兼容性-
IE9+
-
Firefox3.5+
-
Chrome
-
Safari
-
Opera
X:nth-of-type(n)
ul:nth-of-type(3) { border: 1px solid black;}
曾几何时,我们不想去选择子节点,而是想根据元素的类型来进行选择。
想象一下有5个`ul`标签。如果你只想对其中的第三个进行修饰,而且你也不想使用`id`属性,那你就可以使用`nth-of-type(n)`伪类来实现了,上面的那个代码,只有第三个`ul`标签会被设置边框。
兼容性-
IE9+
-
Firefox3.5+
-
Chrome
-
Safari
X:nth-last-of-type(n)
ul:nth-last-of-type(3) { border: 1px solid black;}
同样,也可以类似的使用`nth-last-of-type`来倒序的获取标签。
兼容性
-
IE9+
-
Firefox3.5+
-
Chrome
-
Safari
-
Opera
X:first-child
ul li:first-child { border-top: none;}
这个结构性的伪类可以选择到第一个子标签,你会经常使用它来取出第一个和最后一个的边框。
假设有个列表,没个标签都有上下边框,那么效果就是第一个和最后一个就会看起来有点奇怪。这时候就可以使用这个伪类来处理这种情况了。
兼容性-
IE7+
-
Firefox
-
Chrome
-
Safari
-
Opera
X:last-child
ul > li:last-child { color: green;}
跟`first-child`相反,`last-child`取的是父标签的最后一个标签。
例如 标签
- List Item
- List Item
- List Item
这里没啥内容,就是一个了 List。
ul { width: 200px; background: #292929; color: white; list-style: none; padding-left: 0;}li { padding: 10px; border-bottom: 1px solid black; border-top: 1px solid #3c3c3c;}
上面的代码将设置背景色,移除浏览器默认的内边距,为每个`li`设置边框以凸显一定的深度。
兼容性
-
IE9+
-
Firefox
-
Chrome
-
Safari
-
Opera
X:only-child
div p:only-child { color: red;}
说实话,你会发现你几乎都不会用到这个伪类。然而,它是可用的,有会需要它的。
它允许你获取到那些只有一个子标签的父标签。就像上面那段代码,只有一个段落标签的`div`才被着色。
My paragraph here.
Two paragraphs total.
Two paragraphs total.
上面例子中,第二个`div`不会被选中。一旦第一个`div`有了多个子段落,那这个就不再起作用了。
兼容性
-
IE9+
-
Firefox
-
Chrome
-
Safari
-
Opera
X:only-of-type
li:only-of-type { font-weight: bold;}
结构性伪类可以用的很聪明。它会定位某标签只有一个子标签的目标。设想你想获取到只有一个子标签的`ul`标签?
使用`ul li`会选中所有`li`标签。这时候就要使用`only-of-type`了。
ul > li:only-of-type { font-weight: bold;}
兼容性
-
IE9+
-
Firefox 3.5+
-
Chrome
-
Safari
-
Opera
X:first-of-type `first-of-type`
伪类可以选择指定标签的第一个兄弟标签。
测试
My paragraph here.
- List Item 1
- List Item 2
- List Item 3
- List Item 4
来你把List Item 2取出来,如果你已经取出来或者是放弃了,来继续。
解决办法1 办法很多,我们看一些比较方便的。首先是`first-of-type`。
ul:first-of-type > li:nth-child(2) { font-weight: bold;}
找到第一个`ul`标签,然后找到直接子标签`li`,然后找到第二个子节点。 解决办法2 另一个解决办法就是邻近选择器。
p + ul li:last-child { font-weight: bold;}
这种情况下,找到`p`下的直接`ul`标签,然后找到它的最后一个直接子标签。
解决办法3 我们可以随便玩耍这些选择器。来看看:
ul:first-of-type li:nth-last-child(1) { font-weight: bold; }
先获取到页面上第一个`ul`标签,然后找到最后一个子标签。
兼容性-
-
IE9+
-
Firefox 3.5+
-
Chrome
-
Safari
-
Opera
-