HTML中，li元素定义了样式，然后再某个li元素定义了某class，发现这个class无效,求解释

Posted 2023-05-15

style代码:
ul liwidth:50;height:50;...
.liswidth:20;height:20;...

body代码:
<ul>
<li>123</li>

<li>456</li>
<li class="lis">789</li> //这个class无效
</ul>

参考技术A 很简单啊，ul li的优先级大于.lis的优先级
.lis 你写成 ul li.lis 试试本回答被提问者采纳 参考技术B 亲，这个是有效的，你定义的样式都没给加单位，当然不行了。

宽高加上像素或者em值就可以了
ul liwidth:50px;height:50px; background-color:#09C;
.liswidth:20px;height:20px; background-color:#3FC追问

我只是举个例子，让人能简单地看懂我的问题。单位的话，我是有写的，在这里没写而矣。这是声明头，不知是不是跟这个有关，也许xhtml应该是可以的

参考技术C ul li.liswidth:20;height:20;...
你那样写肯定无效 因为写的li是包括全部了

列表+样式初始化+元素类型转换

一、ul无序列表

1、无序列表定义 
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。 
无序列表始于 <ul>标签。每个列表项始于 <li>。

ul标签结构：

<ul>

<li>清心</li>

<li>海牙</li>

<li>玄武</li>

</ul>

2、无序列表项目符号 （基本不用，企业开发用图片代替）<ul type="disc"></ul> 
type=”disc” 实心圆 
type=”circle” 空心圆 
type=”square” 方块符 
3、无序列表的嵌套 (li 放内容，标签 ，图片，链接)

<ul>

<li>咖啡</li>

<li>茶

<ul>

<li>红茶</li>

<li>绿茶</li>

</ul>

</li>

 

二、ol有序列表

1、列表定义 
有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol>标签。每个列表项始于 <li> 标签。

ol标签结构

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>

2、有序列表项目符号 （基本不用，企业开发用图片代替） <ol type="A"></ol> 
type=”A” A B C…序列号 
type=”a” a b c …序列号 
type=”I” I II III…序列号

3、有序列表的嵌套

<ol>

<li>咖啡</li>

<li>茶

<ul>

<li>红茶</li>

<li>绿茶</li>

</ul>

</li>

</ol>

三、dl定义列表

1、定义列表 
自定义列表不仅仅是一列项目，而是项目及其注释的组合。 
自定义列表以<dl> 标签开始。每个自定义列表项以<dt> 开始。每个自定义列表项的定义以<dd>开始。

<dl>

<dt>计算机</dt>

<dd>用来计算的仪器 ... ...</dd>

<dt>显示器</dt>

<dd>以视觉方式显示信息的装置 ... ...</dd>

</dl>

四、样式初始化

首先我们来认识下，什么是样式初始化。样式始初始化是指，我们的元素被默认的初始化了某些样式属性值，我们来看下有哪些标签加了那些默认的属性值。

<style type="text/css">

body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}

ol,ul{margin:0;padding:0;list-style:none;}

a{text-decoration:none;}

img{border:none;}

</style>

但凡是浏览器默认的样式，都不要使用。 
在写案例前，会在样式的前面先把默认样式清除，以免造成不必要的兼容问题

提示：默认样式没用，为什么浏览器还要给他加默认样式呢？？ 是因为表现他本身的结构特性