html修改li大小,css为li设置不同宽度

在开发过程中，会碰到一些选择器的需求：例如使列表中的第一项或者最后一项显示不同的样式、列表中的奇数或者偶数项显示不同的背景色 . . . 等等。我们可以通过 CSS 来实现这样的效果，CSS 给我们提供了几个样式参数：first-child、last-child、nth-child(n)。

css为li设置不同宽度

需要使用到的css选择器 nth-child(n)：选择列表中的第 n 个标签。我们只需要为每一个li标签指定一个宽度即可实现每一个li的宽度都不同的效果。

Document

ul {

list-style: none;

padding: 0px;

margin: 0px

}

ul li:nth-child(1) {

background: #eee;

width: 100px;

}

ul li:nth-child(2) {

background: #eee;

width: 200px;

}

ul li:nth-child(3) {

background: #eee;

width: 300px;

}

我是第一个li
我是第二个li
我是第三个li

效果：

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

n 可以是数字、关键词或公式。

本文来自css答疑栏目，欢迎学习！

html修改li大小,css为li设置不同宽度相关推荐

html如何自动调整边框大小,css边框怎样设置长度？
css边框怎样设置长度?下面本篇文章给大家介绍一下CSS边框长度的控制方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. CSS边框长度控制以前需要边框长度比容器小一些时,我用d ...
matlab绘图修改字体大小,matlab绘图中设置字体及图片大小
转自:这里关于matlab绘图中字体及图片大小等的设置 1. 设置坐标轴上下限:axis([xmin,xmax,ymin,ymax]); 2. 设置图片大小:set(gcf,'Position',[ ...
linux修改arena大小,Resolume Arena怎么设置大屏幕调整画面屏幕的方法
如果你想要制作VJ视频,那么Resolume Arena绝对可以满足你的所有需求,小编近期了解到很多用户不知道怎么设置大屏幕,如果你还不知道具体的操作方法,就赶快来看看下面的教程吧! Resolume ...
如何修改html中字号大小,css怎么设置字体大小？
在CSS代码标签中,修改"font-size"属性可以改变字体的大小,下面我们来看一下css使用font-size属性设置字体大小的示例. css可以使用font-size属性设置 ...
css设置li隐藏,css怎么隐藏li
css隐藏li的方法:首先新建一个html文件:然后使用ul标签和li标签创建一个项目列表:接着创建一个类名为yc的样式:最后在yc样式内,将display属性设置为none即可隐藏li标签. 本文操 ...
html字体修改微软字体大小,css设置字体(css怎么调整字体大小)
一般字体的设置包含:字体,字体大小,字体颜色 html设置字体的话有很多标签去设置1. h1,h2,h3,h4,h5,h6 标题其中定义最大的标题. 定义最小的标题.2. 采用. 用Css设置整个 ...
css 修改三角形大小_CSS三角形形状及大小的设置
画出来是由四个三角形组成的四边形四个三角形相交的点到各边的垂线就是border设置的宽度想要什么样的三角形就看数学了 #test{ position: relative; } #triangle1 ...
css删除li 圆点_六种设计难题的CSS实用技巧！
前言最近在恶补css的知识,看到<css揭秘>一书,如获至宝.下面节选一部分笔记. 一.扩大按钮的点击范围对于哪些较小的.难以瞄准的控件来说,如果不能把它的视觉尺寸直接放大,将其可点击 ...
html 字体图标颜色怎么改,关于css：如何设置Font Awesome Icons的图标颜色，大小和阴影的样式...
我如何设置Font Awesome图标中图标的颜色,大小和阴影? 例如,Font Awesome的网站将显示一些白色的图标和一些红色的图标但不会显示CSS如何以这种方式设置样式... 鉴于它们只是字体 ...

html修改li大小,css为li设置不同宽度

html修改li大小,css为li设置不同宽度相关推荐

最新文章

热门文章