【前言】
遇到分类栏左右两侧不同样式需求,之前用的php判断。现在介绍个更为简单的方法,css后代选择器,除此外还可以通过jquery添加类名来实现
【主体】
(1)css后代选择器
①奇数选择器:
ul li:nth-child(2n+1){color:red}
②偶数选择器
ul li:nth-child(2n){color:black}
(2)jQuery添加类名
var itemList = $('ul li'); for(var i = 0;i<itemList.length;i++){ if(i%2 == 0){ $(itemList[i]).find('.port').addClass('red-color');//奇数 }else{ $(itemList[i]).find('.port').addClass('black-color');//偶数 } }
然后在css里添加类
.red-color{color:red;} .black-color{color:black;}
(3)拓展
除了奇偶外,还可以实现类似标签云的颜色指定
.plinks li:nth-child(2n+0){ background: #EB6841; } .plinks li:nth-child(2n+1){ background: #20a8fe; } .plinks li:nth-child(2n+2){ background: #FE4365; } .plinks li:nth-child(2n+3){ background: #EDC951; } .plinks li:nth-child(2n+4){ background-color: #5cb85c; } .plinks li:nth-child(2n+5){ background-color: #b433ff; } .plinks li:nth-child(2n+6){ background-color: #567e95; } .plinks li:nth-child(2n+7){ background-color: #f60; } .plinks li:nth-child(2n+8){ background-color: #d9534f; } .plinks li:nth-child(2n+8){ background-color: #d9214f; }
.
相关推荐
后代选择器和子选择器是CSS中的重要概念,它们用于指定样式的应用对象,但两者之间存在显著差异。后代选择器可以选取某个元素的所有后代元素,而子选择器仅选取直接子元素。下面详细介绍这两者之间的区别,包括用法...
选择器在CSS中,选择器有哪些类型和作用在CSS中,选择器有哪些类型和作用在CSS中,选择器有哪些类型和作用在CSS中,选择器有哪些类型和作用在CSS中,选择器有哪些类型和作用在CSS中,选择器有哪些类型和作用在CSS中...
在CSS代码中,使用后代选择器将`<p>`内的`<strong>`文字大小设置为30px,而将`<strong>`内的`<i>`文字大小设置为40px。 此外,文件还提到了CSS伪类选择器的使用,如`:link`、`:visited`、`:hover`和`:active`。这些...
CSS后代选择器是一种强大的工具,用于在样式表中指定元素的特定子元素或者后代元素的样式。这个选择器允许我们精确地控制文档的结构,并且只应用样式到我们需要的那些部分,而不会影响到其他不相关的元素。在这个...
另外,CSS3的Flexbox或Grid布局可以方便地实现选择器的响应式设计,使其在不同屏幕尺寸上都能正常显示。 JQuery库在这当中起到了辅助作用,它简化了JavaScript的DOM操作,使得事件处理、元素操作和动画效果的实现...
接下来是关系选择符,包括后代选择器、直接子元素选择器、相邻选择器、兄弟选择器和并列选择器。后代选择器(EF)用于选中某个元素(E)内部的所有指定元素(F),不论层级深浅。直接子元素选择器(E>F)则只选中...
CSS选择器可以分为多种类型,包括id选择器、类选择器、标签选择器、交叉选择器、群组选择器、后代选择器和通用选择器。 - id选择器:通过元素的id属性来选择特定元素,使用#符号加上id名作为选择器(如#idname)。 ...
选择器分为五种基本类型:标签选择器、class选择器、ID选择器、后代选择器和伪类选择器。 1. 星状选择符(*) 星状选择符(*)是CSS选择器中最简单的一种,作用于所有元素。例如:`* { margin: 0; padding: 0; }`...
【标题】:“利用css+javascript实现的一个日期选择器代码”涉及的核心知识点主要集中在CSS样式设计和JavaScript编程上,用于创建一个交互式的日期选择组件。日期选择器是网页表单中常见的一种元素,允许用户方便地...
下面是前端开发中经常使用的 30 个 CSS3 选择器,包括通用元素选择器、ID 选择器、类选择器、标签选择器、伪类选择器、毗邻元素选择器、子元素选择器、属性选择器等。 1. 通用元素选择器 * 通用元素选择器*是选择...
串联选择器和后代选择器是CSS中两种非常基础且常用的选择器类型,它们帮助开发者精确地定位到页面上的特定元素并为其设置样式。 1. **串联选择器(Combination Selector)** 串联选择器,也称为组合选择器,它将多...
3. 后代选择器(elementelement): - 用于选择元素内部的元素。例如,“divp”会选择所有位于内部的元素。 4. 子选择器(element>element): - 选择某元素直接的子元素。例如,“div>p”会选择所有作为子元素的...
- **后代选择器**:使用空格分隔,如`div p`,选择`div`内的所有`p`元素。 - **子元素选择器**:使用`>`分隔,如`div > p`,只选择直接子元素`p`。 - **相邻兄弟选择器**:使用`+`,如`div + p`,选择紧跟在`div`...
### CSS选择器的应用 #### CSS概述与引入方式 CSS(层叠样式表)是一种用于定义HTML文档中元素样式的语言。它允许开发者控制网页布局、颜色、字体等外观特性,从而增强网页的表现力。CSS可以通过多种方式引入: -...
### Python爬虫之CSS选择器详解 #### 一、引言 在进行Web爬虫开发时,高效地从HTML文档中提取所需数据是一项基本而重要的技能。Python作为一门功能强大的编程语言,在网络爬虫领域有着广泛的应用。CSS选择器作为一...
3. 后代选择器: - `A B`:选择A元素内的所有B元素,不包括直接相邻的B元素。 4. 子元素选择器: - `A > B`:选择A元素内的直接子元素B。 5. 相邻兄弟选择器: - `A + B`:选择紧跟在A元素后面的同级B元素。 6...
CSS 颜色选取器允许您将 CSS 颜色值插入 CSS 颜色属性。 它包括标准的调色板的颜色和使用标准颜色的名称、哈希代码、RGB、RGBA、HSL 和 HSLA 颜色值,并显示最近使用的颜色的列表。 默认情况下,颜色选取器将输入...