开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用第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的行和列选择特定单元格后，不会创建输入元素

相关搜索:

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

有帮助

没帮助

相关·内容

CSS选择器详解

CSS3 E:nth-child(n) { sRules } 要使该属性生效，E 元素必须是某个元素的子元素，E 的父元素最高是 body，即 E 可以是 body 的子元素匹配父元素的第 n 个子元素...span> 第4个p 第5个p 该选择符允许使用一个乘法因子(n) 来作为换算方式，比如我们想选中所有的偶数子元素 E，那么选择符可以写成：E...CSS3 E:nth-last-child(n) { sRules } 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素该选择符允许使用一个乘法因子...(n)来作为换算方式，比如我们想选中倒数第一个子元素E，那么选择符可以写成：E:nth-last-child(1) 匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效 ...，也就是说E可以是body 该选择符总是能命中父元素的第n个为E的子元素，不论第n个子元素是否为E /* 设置父元素第二个 p 元素为红色，虽然该 p 元素为父元素的第三个元素

2.8K4 0

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

目录属性选择符伪类选择符 CSS3属性 CSS3自适应属性选择符如果能够灵活运用属性选择器，目前为止需要依靠id或class名才能实现的样式完全可以使用属性选择器来实现。...结构性伪类选择器 css中已经定义好的选择器，不能随便起名字选择符含义 :root 将样式绑定到页面的根元素中 :not 排除某个选择器样式 :empty 使用该选择器来制定当元素内容为空白时使用的样式...（默认匹配他们得是相同的子元素） nth-of-type(odd)奇数和:nth-of-type(even)偶数：完美解决上面的问题 3.循环使用样式 :nth-child(n)：选取每一行...n:所有行 2:倒数第2行 -n+3:最后3行 :only-child：只有一个元素时使用 4.目标伪类选择器 :target：使用该选择器来对页面中的某个target元素（锚记链接）指定样式...IE6及以下浏览器仅支持a:hover E:focus 选择匹配的E元素，而且匹配元素获取焦点 7.伪类和伪元素的区别 css伪类：状态伪类基于元素当前状态进行选择的。

7071 0

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

元素；对于$(”label:only-child“)会选出是label元素，同时它是它父类唯一的子元素的label元素； :nth-child(n)：返回第n个子节点，n从1开始，如果n取0，...An+B的所有子节点，比如3n+1返回所处位置为父节点子元素的是3的倍数加1的那个子元素； :even：页面范围内的处于偶数位置的元素，如：li:even返回全部偶数li元素； :odd：页面范围内的处于奇数位置的元素...:lt(2)返回从第0个和第1个ul元素； 2....利用css选择器进行选择：元素标签名：比如说(”a“)会选出所有链接元素； #id：通过元素id进行选择，比如说(“#form1”)会选择id为form1的元素； .class：通过元素的CSS类来选择...，比如说(“.boldstyle“)会选择CSS为boldstyle类的元素；标签名#id.class：通过某类元素的id属性和class属性来选择，如：(a#blog.boldStyle)会选择id

27.1K3 0

常用的CSS3选择器

（1）临近兄弟选择器该选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。...:nth-child(n)和:nth-last-child(n)选择器使用:first-child选择器和:last-child选择器可以选择某个父元素中第一个或最后一个子元素，但是如果用户想要选择第...:nth-of-type(n)和:nth-last-of-type(n)选择器，这两种选择器的不同之处在于:nth-of-type(n)和:nth-last-of-type(n)选择器用于匹配属于父元素的特定类型的第...n 个子元素和倒数第n个子元素，而:nth-child(n)和:nth-last-child(n)选择器用于匹配属于父元素的第 n 个子元素和倒数第n个子元素，与元素类型无关。...:nth-of-type的值还可以设为odd或2n-1（奇数），even或2n（偶数），即为选择所有排序为奇数或偶数的元素 :empty选择器 :empty选择器用来选择没有子元素或文本内容为空的所有元素

4.1K2 0

CSS基础知识

-- 结果属于第 n 个子节点(单数节点：odd，偶数节点：even) --> selector:nth-child(n) { ...查找第n个子selector，后同。 } selector:nth-of-type(n) { ... } ） css中，为了后续的可扩展性和可维护性，应尽量少使用id选择器，尽量不使用行内样式，且css应建立单独文档引入...CSS3 新特性新的伪类与伪元素选择器(基本选择器属性选择器伪类选择器) 背景渐变边框圆角阴影转换和变形过渡动画盒模型(以box-sizing区分，前面有介绍。)

1451 0

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

div~p: 选中的div后面所有的p CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。...CSS3又新增了其它的伪类选择器。这一小段，我们来学习CSS3中的结构伪类选择器：即通过结构来进行筛选。 1、格式：（第一部分） E:first-child 匹配父元素的第一个子元素E。...E:last-child 匹配父元素的最后一个子元素E。 E:nth-child(n) 匹配父元素的第n个子元素E。注意，盒子的编号是从1开始算起，不是从0开始算起。...E:nth-child(odd) 匹配奇数 E:nth-child(even) 匹配偶数 E:nth-last-child(n) 匹配父元素的倒数第n个子元素E。...（当n小于1时无效，因为n = 0 也是不会选中的）如果选择器写成li:nth-child(2n)，则表示所有的第偶数个 li。

4862 0

CSS 01 准备选择器、伪元素

CSS3 浏览器支持情况网址查询：caniuse.com CSS3的伪类选择器（一）动态伪类选器 a:link{} a:visited{} a:hover{} a:active{} UI元素状态伪类选择器... html部分： // disable 是状态 CSS部分：（根据状态确定样式） input :enable{} input:disable{} CSS3的伪类选择器（二）结构伪类选择器...(****){} 选中顺序从左往右 li:nth-child(2n){} 元素的第偶数个子元素选中 li:nth-child(2n+1){} 元素的第奇数个子元素选中...li:nth-child(n+5){} 元素从第5个子元素开始选中 li:nth-child(4n+1){} 元素每4个元素选中...li:only-child{} 选择的元素是它父元素只有一个子元素 li:only-of-type{} 选择的元素是它父元素只有一个子元素，但是限制子元素的标签类型为li

9164 0

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

css选择器选择奇数行或偶数行实现方式有两种方式一:nth-child /* 奇数行*/ div:nth-child(odd){ } /* 偶数行 */ div:nth-child(even)...{ } :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。...方式二:nth-of-type /* 奇数行*/ div:nth-of-type(odd){ } /* 偶数行 */ div:nth-of-type(even){ } nth-of-type(...n) : 匹配同类型中的第n个同级兄弟元素。...区别：其实两者使用起来基本上是一样的，既然我们设置奇偶样式，大多数情况也都是给同类型标签进行设置的。参考

2.2K1 0

css3选择器

CSS3新增选择器属性选择器 E[attr]只使用属性名，但没有确定任何属性值 E[type="text"]指定属性名，并指定了该属性的属性值 E[attr~="value"]指定属性名，并且具有属性值...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父元素中的第一个子节点且节点类型是E的 E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的 E:only-child表示E元素中只有一个子节点。

4302 0

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

CSS3新特性-结构伪类选择器在CSS3中新增了一个结构伪类选择器，它能用更加简洁的代码，实现我们的某些需求。...定义：结构伪类选择器主要根据的是文档的结构来选择元素，常常用在根据父级选择器选出某些想要的子元素。...n 所有子元素 2n 偶数子元素 2n+1 奇数子元素 5n 第5、10、15...个子元素 n+3 从第3个子元素开始（包括第3个）到最后 -n+6 前6个子元素(注意不能写成 6-n 不生效) 其中...1. n如果是数字，就是选择第n个子元素，里面数字从1开始... 2. n如果是关键字: even代表偶数，odd代表奇数 3. n可以是公式︰常见的公式如下： 4....用法：nth-of-type(n)的用法和nth-child(n)的用法类似，只不过nth-of-type(n)会在指定类型的条件下选择子元素，其中n的取值和nth-child(n)中n的取值用法一模一样

4613 0

HTML5和CSS3提高

2.结构伪类选择器结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素 3.结构伪类选择器 nth-child（n）选择某个父元素的一个或多个特定的子元素（重点） n 可以是数字...，关键字和公式 n 如果是数字，就是选择第 n 个子元素，里面数字从1开始… n 可以是关键字：even 偶数，odd 奇数 n 可以是公式：常见的公式如下 ( 如果n是公式，则从0开始计算，但是第...0 个元素或者超出了元素的个数会被忽略 ) 结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素区别： nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第...先去匹配E ，然后再根据E 找第n个孩子 4.伪元素选择器（重点）伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。...7.CSS3 过渡（重点）过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果

9454 0

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

可见性过滤选择器 ——3.1 :hidden（取不可见的元素） jQuery至1.3.2之后的:hidden选择器仅匹配display:none或的元素，而不匹配...子元素过滤选择器 ——5.1 :first-child和:last-child :first-child表示第一个子元素，:last-child表示最后一个子元素。...——5.3 :nth-child 看到这个就想起英文单词里的，fourth, fifth, sixth……，nth表示第n个，:nth-child就表示第n个child元素。...:nth-child有三种用法： 1) :nth-child(x)，获取第x个子元素 2) :nth-child(even)和:nth-child(odd)，从1开始，获取第偶数个元素或第奇数个元素 ...例如x = 3, y = 0时就是3n，表示取第3n个元素（n>=0）。实际上xn+y是上面两种的通项式。

4.9K8 0

前端成神之路-HTML5CSS3_01

七、CSS3 属性选择器(上) 八、CSS3 属性选择器(下) 九、结构伪类选择器十、nth-child 参数详解 nth-child 详解注意：本质上就是选中第几个子元素 n 可以是数字...、关键字、公式 n 如果是数字，就是选中第几个常见的关键字有 even 偶数、odd 奇数常见的公式如下(如果 n 是公式，则从 0 开始计算) 但是第 0 个元素或者超出了元素的个数会被忽略.../* 选择第 0 5 10 15, 应该怎么选 */ ul li:nth-child(5n) { background-color: orangered; } /* n + 5 就是从第...，不管是第几个类型 nt-of-type 选择指定类型的元素十二、伪元素选择器十三、伪元素的案例十四、2D 转换之 translate 2D 转换 2D 转换是改变标签在二维平面上的位置和形状...单位，是相对于本身的宽度和高度来进行计算的行内标签没有效果代码演示 div { background-color: lightseagreen; width: 200px; height

4311 0

CSS选择器

下述内容主要讲述了《HTML5权威指南》第17、18章关于“使用CSS选择器（第I部分、第II部分）”。一、前传 1....盒模型 CSS盒模型包括外边距、边框、内边距、内容四部分组成。 ? 元素盒子有两个部分是可见的：内容和边框。元素还可以包含其他元素。...使用CSS计数器示例：对指定内容使用计数器 <!...:only-of-type 选择元素指定类型的唯一子元素 :nth-child(n) 选择父元素的第n个子元素 :nth-last-child(n) 选择父元素的倒数第n个子元素 :nth-of-type...(n) 选择父元素定义类型的第n个子元素 :nth-last-of-type(n) 选择父元素定义类型的倒数第n个子元素示例：子元素选择器 <!

1.4K5 1

CSS3常用选择器

元素（只用于单选按钮和复选框）兼容性：IE9+、FireFox、Chrome、Safari、Opera 2、CSS3结构类 Element:first-child 概念：选择属于其父元素的首个子元素的每个...Element:nth-child(odd)、Element:nth-child(even) odd和even是可用于匹配下标是奇数或偶数的Element元素的关键词（第一个的下标是 1）...Element:nth-last-child(N) 概念：匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数兼容性：IE9+、FireFox4+、Chrome、...Safari、Opera Element:nth-of-type(N) 概念：匹配属于父元素的特定类型的第 N 个子元素的每个元素兼容性：IE9+、FireFox4+、Chrome、Safari...、Opera Element:nth-last-of-type(N) 概念：匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数兼容性：IE9+、FireFox4

7272 0

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

1、以某元素相对于其父元素或兄弟元素的位置来获取无素的结构伪类。重点理解通过E来确定元素的父元素。...E:first-child 第一个子元素 E:last-child 最后一个子元素 E:nth-child(n) 第n个子元素，计算方法是E元素的全部兄弟元素； div>ul>li:nth-child...E元素；（使用不是非常广泛）没有任何的子元素，包括空格. 3、目标伪类 E:target 结合锚点进行使用，处于当前锚点的元素会被选中； CSS... 选择某个元素的第一个子元素； :last-child 选择某个元素的最后一个子元素； :nth-child() 选择某个元素的一个或多个特定的子元素； :nth-last-child() ...E::selection 可改变选中文本的样式； ":" 与 "::" 区别在于区分伪类和伪元素关于before和after CSS2中 E:before或者E:after，是属于伪类的

1.6K3 0

css3 nth-child选择器

css3 nth-child选择器 css3的nth-child选择器，乍看起来很简单，其实不是那么容易。...简单用法 p:nth-child(n) // 选择属于其父元素的第n个子元素的每个元素 p:nth-child(2n) // 选择属于其父元素的子元素的每个偶数元素 p:nth-child...(2n + 1) // 选择属于其父元素的子元素的每个奇数元素注意事项大概大家都知道上面的使用方法，但是有一点搞不清楚的话，使用起来就会很困惑。...这和程序里面的数组起始序号还有jQuery的选择器都是不一样的。这样子就很好理解了。...+10) 就这样子的 css3中还有一些其他的子元素选择器比如 :first-child // 第一个元素 :last-child // 最后一个元素 :nth-last-child // 从最后一个子元素开始计数

5312 0

HTML学习笔记——css基础

目录前言一、使用css修改元素的样式 1、内联样式、行内样式： 2、内部样式表： 3、外部样式表：（最佳）二、CSS基本语法三、CSS中的各类选择器 1、元素选择器： 2、 id选择器...三、CSS中的各类选择器 1、元素选择器：作用：根据标签名来选中指定的元素。语法：标签名{} 2、 id选择器：作用：根据元素的id属性值选中一个元素，不能重复。...语法： #id属性值{} 3、类选择器：作用：class是一个标签的属性，它和id类似，不同的是class可以重复使用，可以通过class属性来为元素分组。...语法：* 5、复合选择器：作用：选中同时复合多个条件的元素。语法：选择器1选择器2选择器3选择器n{} 注意：交集选择器中如果又元素选择器，必须使用元素选择器开头。...() 选中第n个子元素特殊值：n 第n n的范围0到正无穷 2n 表示选中偶数位的元素

6632 0

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

CSS伪类允许设置元素的动态状态的样式，例如悬停，活动状态和焦点状态，以及文档树中现有但不能通过使用其他选择器作为目标的元素，而无需添加任何选择器它们的ID或类。例如，针对第一个或最后一个子元素。...此选择的基本语法可以与给予:nth-child(N)，其中N是一个参数，其可以是一个数字，一个关键字（even或odd），或形式的表达xn+y，其中x和y是整数（例如1n，2n，2n+1，...）。...提示： CSS :nth-child(N)选择器在必须选择以特定间隔或模式（例如在偶数或奇数位置等）出现在文档树内的元素的情况下非常有用。... : lang伪类语言伪类:lang允许根据特定标记的语言设置来构造选择器。 :lang以下示例中的伪类为明确赋予语言值的元素定义了引号no。例 <!...IE8仅在指定a的情况下支持。三、伪类和CSS类伪类可以与CSS类结合使用。在下面的示例中class="red"，带有的链接将显示为红色。 <!

2K1 0

「HTML&CSS」第一部分

n 可以是数字、关键字、公式 n 如果是数字，就是选中第几个常见的关键字有 even 偶数、odd 奇数常见的公式如下(如果 n 是公式，则从 0 开始计算) 但是第 0 个元素或者超出了元素的个数会被忽略.../* 选择第 0 5 10 15, 应该怎么选 */ ul li:nth-child(5n) { background-color: orangered; } /* n + 5 就是从第...十二、伪元素选择器伪类选择器伪类选择器注意事项 before 和 after 必须有 content 属性 before 在内容前面，after 在内容后面 before 和 after 创建的是一个元素...，但是属于行内元素创建出来的元素在 Dom 中查找不到，所以称为伪元素伪元素和标签选择器一样，权重为 1 代码演示 div { width: 100px;...，是相对于本身的宽度和高度来进行计算的行内标签没有效果代码演示 div { background-color: lightseagreen; width: 200px; height:

2682 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭