设置列表中前 10 项的样式

2024-06-02

可以使用像 li:nth-child 这样的东西来设置列表中前十项的样式吗?

<ol>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
  <li>item 9</li>
  <li>item 10</li>
  <li>item 11</li>
  <li>item 12</li>
</ol>

所以 1 到 10 是花式的,11 和 12 是普通的。 如果可能的话,我宁愿不使用课程。


第 n 个孩子的例子:

:nth-child(-n+10)

这在这里工作:link http://css-tricks.com/examples/nth-child-tester/.

有关理解这一点的更多信息请查看此site http://css-tricks.com/how-nth-child-works/.


我想如果你想要 IE 支持,我真的无法让这个变得更漂亮。至少我不知道如何使用这个廉价的黑客。

ul>li + li + li + li + li + li + li + li + li + li + li{
    text-align: center; /*makes everything after 10 centered*/

}​

http://jsfiddle.net/TzLqZ/ http://jsfiddle.net/TzLqZ/上面的例子


这是 IE 方式,前 10 个为中心,后 2 个为普通:http://jsfiddle.net/TzLqZ/3/ http://jsfiddle.net/TzLqZ/3/

ol>li{
    text-align: center;
    color: blue;
}
ol>li+li+li+li+li+li+li+li+li+li+li
{
    text-align: left;
    color: red;
}

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

设置列表中前 10 项的样式 的相关文章

  • 文本区域标签垂直对齐:中间

    我试图将此文本区域的标签对齐在文本框的中间 但它不起作用 输出看起来像这样 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx
  • 有选择地格式化 PowerShell 管道中的数据并输出为 HTML 的技术

    假设您想要对 powershell 的某些表格输出进行一些奇特的格式化 并且目标是 html 用于网络服务器 或者通过电子邮件发送 举例来说 您希望某些数值具有不同的背景颜色 任何 我可以想到两种可靠的编程方法来实现此目的 输出 XML 并
  • ie7-8 的 Rem 后备

    我在所有 现代 网站中使用 rem 单位 为了使其与 ie7 8 兼容 我使用了 less 函数 font size 10 输出 font size 10px font size 1rem 由于我使用 rem 来处理实际的所有内容 宽度 顶
  • 将 CSS 应用于括号(圆括号)中的段落中的单词

    各位 情况是这样的 中的话 span 元素来自资源键 括号内的 CSS 需要略有不同 例如 span Hello this a wonderful resource I mean it span 现在的要求是 我的意思是 应该比其他单词的字
  • 不使用 JS 防止图像可拖动或可选择

    有谁知道如何在 Firefox 中同时使图像不可拖动且不可选择 而不需要求助于 Javascript 看似微不足道 但问题是 可以在 Firefox 中拖动并突出显示 所以我们添加了这个 但是拖动时图像仍然可以突出显示 所以我们添加这个来解
  • 拖动时如何改变光标?材质 CDK 拖放

    使用 Material CDK 库中的拖放行为 我尝试在拖动cdkDrag元素 例如 在这个堆栈闪电战 https stackblitz com edit angular b8kjj3光标是grab悬停时 我想把它改为grabbing拖动时
  • 在 CSS 中创建背景图案

    我有以下图片 其中有这个有角度的条纹图案 我想知道如何使用 CSS 作为背景图案来创建这个图案 干杯 英语 编辑 我在代码笔中添加了第二个示例 与已经给出的答案类似 但添加了避免梯度的内容 http codepen io anon pen
  • 根据输入字段的字符数动态扩展输入类型“文本”的高度

    与下面的 JSFiddle 类似 我将其添加为书签 但不知道原始问题从哪里出现 http jsfiddle net mJMpw 6 http jsfiddle net mJMpw 6
  • 具有最大高度的 div 内的表格

    我想要一个可滚动的表格 为了实现这一点 我包装了一个 table into a div with a max height and overflow auto 除此之外 div has display inline block以确保 div
  • html5标签“Contenteditable”的css选择器[重复]

    这个问题在这里已经有答案了 如何使用 contenteditable true 的 css 选择器 div div Use a CSS 属性选择器 https developer mozilla org en docs Web CSS At
  • 如何使用javascript将div从左向右移动

    I have div named movingImage每次单击按钮时我都想向右移动 50px 这是我的 JavaScript function moving Image document getElementById movingImag
  • 如何禁用 html 中特定元素的复制

    在这里 当选择 3 个元素时 我遇到了复制选项的问题 所有三个元素都被复制 但是 我有一个 Jquery 函数来禁用中间元素的复制 我如何在选择 3 个元素时禁用它 但是 如果我单独选择中间元素 它就不会复制 notcp bind cut
  • Angular 5 材质小吃栏

    我遇到的问题是 小吃栏组件在初始化时附加在 cdk global overlay wrapper 外部 位于 cdk overlay container 内 这使得它在屏幕中间瞬间可见 然后它消失并重新附加到 cdk global over
  • 为了提高性能,我应该将 javascript 和 css 文件合并为一个吗? [复制]

    这个问题在这里已经有答案了 YSlow 报告表明 我在特定页面上有许多 javascript 文件 这些文件应该合并为一个 我在特定页面上有许多 css 文件 这些文件应该合并为一个 Q1 任何机构都可以详细说明这一点 如何才能快速地将它们
  • 使用 javascript 加载不同的 CSS 样式表

    我需要使用 javascript 根据正在传递的 URL 变量加载不同的样式表 场景是这样的 我们需要使用一个 CSS 样式表和一个不同的样式表来维护一个移动网站 当通过 iOS 应用程序中加载的 Web 视图访问该页面时 该样式表将用于设
  • HTML 文本下方的白点

    我在网站上的输出在文本下方有点 为什么会出现以及如何删除它 HTML p align center font size 4 5 color 979C91 a href customer html span class fa fa penci
  • 为什么视口宽度与实际显示宽度不匹配?

    Chrome 显示我的视口宽度为 1280px 然而 我的实际显示分辨率是2560x1600px 我使用的机器是13 3英寸的MacBook Pro 为什么视口不是 2560px 宽 使用没有任何区别 my display settings
  • 将jQueryUI datepicker附加到div(显示位置错误)

    我在输入上使用 jQueryUI datepicker 默认情况下 jQueryUI 会附加 ui datepicker div to the body该文件的 有问题的输入位于屏幕上的 弹出 div 中 这意味着该 div 之外的任何点击
  • 滚动条宽度:细在 Firefox 中不起作用

    我刚刚在 Firefox 67 中实现了新的 css 滚动条颜色和滚动条宽度 滚动条宽度不起作用 无论我将其设置为自动 细化还是无 它都会显示相同的宽度 我想要它薄 但它不薄 我是这样实现的 root scrollbar color rgb
  • css bootstrap 下拉菜单在 IE 中看起来不同

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

随机推荐

  • python 3.4 计算 .txt 文件中的出现次数

    我正在为我正在上课的课程编写一个 简单 的小程序 这应该询问我要搜索哪个团队 然后返回它出现在 txt 文件列表中的次数 它像它应该的那样请求输入 并且看起来运行得很好 它现在已经运行了一个小时 我完全没有收到任何错误 它似乎陷入了循环 预
  • 图像分析-光纤识别

    我是图像分析新手 您知道如何以仅获取纤维的方式对该图像进行二值化吗 我尝试过不同的阈值技术等 但没有成功 我不介意应该使用什么工具 但我更喜欢 NET or Matlab PS 我不知道该把答案放在哪里 所以我把它放在StackOverfl
  • scrapy:当蜘蛛退出时调用函数

    有没有办法在 Spider 类终止之前触发该方法 我可以自己终止蜘蛛 如下所示 class MySpider CrawlSpider Config stuff goes here def quit self Do some stuff ra
  • 使用 Swagger UI 进行基本身份验证

    我正在尝试通过 Swagger UI 开发一个基于 spring boot 的 REST API 服务以及 API 文档 我想通过 swagger UI 启用基本身份验证 以便用户只有在使用 swagger UI 上的 授权 按钮进行身份验
  • 匿名、身份验证、模拟和委派之间有什么区别,为什么委派需要 Kerberos?

    当我们的客户安装我们的软件时 他们通常选择 拆分安装 其中服务在一个机器上运行 数据库在另一个机器上 这些服务可能与其他服务通信 或者数据库可能包含需要与另一个数据库通信的存储过程 这将我们带入了 Kerberos 和 SetSPN 的黑暗
  • jQuery 多部分表单验证

    当我解决这个问题时 这可能会变成多个问题 但我需要一些认真的 jQuery 帮助 我已经根据示例创建了一个多部分表单bassistance de http jquery bassistance de validate demo multip
  • Onsen-UI 滑动导航 [关闭]

    Closed 这个问题需要调试细节 help minimal reproducible example 目前不接受答案 我试图弄清楚如何通过使用 滑动 导航在 Onsen UI 上实现 android 感觉 我尝试实施危险的刷卡器 但运气不
  • 将 mysql LONGTEXT 值转换为 VARCHAR 值?

    我有一个在用户 Facebook 墙上发布的功能 我发送到 facebook 的一件事是我从设置为 LONGTEXT 的 mysql 表中获取的一些文本 如果我将表设置为 LONGTEXT 则文本不会发送到 facebook 但如果我将表设
  • Expo 应用程序“您的应用程序正在使用广告标识符 (IDFA)”

    我正在尝试将应用程序上传到应用程序商店 每次我上传二进制文件时 苹果都会坚持认为我的应用程序正在使用广告 而我从未实现过这样的事情 我查看了文档并删除了涉及的所有代码ASIdentifier and adIdentifier我不太确定我错过
  • AWS Lambda - Nodejs 函数不会返回数据

    我是 NodeJS 函数调用的新手 我已经在屏幕上敲了几个小时了 我所有的谷歌搜索都没有帮助 所以我有一个 AWS Lambda 函数 它接收一个带有单个 ID 号的 JSON 对象 该 ID 号将被传递并最终作为 myid 发送到 get
  • python多重继承,调用基类函数

    我只是尝试在 python 中进行多重继承 我想出了这个 class ParentOne def foo self print ParentOne foo is called class ParentTwo def foo self pri
  • ASP.NET MVC 路由如何工作?

    我定义了以下路线 public static void RegisterRoutes RouteCollection routes routes IgnoreRoute resource axd pathInfo routes MapRou
  • 为什么这个跨域ajax调用实际上有效?

    我无意中写了一个跨域AJAX调用NextBus http www nextbus com xmlFeedDocs NextBusXMLFeed pdf 使用 jQuery ajax url http webservices nextbus
  • ObjC <-> Swift 桥接和工厂方法

    我想从 Swift 使用一些 Objective C 类 由于超出了这个问题范围的原因 我的班级init方法被标记为不可用 相反 有一个工厂方法 这是我的班级的简化形式 interface MyClass NSObject instance
  • 如何使用运算符[]创建模拟类?

    我正在上课operator 像这样 class Base public virtual Base virtual const int operator const unsigned int index const 0 如何使用谷歌模拟框架为
  • 解析子串?

    我正在尝试使用 parseInt 方法转换字符串的前两个字符 但我不能 它应该看起来像这样 String firstChars IntMessage substring 0 2 firstChars is a String that cor
  • 提交简单 PHP 表单时出现禁止错误

    我有一个不复杂的问题 这似乎比应有的更复杂 我有一个简单的表单 用于向网站添加内容 有些字段需要输入html 然而 当您在表单的不同部分输入某些 html 元素时 它会认为它讨厌您并抛出禁止的 403 错误 这是下面的表格
  • 如何检查 Xcode 使用的 LLVM 编译器版本?

    我在 OS X 10 8 2 上使用 Xcode 4 5 2 我如何知道 Xcode 使用的是哪个版本的 LLVM 编译器 从命令行 07 40 35 andrew iMac SalesIQ siq 303 llvm gcc v Using
  • TRichEdit和URL高亮问题

    我正在使用当前代码在 TRichEdit 上突出显示 URL procedure TForm1 WndProc var Message TMessage var p TENLink strURL string begin if Messag
  • 设置列表中前 10 项的样式

    可以使用像 li nth child 这样的东西来设置列表中前十项的样式吗 ol li item 1 li li item 2 li li item 3 li li item 4 li li item 5 li li item 6 li l