selector::pseudo-element { property: value; } p::first-line { color: #ff0000; } h1::before { content: '♥'; } 3、常用伪元素选择器 伪元素选择器并不是针对真正的元素使用的选择器,而是针对CSS中已经定义好的伪元素使用的选择器,CSS中有如下四种常用伪元素选择器:first-line、 first-letter、 ...
20.X:not(selector) div:not(#container) { color: blue; } not伪类灰常有用。例如我要选择所有的div,除了有id为container的。上面那个代码片段就能完美的实现。 如果我想选择除了p以外的所有元素,我可以这么做: *:not(p) { color: green; } 查看例子 兼容性 IE9+ Firefox Chrome Safari Opera 21.X::...
:nth-last-of-type(n) 匹配父元素下指定子元素,在同类子元素中排序第 n,从后向前数 :nth-of-type(odd) :nth-of-type(even) :nth-of-type(3n+1) :first-of-type :last-of-type :only-of-type ::selection 选择被用户选取的元素部分 :first-line 选择元素中的第一行 :first-letter 选择元素中的第...
p:first-of-type 选择属于其父元素的首个<p>元素的每个<p>元素。p:last-of-type 选择属于其父元素的最后<p>元素的每个<p>元素。p:only-of-type 选择属于其父元素唯一的<p>元素的每个<p>元素。p:only-child 选择属于其父元素的唯一子元素的每个<p>元素。p:nth-child(2)选择属于其父元素的第二个子元...
9.only-child:选择器匹配属于其父元素的唯一子元素的每个元素 10.only-of-type:选择器匹配属于其父元素的特定类型的唯一子元素的每个元素 11.empty:选择器匹配没有子元素(包括文本节点)的每个元素 否定选择器: not:(element/selector)选择器匹配非指定元素的/选择器的每个元素...
X:not(selector) div:not(#container) { color: blue; } 否定伪类选择器用来在匹配元素时排除某些元素。在上面的例子中,设定除了id为container的div元素字体颜色为blue。 兼容浏览器:IE9+、Firefox、Chrome、Safari、Opera X::pseudoElement p::first-line {font-weight: bold; ...
没错,我们一样可以使用nth-last-of-type来从结束开始回溯这个选择器,来找到我们想要的元素兼容性IE9+ Firefox 3.5+ Chrome Safari Opera26.X:first-child ul li:first-child { border-top: none; } 这个结构的伪类让我们可以选择某个元素的第一个子孩子。你通常可以使用这个办法来删除第一个或者最后一个...
CSS结构伪类选择器之否定伪类:not() 结构伪类选择器是针对 HTML 层级结构的伪类选择器。 常用的结构化伪类选择器有: :root选择器、:not选择器、:only-child选择器、:first-child选择器、:last-child选择器、 :nth-child选择器、:nth-child(n)选择器、:nth-last-child(n)选择器、:nth-of-type(n)选择器、...
:first-of-type 伪类 :first-of-type伪类选择在其父元素中的特定类型的元素中的第一个元素。 :last-of-type 伪类 :last-of-type伪类选择在其父元素中的特定类型的元素中的最后一个元素。 :nth-of-type 伪类 当需要根据元素在兄弟元素中的类型和位置选择元素时,可以使用:nth-of-type伪类。
:root选择器、:not选择器、:only-child选择器、:first-child选择器、:last-child选择器、 :nth-child选择器、:nth-child(n)选择器、:nth-last-child(n)选择器、:nth-of-type(n)选择器、 :empty选择器、:target选择器。 这些基本上都很常用,今天着重说下:否定伪类:not() ...