first-child、last-child、nth-child()、nth-last-child()、nth-of-type()、nth-last-of-type()、first-of-type、last-of-type、only-child、only-of-type、empty 1.first-child:选择其父元素的首个子元素的每个element元素 2.last-child:选择其父元素的最后一个子元素的每个element元素 3.nth-child():...
结合:nth-last-child(n)与:first-child可以匹配出列表中不同元素数量的不同样式 比如:nth-last-child(3):first-child表示从后往前数选中第3个子元素,同时也是第一个元素,那么就可以判断改列表中共有3个元素,结合兄弟选择器+和~可以对不同数量的子元素分别指定样式 li:only-child{height:100%; }/* 2个 */...
:only-child| 只有一个子元素才有作用 :only-child匹配没有任何兄弟元素的元素.等效的选择器还可以写成:first-child:last-child或者:nth-child(1):nth-last-child(1),当然,前者的权重会低一点。 代码语言:javascript 复制 p:only-child{background:#409EFF;}第一个没有任何兄弟元素的元素第二个第二个 :firs...
当需要选择在其父级元素中唯一的一个子元素时,可以使用:only-child伪类。 :first-of-type 伪类 :first-of-type伪类选择在其父元素中的特定类型的元素中的第一个元素。 :last-of-type 伪类 :last-of-type伪类选择在其父元素中的特定类型的元素中的最后一个元素。 :nth-of-type 伪类 当需要根据元素在兄弟元...
p:only-child{ background:#ff0000; } 7.2.5 :empty选择器 1、定义 :empty选择器选择每个没有任何子级的元素(包括文本节点)。 2、实例 指定空的p元素的背景色: p:empty{ background:#ff0000; } 7.2.6 :not() 选择器 1、定义 :not(selector) 选择器匹配每个元素是不是指定的元素/选择器。
:only-child匹配没有兄弟的元素,即该元素是另一个元素的唯一子元素。例如下面有两个p元素,采用:only-child伪类时,只有第一个符合匹配条件。 p:only-child { background: #F60; } 1 2 注意,将:first-child和:last-child两个伪类拼接,其效果相当于:only-child。 :only-of-type匹配没有相同类型的兄弟...
:nth-last-child(n)p:nth-last-child(2)选择所有p元素倒数的第二个子元素 :nth-last-of-type(n)p:nth-last-of-type(2)选择所有p元素倒数的第二个为p的子元素 :nth-of-type(n)p:nth-of-type(2)选择所有p元素第二个为p的子元素 :only-of-typep:only-of-type选择所有仅有一个子元素为p的元素 ...
4.3.4、:only-child 匹配属于其父元素中的唯一子元素 4.3.5、:nth-child(n)匹配属于其父元素中的第n个子元素 4.4、否定伪类:将匹配的元素排除在外 语法::not(selector); 5、伪元素选择器 5.1、::first-letter 获取匹配元素的第一个字母(字符)
CSS :only-child 匹配没有任何兄弟元素的元素。等效的选择器还可以写成 :first-child:last-child或者:nth-child(1):nth-last-child(1) ,当然,前者的权重会低一点。实例 规定属于其父元素的唯一子元素的每个 p 元素:<!DOCTYPE html> p:only-child { background: red; } 这是一个段落。 这是...
1 新建一个html文件，命名为test.html，用于讲解css中only-child选择器有什么作用。2 在test.html文件中，使用p标签创建两行文字，一个p标签内只有一个子元素span，另一个p标签内有两个子元素span。3 在css标签内，使用only-child选择器设置只有一个span子元素的元素样式，设置它的颜色（color）为红色。4 在...