CCS设置第一个li的元素与其他li样式不同
<div class="ly-content-list">
<ul>
<li>
<div class="title">
<p>HBTMNO1234567890</p>
<span></span>
</div>
<div class="content">
<p>账号:22</p>
<p>姓名:测试22</p>
<p>领用时间:2019-3-24 19:32:45</p>
<p>领用统计</p>
<p>GS3202:20000台</p>
<p>G-140W-MD:20000台</p>
<p>G-140W-MD:20000台</p> <div class="scan-btn">
<button class="detail-btn">查看设备详情</button>
<button >确认</button>
</div>
</div>
</li>
<li>
<div class="title">
<p>HBTMNO1234567890</p>
<span></span>
</div>
<div class="content">
<p>账号:ceshi</p>
<p>姓名:测试</p>
<p>领用时间:2019-3-24 19:32:45</p>
<p>领用统计</p>
<p>GS3202:20000台</p>
<p>G-140W-MD:20000台</p>
<p>G-140W-MD:20000台</p> <div class="scan-btn">
<button class="detail-btn">查看设备详情</button>
<button >确认</button>
</div>
</div>
</li> </ul>
</div>
CSS代码:
.ly-content-list ul li:first-child .content {
position: relative;
color: #999999;
font-size: .2rem;
line-height: .4rem;
min-height: 1rem;
overflow: hidden;
padding: 0 .1rem;
display: "";
}
.ly-content-list ul li:not(:first-child) .content {
position: relative;
color: #999999;
font-size: .2rem;
line-height: .4rem;
min-height: 1rem;
overflow: hidden;
padding: 0 .1rem;
display: none;
}
li:first-child:第一个li元素
li:not(:first-child):除了第一个li的其他元素
CCS设置第一个li的元素与其他li样式不同的更多相关文章
- li里元素都浮动 li 在IE6 7 下方会产生4px间隙问题
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 设置第一个以外的元素样式:not(:first-child),设置最后一个除外的元素样式:not(:last-child)
代码截图:
- 使用jQuery操作元素的属性与样式
本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt= ...
- 《从零开始学习jQuery》:用jQuery操作元素的属性与样式
元素属性和Dom属性简介 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt='1' class="imgs"> ...
- jQuery操作元素的属性与样式
本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt= ...
- 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性
查看本章节 查看作业目录 需求说明: 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距.使用jQuery ...
- 当li设置为line-block时,元素之间出现间隙的原因和解决方法
原因 因为浏览器默认把inline元素之间的空白符(Tab.空格.换行)渲染成一个空格.而如下述代码,两个li元素之间的换行符被渲染成一个空格,则元素之间产生了间隙. 用Chrome浏览器将场景模拟出 ...
- jQuery 学习03——HTML:捕获、设置、添加元素、删除元素、CSS类、CSS()方法、尺寸
jQuery - 获取内容text().html() 以及 val()和属性attr() jQuery 中非常重要的部分,就是操作 DOM 的能力. DOM = Document Object Mod ...
- CSS border-right-style属性设置元素的右边框样式
CSS border-right-style属性设置元素的右边框样式 边框的样式指的是边框的线条属性,指的是边框采用的是实线效果.短线效果还是其它的线条效果. border-right-style属性 ...
随机推荐
- [LeetCode] 531. Lonely Pixel I 孤独的像素 I
Given a picture consisting of black and white pixels, find the number of black lonely pixels. The pi ...
- [LeetCode] 555. Split Concatenated Strings 分割串联字符串
Given a list of strings, you could concatenate these strings together into a loop, where for each st ...
- [LeetCode] 801. Minimum Swaps To Make Sequences Increasing 最少交换使得序列递增
We have two integer sequences A and B of the same non-zero length. We are allowed to swap elements A ...
- WinForm SetWindowPos窗口置顶使用说明
就是有时候窗口不能够成功置顶,这时需要重新切换下标签,就可以置顶了,本文介绍C# SetWindowPos实现窗口置顶的方法: [DllImport("user32.dll", C ...
- junit单元测试不通过报documentationPluginsBootstrapper相关异常
这是因为Spring整合springfox-swagger2后导致的,错误信息如下: -- ::, [main] [WARN] [org.springframework.context.support ...
- SpringBoot系列教程web篇之Post请求参数解析姿势汇总
作为一个常年提供各种Http接口的后端而言,如何获取请求参数可以说是一项基本技能了,本篇为<190824-SpringBoot系列教程web篇之Get请求参数解析姿势汇总>之后的第二篇,对 ...
- Qt5 QtQuick系列----QtQuick的Secne Graph剖析(1)
教是言词, 实不是道,道本无言, 言说是妄.------- 达摩 Qt 5提出了一个新的渲染底层,以替代Qt4时期的Graphics View,这个渲染底层就是Scene Graph.Scene Gr ...
- Spring MVC原理图及其重要组件
一.Spring MVC原理图: ps: springmvc的运行流程为图中数字序号 二.springmvc的重要组件: 1)前端控制器:DispatchServlet(不需要程序员开发) 接收请求, ...
- 11 Sping框架--AOP的相关概念及其应用
1.AOP的概念 AOP(Aspect Oriented Programming 面向切面编程),通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软件开发中的一 ...
- Apache Kafka教程
1.卡夫卡教程 今天,我们正在使用Apache Kafka Tutorial开始我们的新旅程.在这个Kafka教程中,我们将看到什么是Kafka,Apache Kafka历史以及Kafka的原因.此外 ...