选择器的使用(first-child和last-child选择器)

最新推荐文章于 2023-05-22 19:43:03 发布
最新推荐文章于 2023-05-22 19:43:03 发布
阅读量146 收藏
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/jason-davis/p/4009684.html
版权

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        li:first-child {
        background-color:limegreen;
        }
        li:last-child {
        background-color:red;
        }
    </style>
</head>
<body>
    <h2>列表A</h2>
    <ul>
        <li>列表项目1</li>
        <li>列表项目2</li>
        <li>列表项目3</li>
        <li>列表项目4</li>
        <li>列表项目5</li>
    </ul>
    <hr  />
    <h2>列表B</h2>
    <ul>
        <li>列表项目1</li>
        <li>列表项目2</li>
        <li>列表项目3</li>
        <li>列表项目4</li>
        <li>列表项目5</li>
    </ul>
</body>
</html>

效果如下：

转载于:https://www.cnblogs.com/jason-davis/p/4009684.html

weixin_33962923
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css first-child伪类选择器详解
weixin_44607531的博客
01-26 1万+
三种使用情况 p:first-child 选中同级第一个并且为p的元素 p:first-child em 选中同级第一个并且为p的元素下的em元素 p em:first-child 选中所有p元素下，同级第一个且为em的元素 first-child 代码 <style> p:first-child{ /* 同级第一个并且为p的元素 */ color: red; } </style> <body> ...
jQuery中:last-child选择器用法实例
10-24
在jQuery中，`:last-child`选择器是一种非常实用的...通过熟练掌握`:last-child`以及其他类似的选择器，如`:first-child`、`:nth-child(n)`等，你可以编写出更加优雅和高效的jQuery代码，提高网页的交互性和用户体验。
【jQuery】关于选择器中的 :first 、 :first-child 、 :first-of-type
weixin_30387799的博客
12-29 79
开头先说点题外话。因为刚开始毕业的第一份工作不是前端，是在国企的，快干到3个月的时候，实在是受不了那种安逸的生活节奏，果断辞职了（其实就是因为钱少），然后选定自己喜欢的方向，开始从页面仔做起。所以现在是做页面仔的快第三个月了，因为找了个小的创业公司实习，所以实际能全面从头到尾了解前端的知识比较少，一般是用到什么就去查什么，学什么，所以最近只能找个jQuery的API看看了。 ...
CSS3---结构性伪类选择器—first-child
diyinjiao1404的博客
05-04 409
结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。 示例演示 通过“:first-child”选择器定位列表中的第一个列表项，并将序列号颜色变为红色。 HTML代码： <ol> <li><a href=...
jQuery中first-child与first选择器区别
weixin_34342578的博客
08-07 92
1、first-child first-child为每个父级元素匹配第一个子元素，可以匹配出多个元素： 示例代码： &lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;jQuer
6.:first-child子元素过滤选择器
weixin_34138521的博客
03-10 112
通过上面章节的学习，我们知道使用:first过滤选择器可以获取指定父元素中的首个子元素，但该选择器返回的只有一个元素，并不是一个集合，而使用:first-child子元素过滤选择器则可以获取每个父元素中返回的首个子元素，它是一个集合，常用多个集合数据的选择处理。 如下图，如果想把页面中每个ul中的第一个li获取到，并改变其颜色。则可以使用 : first-child 在浏览器中显示的效果...
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
11-21
此外，虽然不适用于IE8，但这里也提及了一些其他CSS3选择器，如`nth-of-type()`、`:first-of-type`、`:last-of-type`、`:only-of-type`、`:nth-last-child()`和`:nth-last-of-type()`。这些选择器允许更精确地定位...
jQuery+css last-child实现选择最后一个子元素操作示例
10-17
// 使用:last-child选择器 $('div p:last-child').addClass("red"); // 这段代码将选择所有div元素内的最后一个直接子元素p，即使其他div内也有同名的p元素，只有每个div内的最后一个p会被选中 }); <p>...
伪类选择器的使用和语法
09-19
伪类选择器的使用和语法 摘要：本文将详细介绍伪类选择器的使用和语法，包括伪类选择器的作用、语法、案例演示和注意事项等。 一、伪类选择器的作用 伪类选择器是一种特殊的选择器，可以选中某些元素，并且可以...
CSS :first-child 选择器
weixin_35795555的博客
02-25 154
css 样式调整的时候经常遇到，首个元素或最后一个元素需要特殊处理样式的需求。 可以用到CSS 的 first-child、last-child选择器。 在上面基础上，我想从li中几个button里面，第一个button需要设置特殊样式。 ...
jQuery中:only-child选择器用法实例
01-19
本文实例讲述了jQuery中:only-child选择器用法。分享给大家供大家参考。具体分析如下： 此选择器将匹配父元素的唯一子元素。如果其父元素中含有其他元素，那将不会被匹配。 语法结构: 代码如下:$(“:only-child”) 此选择器一般也要和其他选择器配合使用，比如类选择器、元素选择器等等。例如： 代码如下:$(“li:only-child”).css(“color”,”blue”) 以上代码能够将只有一个li元素的ul元素下的li元素中的字体颜色设置为蓝色。 注意:这里有必要结合上面的代码再对概念进行一下说明。这里所说的父元素并不是li，而是li的父元素。很多人往往误以为是匹
flex布局中用 :first-child选择器
imkaifan的博客
06-30 273
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
jquery选择器 :first与:first-child区别
weixin_34388207的博客
09-28 88
一个例子： &lt;ul&gt;  &lt;li&gt;John&lt;/li&gt;  &lt;li&gt;Karl&lt;/li&gt;  &lt;li&gt;Brandon&lt;/li&gt;&lt;/ul&gt;&lt;ul&gt;  &lt;li&gt;Glen&lt;/li&gt;  &lt;li&gt
【CSS3】CSS3 结构伪类选择器 ( E:first-child / E:last-child 选择器 | E:nth-child(n) 选择器 | E:nth-of-type 选择器 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-20 5767
一、CSS3 结构伪类选择器 二、E:first-child / E:last-child 选择器 1、E:first-child 选择器 2、E:last-child 选择器 三、E:nth-child(n) 选择器 1、E:nth-child(n) 选择器语法说明 2、n 为数字的情况 3、n 为关键字的情况 4、n 为公式的情况 5、子元素类型不同的情况 四、E:first-of-type / E:last-of-type / E:nth-of-type 选择器
[CSS] first-child选择器的一点理解
weixin_43261523的博客
05-22 6071
在W3school上的解释是这样的： first-child选择器：选择属于其父元素的首个子元素的每个<p>元素，并为其设置样式： p:first-child { background-color: yellow; } 这很容易产生一种误解，认为p:first-child是选中p元素的第一个子元素。 举例说明： <div> <p>标题1的第一段</p> <p>标题1的第二段</p> </div>
常用伪类选择器之 :last-child()、:first-child()、nth-child()、:nth-of-type()
Wod_7的博客
05-22 2008
在CSS中，常规选择器可以根据元素的类型、类、ID、指定的属性，或者它们的父级或子级进行选择。与常规选择器不同，伪类选择器可以根据元素的状态或位置，而不是它们的属性或标签名称来选择元素。在伪类选择器中，:nth-child、:last-child、:first-child、:nth-of-type()是其中比较常用的几个。
css中选取子元素
生存不忘生活
08-08 5758
1、first-child first-child表示选择列表中的第一个标签。代码如下： li:first-child{background:#090} 上面的意思是，li 列表中的 第一个li模块的背景颜色。 2、last-child last-child表示选择列表中的最后一个标签，代码如下： li:last-child{background:#090} 3、nth-ch
那些年踩过的坑之:first-child伪类选择器
lyxkgc的博客
09-10 231
:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。——w3school 嗯，乍一看好像说的不是很明白，因此这个选择器很容易让人误解，通常会有两种误解： 误解一：认为E:first-child选中E元素的第一个子元素。 误解二：认为E:first-child选中E元素的父元素的第一个E元素。 你是不是也曾这样理解这个选择器或者现在仍然这样理解？以上两种理解都是错误的，为了证明上面两种理解是错的，看看下面的实例 一个链接 一个链接 一个链接 一个链接 待续… ...
【JQuery】：first和：last过滤选择器
O(∩_∩)O
03-28 341
从这一篇开始讲过滤选择器。（吐槽：jQuery乱七八糟的选择器真的非常多，恼火！但是以后用处应该很大） 言归正传，：first的作用是选择一组相同元素的第一个元素。:last选择器的作用刚好相反。 例子： 改变最后一行"苹果"背景颜色： 葡萄 香蕉 橘子 西
first-child生效而last-child不生效
最新发布
08-16
问题:first-child生效而last-child不生效的原因是什么? 回答: 这个问题出现的原因是CSS选择器中的last-child选择器的生效条件是父元素的最后一个子元素必须是特定的元素，而不是仅仅是父元素的最后一个子元素。在给定的HTML结构中，最后一个子元素是loading而不是c1，所以last-child选择器没有匹配到任何元素，导致样式不生效。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [解决css样式中first-child和last-child不生效的问题](https://blog.csdn.net/weixin_44684272/article/details/121583249)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [last-child不生效问题](https://blog.csdn.net/HYeeee/article/details/119797997)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值