开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用第n个子元素和Bootstrap来选择仅具有CSS的偶数元素

，可以使用Bootstrap的CSS类来实现。

首先，Bootstrap提供了一些CSS类来选择元素，其中包括.nth-child()和.even。

.nth-child()类可以选择指定位置的子元素，语法为:nth-child(n)，其中n为要选择的子元素的位置。例如，:nth-child(2)选择第二个子元素。

.even类可以选择偶数位置的子元素。例如，.even选择第二个、第四个、第六个等偶数位置的子元素。

结合这两个类，可以使用以下方式选择仅具有CSS的偶数元素：

<div class="container">
  <div class="row">
    <div class="col-md-6">Element 1</div>
    <div class="col-md-6 even">Element 2</div>
    <div class="col-md-6">Element 3</div>
    <div class="col-md-6 even">Element 4</div>
    <div class="col-md-6">Element 5</div>
    <div class="col-md-6 even">Element 6</div>
  </div>
</div>

在上面的示例中，使用了Bootstrap的栅格系统来创建了一行，每个子元素都使用了.col-md-6类来占据一半的宽度。通过给偶数位置的子元素添加.even类，可以实现仅选择具有CSS的偶数元素。

这种方法适用于需要选择偶数元素并对其应用特定样式的情况，例如设置不同的背景颜色、边框样式等。

腾讯云相关产品和产品介绍链接地址：

相关搜索:CSS -选择具有相同标记名和属性的其他元素中的特定元素 CSS:无法使用第n个子对象指定具有特定属性的div CSS:第n个子元素和第n个类型在我的标记结构中不起作用 CSS规则中第n个子元素的索引？CSS选择父级的第n个直接子元素 JQuery:如何选择第n个子元素之后的所有子元素并放入新元素？Webdriver IO -找不到具有CSS选择器和ID的元素仅使用CSS垂直堆叠具有绝对定位的元素使用css选择器，如何使用它的类获取元素的第n个子元素使用第n个子元素为JavaScript的行和列选择特定单元格后，不会创建输入元素

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

jquery获取第几个子元素_js获取元素的指定子元素

通过children方法，children(“input:first-child”)

03

CSS 01 准备选择器、伪元素

a:link{} a:visited{} a:hover{} a:active{} UI元素状态伪类选择器 html部分：

04

CSS选择器详解

最近在做一些面试的工作，我经常会问的一个问题就是：CSS中有哪些选择器。我往往得到的答案就是id选择器啊、class选择器啊，再追问下去就没了，这让我很是意外！看来这基础的东西，大家都说很重要，可真正能静下心来去看的并不多，更别说在项目中灵活使用了！元素选择器通配选择器 * { sRules } 选定文档所有的元素 /** 设置所有元素为红色 **/ * { 　　color: red; }

我是p

类型选择器 E { sRules } 选定指定的文

04

一篇文章带你了解CSS Pseudo-classes(伪类 )

CSS伪类选择器根据其他条件匹配组件，而不一定由文档树定义。CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。

01

css选择器选择奇数行或偶数行

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

01

常用的CSS3选择器

CSS选择器的作用就是从HTML页面中找出特定的某类元素。常用的几类CSS选择器如下表所示。

02

CSS3选择器 | 每个前端开发者必须要掌握的技术

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/157484.html原文链接：https://javaforall.cn

01

css3 nth-child选择器

大概大家都知道上面的使用方法，但是有一点搞不清楚的话，使用起来就会很困惑。那就是n是什么？

02

结构伪类选择器-CSS3新特性

ul li:first-child { background-color: green; } 这种写法什么都不会选出来，因为ul标签下的第一个子元素是p,不是li,所以不会有元素被选出来。逻辑来说的话就是：它会先找到ul下的第一个子元素，然后去和li比较，发现标签类型不符合，所以就不会选择

03

第91天：CSS3 属性选择器、伪类选择器和伪元素选择器

除了以前学过的:link、:active、:visited、:hover，CSS3又新增了其它的伪类选择器。

03

jQuery选择器大全(48个代码片段+21幅图演示)

选择器是jQuery最基础的东西，本文中列举的选择器基本上囊括了所有的jQuery选择器，也许各位通过这篇文章能够加深对jQuery选择器的理解，它们本身用法就非常简单，我更希望的是它能够提升个人编写jQuery代码的效率。本文配合截图、代码和简单的概括对所有jQuery选择器进行了介绍，也列举出了一些需要注意和区分的地方。一、基本选择器 1. id选择器（指定id元素）将id="one"的元素背景色设置为黑色。（id选择器返单个元素） $(document).ready(function () {

08

jQuery选择器大全

选择器是jQuery最基础的东西，本文中列举的选择器基本上囊括了所有的jQuery选择器，也许各位通过这篇文章能够加深对jQuery选择器的理解，它们本身用法就非常简单，我更希望的是它能够提升个人编写jQuery代码的效率。本文配合截图、代码和简单的概括对所有jQuery选择器进行了介绍，也列举出了一些需要注意和区分的地方。

01

CSS选择器如此之多，你了解多少？

css选择器非常之多，常见的如class选择器，id选择器，标签选择器等等。每个的用法都有所区别，虽然很多都能到达同样的效果，但还是有一些更优的选择。

02

前端成神之路-HTML5CSS3_01

一、什么是 HTML5 HTML5 的概念与定义定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML 两个概念：是一个新版本的 HTML 语言，定义了新的标签、特性和属性拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5 HTML5 拓展了哪些内容语义化标签本地存储兼容特性 2D、3D 动画、过渡 CSS3 特性性能与集成 HTML5 的现状绝对多数新的属性，

01

CSS基础知识

CSS全称（Cascading Style Sheets）称为层叠样式表，他的存在使 HTML 与样式分离。

01

CSS选择器

在模块定义不太稳定的阶段，浏览器会采用厂商前缀实现某个特性。它允许早起采纳者试用浏览器实现的新属性。

05

「HTML&CSS」第一部分

请注意，本文编写于 2126 天前，最后修改于 174 天前，其中某些信息可能已经过时。

02

HTML学习笔记——css基础

缺点：使用内联样式，样式只能对一个标签生效，如果希望影响到多个元素必须在每一个元素中都复制一遍，并且当样式发生变化时，要多次修改，很麻烦。

02

css3选择器

属性选择器 E[attr]只使用属性名，但没有确定任何属性值 E[type="text"]指定属性名，并指定了该属性的属性值 E[attr~="value"]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写 E[attr^="value"]指定了属性名，并且有属性值，属性值是以value开头的 E[attr$="value"]指定了属性名，并且有属性值，而且属性值是以value结束的 E[attr="value"]指定了属性名，并且有属性值，而且属值中包含了value 结构性伪类选择器 E:nth-child(n) 表示E父元素中的第n个字节点 p:nth-child(odd){background:red}/匹配奇数行/ p:nth-child(even){background:red}/匹配偶数行*/ p:nth-child(2n){background:red} E:nth-last-child(n) 表示E父元素中的第n个字节点，从后向前计算 E:nth-of-type(n) 表示E父元素中的第n个字节点，且类型为E E:nth-last-of-type(n)表示E父元素中的第n个字节点，且类型为E,从后向前计算 E:empty 表示E元素中没有子节点。注意：子节点包含文本节点 E:first-child 表示E元素中的第一个子节点==nth-child(1) E:last-child 表示E元素中的最后一个子节点 E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的 E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的 E:only-child表示E元素中只有一个子节点。注意：子节点不包含文本节点 E:only-of-type 表示E的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：子节点不包含文本节点

02

前端学习(15)~css3学习(九)：选择器详解

CSS3在CSS2基础上，增强或新增了许多特性，弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。

02

总结伪类和伪元素（转）

先说一说为什么css要引入伪元素和伪类，以下是css2.1 Selectors章节中对伪类与伪元素的描述：

02

jquery高级选择器第一部分

上一篇简单的介绍了jquery的基础选择器,准备把高级选择器部分分为三篇博文介绍!慢工出细活吗,循序渐进相信jq会和css一样顺手,废话不少了接下来开始介绍jq的高级选择器第一部分!

02

jQuery（选择器）

注意：但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)；

01

jQuery选择器大全(48个代码片段+21幅图演示)2

4. 属性过滤选择器 ——4.1 [attribute]（取拥有attribute属性的元素）下面的代码，最后一个a标签没有title属性，所以它仍然会带下划线 <script type="text

08

【CSS】381- 提升你的CSS选择器技巧

我为什么要这样做呢？我们都知道选择器，但麻烦的是随着时间的推移，很容易习惯于在每个项目中使用相同的可信任选择器来实现你需要做的事情。

04

CSS魔法堂：选择器及其优先级

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　首先看看一道阿里这期网申的题目吧！ 1.找出下面优先级相同的选择器　　A. img.thumb:after　　B.[data-job="frontend"]::first-letter 　　C. #main::before　　 D. [type="checkbox"]:checked　　E. ul#shop-list 二、回顾选择器类型　　　　　　　　　　　　　　　　　　　　　 html片段 <bo

06

CSS 1.0~3.0选择器（下）

HTML5学堂：对于CSS选择器我们熟悉了CSS1.0~CSS2.0的使用，我们那么有些选择器还是无法简单获取某元素，对于CSS3的选择器的产生，让我们更加方便的获取元素，本文讲解了CSS3的选择器有哪些，希望整理好的CSS3选择器对大家有帮助！谢谢！ 6.CSS 3的同级元素通用选择器选择器含义示例E ~ F匹配任何在E元素之后的同级F元素p ~ ul { background:#ff0; } 7．CSS 3 属性选择器选择器含义示例E[att^=”val”]属性att的值以”val”开头的元素di

03

CSS中的伪类

CSS（Cascading Style Sheets，层叠样式表）是Web开发中不可或缺的一部分。它用于控制网页的外观和布局，使得网页不仅功能强大，还具有吸引力。在CSS中，伪类（Pseudo-classes）是一种强大的工具，能够选择和样式化那些在普通选择器无法触及的元素状态或特性。本文将深入探讨CSS中的伪类，分析其重要性、应用场景和具体实现方法。

01

CSS3选择器–结构性伪类选择器

在学习结构性伪类选择器之前，先了解2个概念：CSS中的伪类选择器和伪元素：

01

Bootstrap实用手册

Responsive Web Page，响应式网页/自适应网页，即一个页面既可以在 PC 浏览器中浏览，也可以在手机、平板中浏览，并且配合不同设备有不同的响应结果，响应式网页的特点：

02

CSS第四天-浮动

1、浮动的元素找相邻浮动的元素，顶部对齐，在同一行内显示要浮动都浮动（加强版的行内块）

04

CSS3新增选择器

都知道css有三个简单常用的选择器，#id、class和标签选择器。但是css3又新增了一些选择器，可以减少结构代码中ID属性和class属性的定义。使用它们可以减少不少冗杂的代码，便捷开发。下面介绍：

04

jQuery选择器和选取方法

我们已经使用了带有简单Css选择器的jQuery选取函数:$()。现在是时候深入了解jQuery选择器语法，以及一些提取和扩充选中元素集的方法了。

04

jquery选择器用法_jQuery属性选择器

一、基本选择器 1. ID选择器 ID选择器#id就是利用DOM元素的id属性值来筛选匹配的元素，并以iQuery包装集的形式返回给对象。使用公式:(“#id”) 示例：(“#box”) //获取id属性值为box的元素 2. 元素选择器元素选择器是根据元素名称匹配相应的元素。元素选择器指向的是DOM元素的标记名，也就是说元素选择器是根据元素的标记名选择的。使用公式：(“element”) 示例：(“div”) //获取所有div元素 3.类名选择器类选择器是通过元素拥有的CSS类的名称查找匹配的DOM元素。在一个页面中，一个元素可以有多个CSS类，一个CSS类又可以匹配多个元素，如果有元素中有一个匹配类的名称就可以被类选择器选取到。简单地说类名选择器就是以元素具有的CSS类名称查找匹配的元素。使用公式：(“.class”) 示例：(“.box”) //获取class属性值为box的所有元素 4.复合选择器复合选择器将多个选择器（可以是ID选择器、元素选择器或是类名选择器）组合在一起，两个选择器之间以逗号”,”分隔，只要符合其中的任何一个筛选条件就会被匹配，返回的是一个集合形式的jQuery包装集，利用jQuery索引器可以取得集合中的jQuery对象。注意：多种匹配条件的选择器并不是匹配同时满足这几个选择器的匹配条件的元素，而是将每个匹配的元素合并后一起返回。使用公式：(“selector1,selector2,……,selectorN”) selector1:一个有效的选择器，可以是ID选择器、元素选择器或类名选择器等 selector2:另一个有效的选择器，可以是ID选择器、元素选择器或类名选择器等 selectorN:（可选择）任意多个选择器，可以是ID选择器、元素选择器或类名选择器等示例：(“div,#btn”) //要查询文档中的全部的

元素和id属性为btn的元素 5.通配符选择器

03

CSS笔记(20) 非常重要

HTML的新增特性主要是针对于以前的不足,增加了一些新的表单,新的标签和新的表单属性等.

02

css3选择器总结[通俗易懂]

优先级：离标签越近的选择器优先级越高，所以相同权重的样式后者才生效；内联样式表>头部样式表>导入样式表。

01

你了解css3的nth-child吗

:nth-child(n) 选择器匹配属于其父元素的第 n 个子元素，借助这个特性，可以实现选择第偶数次序的子元素、选择一定范围内的子元素等“批量选择操作”。

02

这30个CSS选择器，你必须熟记（下）

在上两篇文章里，《这30个CSS选择器，你必需熟记（上）》和《这30个CSS选择器，你必需熟记（中）》这两篇文章里，我们一起学习了前20个，本篇文章我们一起学习剩下的10个选择器。

02

这30个CSS选择器，你必须熟记（下）

在上两篇文章里，《这30个CSS选择器，你必需熟记（上）》和《这30个CSS选择器，你必需熟记（中）》这两篇文章里，我们一起学习了前20个，本篇文章我们一起学习剩下的10个选择器。

00

JQuery 隔行换色实现

在前端的设计中，页面的美观性是至关重要的。而其中一个简单而实用的设计技巧就是隔行换色。通过巧妙地使用 JQuery，我们可以轻松地实现这一效果，为网页增添一份优雅。本篇博客将详细解析 JQuery 隔行换色的实现原理和应用场景，让我们一起揭开这段前端小巧妙的技艺。

01

【Java 进阶篇】JQuery 案例：优雅的隔行换色

在前端的设计中，页面的美观性是至关重要的。而其中一个简单而实用的设计技巧就是隔行换色。通过巧妙地使用 JQuery，我们可以轻松地实现这一效果，为网页增添一份优雅。本篇博客将详细解析 JQuery 隔行换色的实现原理和应用场景，让我们一起揭开这段前端小巧妙的技艺。

03

与Ajax同样重要的jQuery（1）

jQuery框架 jQuery 1.4 是企业主流版本，从jQuery1.6 开始引入大量新特性。最新版本 2.1.1，这里讲解以1.8.3为主(新版本主要是浏览器兼容问题以及新特性) jQuery 提供 jquery-1.8.3.js 和 jquery-1.8.3.min.js jquery-1.8.3.js jQuery框架源码，没有被精简，体积较大（主要用来研究 jQuery源码），企业开发时，需要导入 jquery-1.8.3.min.js （精简过） 1.jQuery程序快速入门 window.

06

CSS3常用选择器

一、基本选择器子元素选择器概念：子元素选择器只能选择某元素的子元素语法格式：父元素 > 子元素（Father > Children）兼容性：IE8+、FireFox、Chrome、Safari、Opera 相邻兄弟元素选择器概念：相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素语法格式：元素 + 兄弟相邻元素（Eelement + Sibling）兼容性：IE8+、FireFox、Chrome、Safari、Opera 通用兄弟选择器

02

HTML5和CSS3新特性

控件归属于表单： 1 表单的控件id名一定是唯一 2 控件归属于那个表单，那么控件里面属性form=“表单的id[一致]”

02

【CSS3】CSS3 结构伪类选择器 ( E:first-child / E:last-child 选择器 | E:nth-child(n) 选择器 | E:nth-of-type 选择器 )

E:first-child 选择器 : E 表示 HTML 标签类型 , 该选择器选择匹配的父容器中的第一个 E 类型标签子元素 ;

03

CSS选择器笔记

这几天拿出来看了一下，发现很多都忘记了。所以，我决定把它们贴在这里，方便以后查看。这对其他朋友应该也是有用的，毕竟选择器是制作网页效果的第一步。

02

HTML5和CSS3提高

HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。

04

CSS(CSS3)选择器（2）

该部分主要为CSS3新增的选择器接上一篇 CSS（CSS3）选择器（1）一.通用兄弟选择器: 24：E ~ F，匹配任何E元素之后的同级F元素。 div ~ p{ background-color:#00FF00; } 二.属性选择器: 25：E[att ^= val]，匹配属性att的值以”val“开头的元素。 [id ^= start]{ background-color:red; ]

06

Jquery简介选择的

Jquery一个js相框（程序代码相结合）这是一个程序开发过程中的半成品；分类似该框架EXTJS。

02

寒假提升｜ Day8 CSS 第六部分

今日打卡任务 Day7参考答案打卡作业 Day07 作业布置一. 完成课堂所有的代码已完成二. 自己查一个列表并且完成三. 完成table的作业内容四. 说出表单元素什么情况下使用name和value？ name元素的作用是后台接收数据时使用的键值对中的键(key) 随着表单的提交而一起提交表单中不可或缺的元素一个form表单中该元素的名称对应不同类型的input是不同的 value是后台接收数据时使用的键值对中的值(value) value可以有默认值五. 说出form提交时的属性作

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭