CSS3 中是否有相当于 jQuery 的 :first 选择器?

2023-12-03

我有以下标记:

<div class="a"></div>
<div class="b"></div> <!-- :first -->
<div class="b"></div>
<div class="b"></div> <!-- :last -->
<div class="c"></div>

我正在尝试瞄准first and last <div>与类b。 如果我为此使用 jQuery 选择器,.b:first and .b:last就可以了。

然而对于 CSS,这很棘手:第一个<div class="b">位于另一个之后<div>具有不同的类,并且 :first-child 和 :first-of-type 都匹配第一个<div>, 与类a.

是否有一个选择器针对第一个与该类匹配的项目?


不,没有与 jQuery 等效的 CSS 选择器:first or :last选择器,因为这些选择器是过滤器,而不是 CSS 定义中真正的简单选择器.

在选择器 3 中没有:first-of-class或类似的选择器。

但是,您可以使用覆盖规则~组合器将样式应用于某个类的第一个子类:

  • 第一个带有类的元素的 CSS 选择器
  • 用于选择给定类的第一个元素的 CSS 选择器

但目前无法使用 CSS 将样式应用到某个类的最后一个子类:

  • 是否可以使用当前的浏览器使用伪类来检测某个类的第一个和最后一个?
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS3 中是否有相当于 jQuery 的 :first 选择器? 的相关文章

  • 使用 javascript 加载不同的 CSS 样式表

    我需要使用 javascript 根据正在传递的 URL 变量加载不同的样式表 场景是这样的 我们需要使用一个 CSS 样式表和一个不同的样式表来维护一个移动网站 当通过 iOS 应用程序中加载的 Web 视图访问该页面时 该样式表将用于设
  • 在画布中心写入 (0,0)-HTML5

    I m currently developing a drawing app which allows the user to click and drag to determine the size of the shape and al
  • 使用 jQuery 禁用 CSS 继承

    有没有办法使用 jQuery 或通用 javascript 在块级别禁用 CSS 继承 例如 如果我通过 javascript 拉入外部资源 例如 Pastie org 它们将拥有自己的 CSS 而我的 CSS 会覆盖它们 我想将嵌入代码放
  • 如何使用 Flex 创建自定义马赛克

    我正在尝试使用 Flex 创建一个自定义马赛克 如下所示 除了框 4 的高度和宽度加倍之外 所有框的宽度都是父容器的三分之一 我设法达到以下条件 push group element ul push group element ul li
  • 如何在CSS中水平对齐div

    我在一个容器内有三个子 div 我想水平对齐这些 div 我尝试使用CSSfloat财产 但圆圈正在变成椭圆形 标记代码 div class container info box clearfix div class circle div
  • Bootstrap 页脚不在底部

    我试图强制我的页脚位于网站底部 我不希望它在滚动时粘住 只是在向下滚动网页时出现在底部 目前 网页显示时页脚位于内容下方 我添加了这样的代码bottom 0 并发现它粘住了并且不适合我的网站 我还添加了这样的代码html body heig
  • html/js 中从右到左和/或从上到下的文本?

    如何在浏览器中为用户输入创建从右到左和从上到下的文本字段 有没有本地方法可以做到这一点 或者也许有解决方法 从上到下可能像日语或象形文字 对于 RTL 文本字段 您可以使用 HTMLdir属性 如 ime Vidas 已经提到的 或 wit
  • JQuery mouseover 函数多次触发

    我很长时间以来一直使用这种方法来为整个类 按钮等 设置事件 div bigButton mouseover function this style backgroundColor dfdfdf 然而 在进行一些测试时 我刚刚注意到 当将鼠标
  • vue基于媒体查询绑定值

    carousel 3d display 3 width 150 height 150 我想根据媒体查询设置属性绑定 e g 当屏幕宽度 gt 960px 时 显示应变为 5 您可以尝试绑定display组件属性的值
  • css bootstrap 下拉菜单在 IE 中看起来不同

    我正在使用CSS引导程序3 2 0 http getbootstrap com css 然而 当在 IE 中查看该网站时 菜单选项周围有一个黑色边框 而且下拉菜单按钮看起来也有所不同 如果您查看该网站http getbootstrap co
  • 如何防止 Bootstrap Navbar Toggle 下推内容?

    我将 Bootstrap 与静态顶部导航栏一起使用 如下所示
  • 单击即可切换背景颜色和过渡

    这看起来应该很容易 但我真的找不到办法做到这一点 动画 http doir ir css gif http doir ir css gif 当您单击这些相应的链接时 我需要更改和过渡页面的背景颜色 我见过的最接近触发这种类型转换的事情是 仅
  • html2canvas z-index 不起作用

    我正在使用 html2canvas 库将 div 转换为 png 我有一个关于z index 正如你在图片上看到的 我有盒子 在一个盒子里我有一个用于背景着色的 div z index 0 它随着高度值和数字的 div z index 1
  • Jquery,当屏幕宽度为1050px时删除类

    这是我正在使用的JS代码 document ready function var nav menu2 window scroll function if this scrollTop gt 90 nav addClass f nav els
  • 如何将-webkit-gradient应用到IE上?

    我有以下 CSS 代码 webkit gradient linear left bottom left top from 5AE to 036 Chrome 中的背景显示效果非常好 Internet Explorer 仅显示白色背景 我尝试
  • Chrome - 儿童剪辑CSS3圆形边框?

    请参阅以下 JSFiddle http jsfiddle net zScKW http jsfiddle net zScKW 请注意 子 div 剪裁了其父 div 的边框 如果我删除边框 但保留圆角 该项目将按照我们的预期进行剪辑 Fir
  • Firefox 浮动错误?如何让我的 float:right 在同一条线上?

    我有以下小提琴 http jsfiddle net q05n5v4c 2 http jsfiddle net q05n5v4c 2 在 Chrome 中 它渲染得很好 V 形标志位于右侧 然而 在 Firefox 中 Chevron 字形下
  • css中的减号或下划线有什么作用吗?

    这个问题和我问的很相似here https stackoverflow com questions 6110816 period in css does it do anything 我正在清理一些文件 我在这个 css 中遇到了这个 so
  • 使用 CSS flexbox 重叠两个居中元素

    我试图将两个元素绝对居中于页面中间 一个元素在另一个元素后面 目的是让页面完全响应 中间有一个圆圈 后面有一个脉冲效果 这是一个小提琴 http jsfiddle net Fy8vD 2003 以下的 html body height 10
  • 样式选项标签[重复]

    这个问题在这里已经有答案了 我有一个包含选项的下拉菜单 我想部分地打破和粗体一些文本以及插入上下文中断 我尝试使用 CSS 和 HTML 标签 但无法得到它 有人可以建议一个解决方案吗 提前致谢 我知道这个问题有点老了 或者至少不是新的 但

随机推荐

  • 在 Ado.net C# 中动态构建Where子句

    我将在给定时间接收大约 1000 条记录 并且必须确定它们是现有记录还是新记录 如果它们存在 我必须更新记录 如果是新的 则只需插入它们 我不知道它们是否会存在 或者是否全部存在 我认为最好对数据库进行一次查询 并尝试查找数据库中是否存在其
  • IIS 7 URL 重写匹配 URL

    我正在尝试使用 URL 重写模块在 IIS 7 中设置规范的默认 URL 我认为我误解了 匹配 URL 字段的使用方式 以下似乎没有做任何事情
  • 使用事件调度程序自动备份

    我正在尝试使用 MySQL 中的事件调度程序创建自动备份 这是我的脚本 CREATE DEFINER root localhost EVENT Backup ON SCHEDULE EVERY 1 WEEK STARTS 2013 06 1
  • 事件触发之前的对象处置和垃圾收集

    与我交谈的某人提出了一段代码 private void DownloadInformation string id using WebClient wc new WebClient wc DownloadStringCompleted ne
  • 在java中实现抽象方法/类

    我可以在java中的抽象基类A中实现抽象方法吗 如果答案是肯定的 并且基类 A 中有一个已实现的抽象方法 并且有一个来自 A 的派生类 B B 不是抽象的 B 还必须实现那个基本抽象方法吗 如果我正确理解你的问题 是的 public abs
  • 在两个未在 twilio 中注册的号码之间拨打电话

    有什么方法可以在我的两个用户之间拨打电话吗 我的意思是 我有一个带有注册号码的 twilio 帐户 我必须给我的客户 Bill 打电话 所以当他接听电话时 电话应该重定向到 Bill 选择的另一个客户 让我们说 Joe 因此 比尔点击了一个
  • 使用静态函数实现特征对特征

    trait Trait
  • 如何在c#中从RGB555转换为RGB888?

    我需要将 16 位 XRGB1555 转换为 24 位 RGB888 我的函数如下 但它并不完美 即值 0b11111 将给出 248 作为像素值 而不是 255 该函数适用于小端 但可以轻松修改为大端 public static Colo
  • 工头没有反映变化

    我用这篇文章搭建了facebook app开发的开发环境 https devcenter heroku com articles facebook create an app除了 FOREMAN 之外 一切都很好 问题是 每次我在脚本中进行
  • 如何在matlab中绘制非线性微分方程

    Dx y Dy k y x 3 9 8 cos t inits x 0 0 y 0 0 这些是我想要绘制的微分方程 首先 我尝试求解微分方程 然后绘制图形 Dsolve Dx y Dy k y x 3 9 8 cos t inits 然而
  • android openFileOutput 有什么问题?

    我正在尝试使用 openFileOutput 函数 但它无法编译并且无法识别该函数 我使用的是android sdk 1 6 这是sdk的问题吗 这是参数问题吗 import java io FileOutputStream public
  • 约束最小二乘法

    我正在 R 中对人均天然气使用量进行简单回归 回归公式如下 gas b lt lm log gasq pop log gasp log pcincome log pn log pd log ps log years data gas sum
  • 带有图像和 2 TextView 的 TableRow

    我在做这样的事情时遇到问题 http imageshack us photo my images 824 examplehm png 我的 xml 代码在行中显示 3 列 但我想要 2 列 并且第二列必须分为两个水平部分 My xml
  • ffmpeg 中的多个命名管道

    这个问题是后续这个问题 在我的应用程序中 我想修改各种mp3 然后将它们混合在一起 我知道我可以在 FFmpeg 中使用单个命令行来完成此操作 但它最终可能会非常混乱 因为我需要在每个样本上使用各种过滤器 而我有五个过滤器 我的想法是单独编
  • Windows批处理文件-分割字符串以设置变量

    我觉得我在用 FOR 循环选项兜圈子 我试图获取一个字符串 命令的输出 并用逗号分隔它 然后使用每个值来设置 例如 String USER Andy IP 1 2 3 4 HOSTNAME foobar PORT 1234 所以我想用逗号分
  • SonarQube:扫描过程忽略 lcov.info

    我正在扫描ui项目 源代码位于typescript gulp test coverage产生 js文件 然后扫描其覆盖范围 每个 ts文件得到一个 js文件就在它旁边 在同一位置 我将扫描仪指向lcov info文件如下 sonar jav
  • jssor 与 Angular 2 Typescript

    我正在使用 Angular 2 开发一个网站 此时 我已经购买了 Jssor 的订阅 以便为运行到同一页面的 3 个以上单独的滑块生成图像滑块 我当前的问题是文档加载后生成的动态滑块 但未显示 我在 npmjs com 中找到了 jssor
  • 如何在R中绘制完整的图?

    我想在 R 中绘制完整的图表 我怎样才能做到这一点 我在 CRAN 上发现只有一个包具有生成完整图表的功能 但是这个包 即 RnavGraph 没有安装 而是以错误状态退出 进一步搜索似乎很困难 因为图的含义不同 图不仅与图结构相关 而且还
  • 修改颜色选择器面板

    我正在创建一个颜色选择器 需要修改其中一个颜色选择器面板 我想要的是 我想通过 RGB 字段输入输入值来设置颜色 问题是 RGB 值似乎被禁用 api 中是否有一种方法可以打开 RGB 输入以获取值 这里看起来不错 import javax
  • CSS3 中是否有相当于 jQuery 的 :first 选择器?

    我有以下标记 div class a div div class b div div class b div div class b div div class c div 我正在尝试瞄准first and last div 与类b 如果我