CSS :last- of -type选择器的对立面是什么？
:last-of-type选择器用于选择同类型元素中的最后一个。它的对立面是:first-of-type选择器，这个选择器用于选择同类型元素中的第一个。
基础概念
:first-of-type: 选择同类型元素中的第一个。:last-of-type: 选择同类型元素中的最后一个。
优势
:first-of-type:- 可以精确地选中特定类型的第一个元素，而不受其他元素的影响。
- 在布局设计中，常用于设置首元素的样式，如特殊的边框或背景色。
:last-of-type:- 同样可以精确地选中特定类型的最后一个元素。
- 在设计列表或一系列项目时，可以用来添加结尾的特殊样式。
应用场景
:first-of-type:- 在文章列表中，可能希望第一个文章标题有不同的字体大小或颜色。
- 在导航栏中，可能希望第一个菜单项有特殊的标记或样式。
:last-of-type:- 在页脚中，可能希望最后一个链接有不同的颜色或下划线样式。
- 在一系列卡片布局中，可能希望最后一个卡片有圆角或其他视觉区分。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p:first-of-type {
color: blue;
font-weight: bold;
}
p:last-of-type {
color: green;
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<p>这是第一个段落。</p>
<span>这是一个span元素。</span>
<p>这是第二个段落。</p>
<div>这是一个div元素。</div>
<p>这是最后一个段落。</p>
</div>
</body>
</html>在这个例子中，第一个段落将以蓝色加粗显示，而最后一个段落将以绿色并带有下划线显示。
遇到的问题及解决方法
如果你在使用:first-of-type或:last-of-type时遇到问题，比如选择器没有按预期工作，可能的原因包括：
- 选择器优先级问题：可能存在其他CSS规则覆盖了你的选择器。检查是否有更高优先级的规则影响了目标元素。
- HTML结构问题：确保目标元素确实是其同类型中的第一个或最后一个。
- 浏览器兼容性问题：虽然现代浏览器普遍支持这些选择器，但旧版本浏览器可能不完全支持。可以使用工具如Can I Use来检查兼容性，并考虑使用polyfill或回退样式。
通过仔细检查CSS规则、HTML结构和浏览器兼容性，通常可以解决这类问题。
相关·内容
CSS选择器:last-of-type选择类型的最后一个元素。有没有办法让我选择在类型的最后一个元素之前的所有内容？
浏览 36提问于2020-07-24得票数 5
我有一个保存不同表单的变量--像这样的…对象$(formId)我想应该是这样的。所以如果你想知道我需要这个做什么-我想把焦点设置到表单中的第一个输入域，但是如果第一个输入是隐
浏览 0提问于2012-02-18得票数 11
回答已采纳
1回答
我在我的上有一个固定的页脚，为了在它和主要内容之间创造空间，我给后者留了一个底边距。这在Chrome和Firefox中运行良好。div#wrap>div:last-child{ }
就IE8提供的任何错误/警告而言，它没有提到这条规则有任何问题。增加margin-bottom没有任何效果，因此该规则似乎完全被忽略。有人知道为什么吗？对于这个问题，什
浏览 1提问于2014-01-10得票数 0
4回答
我有一个包含日期(和类名"newDate")的输入框列表，我可以动态添加更多的日期。当我尝试获取最后添加的textbox的值时，我总是以first结束，这是一个用页面呈现的textbox。$(".newDate:last-of-type").val()
我需要改变我的选择器来捕捉动态添加的文本框吗?还是我需要在这里考虑其他事情？脚本的位置与选择器相关吗？
浏览 0提问于2012-01-16得票数 1
回答已采纳
.NET中的方法返回一个类型的by-ref版本，例如，传递System.Int32的类型返回一个表示System.Int32&的类型。但是，如果您已经有了System.Int32&，那么获取普通老式System.Int32的机制是什么呢？似乎没有相反的方法来删除by-ref修饰符。目前，我已经准备好了一个技巧，它重新构建了程序集限定的名称，在类型名称的末尾没有&，然后加载该类型，但这是非常肮脏的</em
浏览 0提问于2009-03-03得票数 6
回答已采纳
我设置了一个简单的基于css的下拉导航。(另外，我不能用nth-...选择器，因为每隔一段时间就会有新的类别添加/删除。)
我该如何阻止这种形式的发生呢？
浏览 1提问于2019-07-18得票数 0
回答已采纳
是否有可能(没有jquery)使用纯javascript对nth-child()和nth-last-of-type()进行上诉？我希望在很大程度上避免使用jquery。
浏览 0提问于2013-09-03得票数 4
8回答
有没有.find()的对立面？将获取除带有#myid的元素之外的所有带有.myclass的元素。谢谢感谢您的回复！看起来我刚刚错过了在文档中看到.not()和:not()。
浏览 1提问于2010-04-27得票数 3
回答已采纳
4回答
颜色在左边的地方，其余的就是白色的。 我不知道从哪里开始，所以经过反复试验，我已经使用CSS选择器::before取得了进展，但它还不完全在那里，我不确定如何完成它。我的代码很琐碎 <ul></ul> CSS ul li{}
content: "\00a0\00a0";
浏览 82提问于2017-01-16得票数 1
回答已采纳
2回答
在CSS中检查字段是否有值时，?has_content的对立面是什么？
我正在尝试做一个if-else逻辑，我有两个字段，FieldA和FieldB。
浏览 9提问于2018-08-22得票数 0
3回答
重铸和自由
、、
我有一些结构来存储不同类型的列表: typedef int db_int；typedef char db_stringDB_STRING_LEN； structof column*/); }下面是free_list函数: void
free_list(struct List_db_void *elm, e
浏览 4提问于2013-12-04得票数 1
回答已采纳
我正在尝试使用is()选择器创建一个悬停功能。但我需要的是相反的！$('.tray .tab').is(".active").hover();...function我想要做的是，如果您悬停在包含类active的</
浏览 0提问于2013-04-03得票数 3
回答已采纳
2回答
我对CSS上的:not()选择器有问题。我有这样的代码： <div role="layer" class="one">Layer</div>
<div role="layer" class<div role="layer" class="three">Layer</div
浏览 2提问于2013-10-31得票数 2
回答已采纳
1回答
我一直试图复制这个页面，，你可以看到它们改变了第二种形式中单选按钮的标准外观。 <p>Okamžitá registrace</p> <input type="text" placeholder="Vaše jméno" required><input type="text"
浏览 2提问于2016-11-12得票数 2
回答已采纳
我想在not()选择器中堆叠多个类，但是,;:不能工作。input[type=text]:hover:not(.ui-pg-input .mandatory){ background-color: #D9EDF7;}
那么，在css not()选择器中堆叠类的正确方法是什么呢
浏览 3提问于2015-09-26得票数 4
回答已采纳
2回答
我正在使用watir-webdriver，它有几行相同的代码，如下所示：links(:followees_category, :css => "#home-followees li.animate-in ul li[followees_category_elements.attribute("href")
最后一行将给我两个链接：，，不幸的是，我无法在css：/:first中指明。通过将
浏览 3提问于2013-08-14得票数 0
回答已采纳
我使用解释如何为给定元素添加标签选择器。但是，我想使用它来选择给定类型的所有标签(具体地说，类型单选)。正在尝试： /* Styles */和 /* Styles
浏览 0提问于2013-05-14得票数 4
回答已采纳
当文本区域处于焦点时，我该如何设置注释换行div的样式，这意味着光标在文本区域中闪烁，用户可以输入内容？
谢谢
浏览 17提问于2011-09-23得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
云直播
对象存储
腾讯会议活动推荐
腾讯云开发者
