开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

HTML/CSS:从奇数位置开始DIV

HTML/CSS是前端开发的基础技术，用于构建网页的结构和样式。在HTML中，DIV是一个常用的标签，用于创建一个容器，可以用来包裹其他HTML元素，并且可以通过CSS来控制其样式。

从奇数位置开始DIV可以通过CSS中的伪类选择器来实现。伪类选择器是一种用于选择元素的特殊选择器，可以根据元素在文档中的位置或状态来选择元素。

要从奇数位置开始DIV，可以使用nth-child伪类选择器。nth-child(n)选择器可以选择其父元素的第n个子元素。在这种情况下，我们可以使用nth-child(odd)选择器来选择奇数位置的DIV。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
div:nth-child(odd) {
  background-color: lightgray;
}
</style>
</head>
<body>

<div>第一个DIV</div>
<div>第二个DIV</div>
<div>第三个DIV</div>
<div>第四个DIV</div>
<div>第五个DIV</div>
<div>第六个DIV</div>

</body>
</html>

在上面的示例中，通过使用nth-child(odd)选择器，我们选择了奇数位置的DIV，并将其背景颜色设置为lightgray。这样，第一个、第三、第五个DIV将具有不同的背景颜色。

对于HTML/CSS的学习和实践，可以参考腾讯云的云开发文档和教程，以了解更多关于HTML/CSS的知识和应用场景。

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

云开发文档：https://cloud.tencent.com/document/product/876
云开发教程：https://cloud.tencent.com/developer/edu/paths/4

请注意，以上提供的链接仅作为示例，实际选择产品时应根据具体需求进行评估和选择。

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

有帮助

没帮助

相关·内容

CSS选择器

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

05

jQuery选择器（满足你的所有业务）

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

02

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

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

03

从零开始学 Web 之 CSS3（一）CSS3概述，选择器

CSS3是CSS（层叠样式表）技术的升级版本，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

03

JavaScript 学习-43.jQuery 选择器

前言 jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。 jQuery 选择器 jQuery 中所有选择器都以美元符号开头：$() 常用的一些选择器总结语法描述 $(this) 选取当前 HTML 元素 $("*") 选取所有元素 $("p") 匹配

标签元素 $("#kw") 匹配属性 id="kw" 的元素 $(".info") 选取 class 属性为 info 的元素 $

02

二、css3基础

如p标签中设置 title 属性显示的效果为当鼠标放上去的时候显示为设置的内容

02

JavaScript学习笔记002-数据类型0字符串拼接

[十位] [个位] [几何] [子集] [大圆] [小圆] [元素] [下标] [分子] [分母] [分数] [中点] [约分] [加数] [减数]

01

css变量制作心动的果冻效果（css变量）

CSS自定义属性也被称为CSS变量。变量就是拥有合法标识符和合法的值,可以被使用在任意的地方。通过var()函数使用变量。

03

css变量制作心动的果冻效果（css变量）

CSS自定义属性也被称为CSS变量。变量就是拥有合法标识符和合法的值,可以被使用在任意的地方。通过var()函数使用变量。

03

CSS3学习(一)——基础学习

CSS 1.1 CSS 编写的位置使用CSS来修改元素的样式第一种方式：内联样式/行内样式第二种方式：内部样式表第三种方式：外部样式表(最佳实践) 1.1.1 内联样式在标签内部通过style属性来设置元素的样式问题: 使用内联样式，样式只能对一个标签生效，如果希望影响到多个元素必须在每一个元素中都复制一遍并且当样式发生变化时，我们必须要个一个的修改，非常的不方便注意:开发时绝对不要使用内联样式 <p style="color: red; fon

02

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

jQuery学习笔记

jQuery函数位于一个document ready函数中，我们需要在js中加载该函数文档

03

「HTML&CSS」第一部分

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

02

JQuery基础

学习jQuery的时候，很快过了一遍，发现好多知识点不清晰。看来还是要写出来加深印象，平时多练习！ jQuery是一个Javascript函数库，轻量级，“写得少，做的多！”，它有以下功能： HTML元素选取 HTML元素操作 CSS操作 HTML事件函数 JavaScript特效和动画 HTML DOM遍历和修改 AJAX Utilities（实用工具）很多大公司都在使用jQuery:Google,Microsoft,IBM等。jQuery兼容所有主流浏览器，包括IE6（不失为解决兼容性的一种方法）。

05

前端成神之路-HTML5CSS3_01

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

01

jQuery 教程

菜鸟教程 — jQuery 教程：https://www.runoob.com/jquery/jquery-tutorial.html

02

jQuery 选择器使用方法

下面的代码，只有外层段落的字体会改变颜色，里层不会，因为里层是属于 divInner 的直系元素

01

jQuery 选择器使用方法

下面的代码，只有外层段落的字体会改变颜色，里层不会，因为里层是属于 divInner 的直系元素

01

jQuery

jQuery基础 1、 jQuery其实就是一个类库，集成了DOM/BOM/JavaScript的类库 http://jquery.cuishifeng.cn/这个网站里有所有的jQuery

05

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

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

03

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

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

02

CSS3新增选择器

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

04

jQuery中常用的函数和属性详细解析

$("img").attr({src:"test.jpg",title:"test Image"}); 给某个元素添加属性/值，参数是map

01

[jQuery学习系列一]1-选择器与DOM对象

前言: 好久没有更新博客了, 最近想复习下之前学过的JS的相关内容, 也算是自己的一种总结. 知识长时间不用就会忘记, 多学多记多用!! 下面的程序都可以在下面的网站进行在线调试: http://

css3动画

此为动画样式中的关键帧，用关键帧来控制css动画中的关键样式。相比较过渡更加的容易空值中间的部分

04

前端小知识10点(2020.6.28)

① DOMContentLoaded 等构件完 dom 树，js 加载完后才会触发

01

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

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

07

CSS 三大特性

是浏览器处理冲突的一个能力,如果一个属性通过两个相同权重选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

02

CSS三大特性

CSS 三大特性层叠继承优先级是我们学习CSS 必须掌握的三个特性。 CSS层叠性所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。就近原则一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。样式冲突，遵循的原则是就近原则。那个样式

04

jquary学习（二）jquary的使用，jQuery中的选择器

目录首先在官网下载jquary的js文件 html页面文件里面引入 jQuery中的选择器基本选择器id 选择器标签选择器 (“a”)类选择器 (“.class”) 首先在官网下载jquary的

02

如何使用纯 CSS 制作四子连珠游戏

实验是学习新技巧、思考新想法、并突破自身极限的有趣的方式。“纯 CSS”演示很早就有了，但是随着浏览器和CSS的发展，新的挑战又出现了。CSS 和 HTML 预处理器也促进了纯 CSS 演示的发展。有时候，预处理程序用于硬编码每个可能的场景，比如 :checked 的长字符串和相邻兄弟选择器。

02

Jquery基本用法总结

选择器 $("#mydiv") 通过ID $("p#myp") 选择id=myp 的所有p元素（组合型） $(".mydiv") 通过 class="mydiv" $("p.myp") 选择class=myp 的所有p元素 $("p").eq(1) 获取匹配的集合中的第二个元素这个元素的位置是从0算起(与[i]的区别是eq获得的还是jquery元素，而[i]获得的是dom元素) $("div:first") 选择第一个div $("div:odd") 选择奇数行div $('div:visible')

09

jQuery基础系列

jquery的入口函数是在html所有标签都加载后才执行，而JavaScript的window.onload事件是等到所有内容加载完后才执行。

02

与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

从零开始学 Web 之 jQuery（二）获取和操作元素的属性

DOM中有很多方式获取元素，比如通过id，通过标签名，通过类名，通过name的值，通过选择器等方式。

04

jQuery基础图文系列

jquery的入口函数是在html所有标签都加载后才执行，而JavaScript的window.onload事件是等到所有内容加载完后才执行。

01

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

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

08

盘点三个JavaScript案例——实现限时秒杀、定时跳转、改变盒子大小

1.在淘宝网中，商家为了促销经常搞一些活动，例如限时秒杀是常见的一种活动，来增加消费者购买商品。

02

java前端模板Thymeleaf常用语法

3、对于某些页面，我们需要引入其他公共页面的话，在需要引入的区域使用include，如下：

01

JQuery最全常用方法指南

ready(fn); $(document).ready()注意在body中没有onload事件，否则该函数不能执行。在每个页面中可以有很多个函数被加载执行，按照fn的顺序来执行。 bind(type, [data], fn) 为每一个匹配元素的特定事件（像click）绑定一个或多个事件处理器函数。可能的事件属性有：blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error one(type, [data], fn) 为每一个匹配元素的特定事件（像click）绑定一个或多个事件处理器函数。在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。

03

【JQuery框架】五大选择器“全家桶”详解！！！

今天来和大家分享一下jQuery的五种选择器的详细使用方法，那么何为选择器？从功能上来讲，它能够筛选具有相似特征的元素标签，在我们想要对具有相似特征的元素进行集中或统一操作时是十分有用的，

02

jQuery入门基础——选择器

What：jQuery是JavaScript的类库，封装了很多js代码。类似java中的类库一样里面一个类中有很多别人写好的功能。90%以上的公司都在用jQuery。划重点，这句话要考

02

js与jQuery的区别以及jQuery选择器和方法的使用

jQuery是什么：jQuery是JavaScript的类库，封装了很多js代码。类似java中的类库一样里面一个类中有很多别人写好的功能。90%以上的公司都在用jQuery。

01

jQuery选择器大全

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

01

CSS选择器

选择存在 attr 属性，且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value 的元素

02

HTML/CSS 第四章

注：一般实际工作来说标签不需要进行转换，因为大多数情况下都可以选择对应的标签来实现需求行内块较为特殊！！

02

Css权重解析

关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准具体规范入如下：

02

JQuery选择器

1 $("*") ---------选取所有元素 2 $(this) --------选择当前HTML元素 3 $("p.a") -----选取p元素下class为a的元素 4 $("p:first") ----选取第一个p元素 5 $("ul li:first-child") ----选取ul下第一个li元素 6 $("tr:even") -------选取偶数位置下的tr 7 $("tr :odd") --------选取奇数位置的tr

01

Python习题集（七）

https://www.cnblogs.com/poloyy/category/1676599.html

01

jQuery

当Jquery名称冲突时，可以利用var jq = jQuery.noConflict()来使用jq代替表示Jquery。

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭