CSS3选择器:带有类名的第一个类型?

2023-11-22

是否可以使用 CSS3 选择器:first-of-type选择具有给定类名的第一个元素?我的测试没有成功,所以我想是不是?

代码 (http://jsfiddle.net/YWY4L/):

p:first-of-type {color:blue}
p.myclass1:first-of-type {color:red}
.myclass2:first-of-type {color:green}
<div>
  <div>This text should appear as normal</div>
  <p>This text should be blue.</p>
  <p class="myclass1">This text should appear red.</p>
  <p class="myclass2">This text should appear green.</p>
</div>

不,不可能只使用一个选择器。这:first-of-type伪类选择其第一个元素type (div, p, ETC)。将类选择器(或类型选择器)与该伪类一起使用意味着选择具有给定类(或给定类型)的元素and是同类产品中的第一个。

不幸的是,CSS 没有提供:first-of-class仅选择类的第一次出现的选择器。作为解决方法,您可以使用如下内容:

.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default, or inherited from parent div */; }

给出了解决方法的解释和插图here and here.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS3选择器:带有类名的第一个类型? 的相关文章

  • Google 再营销标签 - iframe 高度问题

    我注意到 Google 的再营销代码会在我的页面底部插入一个 iframe 问题是 iframe 弄乱了我的布局 它的高度为 13 像素 并且在底部留下了空白的白色垂直空间 我尝试用 css 隐藏它 但它在 IE9 中仍然可见 iframe
  • 显示班级图片 10 秒

    我有下面给出的代码显示9 boxes 其值如下digital time 还有一个班级box002显示digits相当于随机选择的九个盒子的值 box002 can be dragged to digital time starting wi
  • 文本后面有粗下划线

    如何使用 span 和 css 在文本 ABC 后面重现这种下划线 我已经能够做下划线below嵌套的文本span和彩色的border bottom 但无法获取behind图像和above文本基线 p style font size 48p
  • 如何设置旋转元素背面的样式?

    我有一个figure它是可旋转的 通过用户输入任意角度 该旋转明显地使用transition财产 当该元件旋转超过 90 度 90 度时 元件的背面可见 我想对元素的通常隐藏的一面进行与正面不同的设计 但我不确定如何实现这一点 figure
  • 响应式导航栏隐藏其下方的元素

    我创建了一个响应式导航栏 但它使下面的元素 Flexslider 插件 消失 在我制作导航栏之前 下面的 Flexslider 可以正常显示 但现在不行 导航栏的 z index 为 2 所以我不知道问题是什么 我应该如何 更改什么才能允许
  • CSS 的波浪形状

    我正在尝试使用 CSS 重新创建此图像 我不需要重复它 这就是我开始的 但它只有一条直线 wave position absolute height 70px width 600px background e0efe3 div div 我认
  • 我可以在 CSS 类名中使用驼峰命名法吗

    我想命名一个 CSS 类并调用它imgSuper 我可以在 CSS 类中使用驼峰命名法吗 从技术上讲是可以的 但这是有风险的 因为虽然 CSS 语法大多不区分大小写 但在某些浏览器中 在某些条件下 类名被视为区分大小写 因为规范没有指定浏览
  • IE7 显示问题:菜单中的表格

    我写了一个菜单样式 在 IE8 FF3 6 GC7 中运行良好 现在的问题是 我的老板希望它甚至可以在 IE7 上运行 我真的很努力地让它在 IE7 上运行 但无法获得相同的外观 menu css a outline none menu m
  • 使用 CSS 的平行四边形导航背景

    我正在尝试创建此导航菜单 绿色突出显示是活动页面 灰色是悬停状态 我可以使用以下 CSS 制作平行四边形 ul nav li a text decoration none padding 4px 10px border radius 3px
  • CSS 中的像素与像素密度

    我对 HTML 和 CSS 非常陌生 我突然想到 当决定某个东西是 5px 时 比如说 由于像素的物理尺寸取决于密度 所以 5px 在 100 ppi 的屏幕上看起来肯定比在 300 ppi 的屏幕上看起来更大ppi 这是正确的吗 如果是
  • 垂直对齐复选框标签? [复制]

    这个问题在这里已经有答案了 我有这样的复选框
  • 如何在使用页面锚点导航时设置“激活”类以在 Angular 2 中引导导航栏?

    我正在使用 Angular 2 和 Bootstrap 4 创建一个单页网站 我创建了一个始终位于页面顶部的导航栏组件 并且我正在使用页面锚点导航 id 请注意 我还没有创建路由模块 到目前为止还没有必要这样做 导航栏代码如下
  • 如何阻止破折号自行包裹?

    我有一个标题 标题最后一个单词的末尾是一个破折号 单词和破折号之间没有空格 当浏览器窗口变小时 破折号会中断并换成新行 在自己的行上有一个破折号是不好的排版 如何停止破折号之前的换行 以便最后一个单词运行到新行 这是代码 h1 XYZ co
  • CSS 是否有不等于选择器?

    CSS中有类似 不等于 的东西吗 例如 我有以下代码 input 但对于某些输入 我需要将其作废 我想通过将类 reset 添加到输入标签来做到这一点 例如
  • Vuetify 等高 v-tab-items

    请告知如何使 vuetify v tabs 内容显示在等高块中 我在文档中找不到该组件的选项可以帮助高度对齐 By default v tab item height depends on its own content height 布局
  • 使用 Javascript 从 CSS 文件中提取颜色

    我正在上传一个 css 文件 希望从中记录引用的每种颜色 所以如果 css 文件有 background color ffffff color 000000 我希望能够创建一个包含以下内容的列表 ffffff 000000 这样做的最好方法
  • Firefox 插件查找未使用的 CSS 样式[重复]

    这个问题在这里已经有答案了 可能的重复 识别未使用的 CSS 定义的工具 https stackoverflow com questions 135657 tool to identify unused css definitions 假设
  • 通过 SVG 背景传递鼠标事件

    我有两个 SVG 元素 每个元素覆盖整个屏幕 html body height 100 svg position absolute top 0 left 0 bottom 0 right 0
  • HTML 覆盖高度覆盖整个可见页面

    我有一个使用 AJAX 加载一些内容的网页 我想在加载过程中显示带有加载指示器的覆盖层 以便用户无法与页面的大部分内容交互 除了顶部的菜单 我正在使用 jQuery 和jQuery BlockUI 插件 http malsup com jq
  • Firefox:如何测试首选颜色方案?

    在 Firefox 67 中 可以使用媒体查询来检测用户对浅色或深色主题的偏好 https davidwalsh name demo prefers color scheme php 在我的 Firefox 版本 在 Ubuntu 下 中

随机推荐

  • 指针是否保证>某个值?

    在 C 中 当我这样做时new 甚至malloc 是否能保证返回地址大于某个值 因为 在这个项目中 我发现使用 0 1k 作为枚举非常有用 但如果有可能获得这么低的值 我不想这样做 我唯一的目标系统是 32 位或 64 位 CPU 操作系统
  • lxml 标签名称带有“:”

    我正在尝试使用 lxml etree 从 JSON 对象创建 xml 树 有些标记名中包含冒号 例如 设置 当前 我尝试使用 settings current 作为标签名称 但我得到这个 ns0 当前 xmlns ns0 设置 是的 首先阅
  • django 2 中的迁移错误; AttributeError:“str”对象没有属性“decode”

    我正在我新建的名为 core 的应用程序上运行迁移 当我在其上运行迁移时 我收到一个错误 告诉我这一点 query query decode errors replace AttributeError str object has no a
  • LXML:无法导入 etree

    我访问此页面并下载了 tar 文件 http pypi python org pypi lxml 2 3 4 downloads 然后 我将 lxml 文件夹复制到我的 Python26 Lib 文件夹中 现在 当我走向口译员并输入from
  • 使用 RESTlet 进行细粒度身份验证

    我想使用带有细粒度身份验证的 RESTlet 公开资源 我的ServerResource应该可以通过访问GET仅适用于经过身份验证的会员 使用基本身份验证 但是 请求使用POST无需任何身份验证的呼叫者也应该可以使用 为了澄清 http 路
  • 在WebKit/Chrome中使用XHR上传二进制字符串(相当于Firefox的sendAsBinary)

    我正在开发一个使用多个尖端 WebKit 功能的 Web 应用程序 它本质上是这样做的 读取本地文件FileReader 使用 JavaScript 解压缩库将每个文件解压缩为字符串 并使用 XMLHttpRequest POST 每个文件
  • Google AppEngine:自定义身份验证

    我可以使用 Google 帐户在 AppEngine 中验证我的用户的方式简直太棒了 但是 我需要使用我的自定义认证登录系统 我将有一个 AppUsers 表 其中包含用户名和加密密码 我在 gae 上读到了一些有关会话的内容 但我需要帮助
  • 使div的高度随着其内容而扩展

    我有这些嵌套的 div 我需要主容器扩展 高度 以容纳内部的 DIV
  • 错误的ELF类:ELFCLASS32(可能原因:架构字宽不匹配)

    我有一个奇怪的异常 说 ELF 类错误 但包装器设置正确 要使用比利时身份证发行商官方网站上的 SDK 读取比利时身份证 http eid belgium be en binaries beid sdk 3 5 3 ubuntu 9 10
  • django 中的分页 - 原始查询字符串丢失

    我使用文档中的代码对数据进行分页 try data paginator page request GET get page except PageNotAnInteger page 1 data paginator page 1 excep
  • 锥体图像细化

    为了制作一个漂亮的与平面相交的圆锥体三维图形 我选择对 Mathematica 中的现有方法 即 S Mangano 和 S Wagon 的书籍 进行轻微的重新排列 下面的代码假定显示所谓的丹德林结构 内球体和外球体与圆锥体内部相切 并且与
  • 如何在 javascript 中使用 python 变量?

    我一直在寻找一种使用 selenium 的网络驱动程序访问不可见文本字段的方法 我让它工作的唯一方法是使用 driver execute script document getElementById text field value XYZ
  • Stringify 一级宏展开 C

    是否可以将此 C 宏字符串化 define GPIO INT PIN GPIO PORT D GPIO PIN IRQ RISING GPIO PIN5 使用类似的东西 MY STRINGFY GPIO INT PIN to get GPI
  • 计算“查找”结果的最佳方法是什么?

    我当前的解决方案是find
  • Python:两个相同长度列表的元素连接

    我有两个相同长度的列表 a 1 2 2 3 3 4 b 9 10 11 12 13 19 20 并想将它们结合起来 c 1 2 9 2 3 10 11 3 4 12 13 19 20 我这样做是通过 c for i in range 0 l
  • python pandas 解析带有月份名称的日期时间字符串

    有人可以向我指出一种格式或代码片段来解析格式如下的日期吗 04SEP12 00 00 00 That dd mm YY HH MM SS不起作用 使用格式字符串 d b y H M S 并将其作为格式传递to datetime 您可以在中找
  • iOS - 在 Localized.strings 中用粗体字符串强调

    有没有办法像这样在可本地化文件中加粗一些单词 Pending network connection b Pending b network connection 我里面有这个字符串 我只想强调某些单词 camSave To complete
  • 半屏视图,iOS 侧边栏菜单

    因为我想在屏幕左侧显示许多菜单 就像下面一样 这是一个新的 Facebook 应用程序 当您单击其周围显示为红色方块的栏时 左侧的列表视图将在之后出现在我的应用程序中滑动右侧部分是否有任何 SDK 可以添加此内容 请帮助我 看看吧 http
  • 从 HTML 导出到 PDF (C#) [重复]

    这个问题在这里已经有答案了 可能的重复 在 NET 中将 HTML 转换为 PDF 在我们的应用程序中 我们制作 html 文档作为报告和导出 但现在我们的客户想要一个将该文档保存在他们的电脑上的按钮 问题是该文档包含图像 您可以使用以下代
  • CSS3选择器:带有类名的第一个类型?

    是否可以使用 CSS3 选择器 first of type选择具有给定类名的第一个元素 我的测试没有成功 所以我想是不是 代码 http jsfiddle net YWY4L p first of type color blue p myc