css样式设置中如图,ul li{}和li{}有什么区别?

发布网友发布时间：2022-04-06 12:16

共5个回答

懂视网时间：2022-04-06 16:37

在html中，我们经常会遇到li标签，那么li标签有哪些属性？下面我们来了解一下css中li标签的属性。

一：标签有哪些属性

在html中，使用css中li标签来控制样式，很多网站上都是点为开头，也有的是按照图片形式开头。li是html中是最基本的属性，li标签用于无序和有序的列表中，例如：

<ol> 
<li>php1</li> 
<li>php2</li> 
</ol> 
 
<ul> 
<li>php3</li> 
<li>php4</li> 
</ul>

效果如下：

微信截图_20181107105936.png

在以上代码中，可以看到li的默认有序和无序，ol是以有序的数字进行排列，而没有顺序的ul是以小圆点来进行排序的。目前在所有浏览器中，都是可以就兼容li。【推荐阅读：javaScript动态添加Li元素】

二：css中li标签的属性详解

很多时候，我们都会给li加上属性，来达到想要的效果，我们可以让元素水平排列也可以让元素左对齐，也可以给列表加颜色，例如：

ul{
 width:100%;
}
li{
 float:left;
}

以上代码我们就可以实现对元素进行水平排列，如果想要其他效果，直接修改代码就可以了。

热心网友时间：2022-04-06 13:45

作用目标不一样，优先级也不一样
当前样式不是很多，在做项目开发如果泛用标签选择器会有很多难以预料的情况发生。多写一些就明白追问他们两个分别指的是什么？能详细的说一下吗，我分不清他们两个有什么区别

热心网友时间：2022-04-06 15:03

没区别，因为ul都和li配套使用。
ul li表示匹配HTML中所有ul下的(后代)li。
li表示匹配HTML中所有的li标签。

热心网友时间：2022-04-06 16:38

ul li {...} 指ul标签的子级li （指ul里面的li , ul外面的li 就管不到了。）
li {...} 指整个页面所有的li (包含 ul里面的li )

热心网友时间：2022-04-06 18:29

ul li{}表示对UL 下的所有LI设置属性
li{}表示对网页内所有的LI设置属性。
比如：《style》里
ul li{} 或者li{}
《style》
<body>
<ul
<li>
<ul>
<ol>
<li>
<ol>
<body>
如果用在styleu里用 ul li{}表示对UL 下的所有LI设置属性
如果li{}表示对网页内所有的LI设置属性。