ul标签里，如何分配class好

Posted 2023-03-21

<ul class="wrap">

<li> <a>exp</a><div>exp</div> </li>
<li> <a>exp</a><div>exp</div> </li>

……

</ul>
使用li时候，若有不少li，哪种CSS写法更好些呢？
一、一层一层依赖选择器选择 .wrap li ，.wrap li a 和.wrap li div等。
二、每个li，a或div都加上class如 <li class="list-item">

个人建议你先在css最顶端清除默认边距
*
margin：0；
padding：0；/*因为有的像ul， h1...h6 都有默认边距，这样就把他们的边距清除了，具体在需要的话你可以在相应的类里面设置*/



.wrap
/*这里面写的属性，是你上面的代码ul的属性*/



ul li
/*这里面写li的属性，这样所有ul里面的li 都是这里面的属性*/

这种情况如果有个别不一样的，你可以单独在给那个li设置一个类class。

ul li a
/*这里面写a的属性，这样所有li里面的a都是这里面的属性*/



还要在li里面不要在添加div，虽然能实现功能，不过这样的话显着你的li用的没意义。追问

谢谢。这么说吧：

123
456

想给wrap里的a加个border:solid 1px;color:#ddd;的样式，你会怎么写呢？

追答

.wrap li a
disply:block;
border:1px solid #边框颜色;
color:#字体颜色;


而且a要这样写123

追问

那为何豆瓣，百度等互联网大公司都是用类似这种呢？

.aa
disply:block;
border:1px solid #边框颜色;
color:#字体颜色;

我想问的就是.wrap li a和.aa哪种方法更适用

追答

第一种情况适合所有ul中的a的样式都相同，这样用着一个就可以定义所有的a的样式，在html中只需要写
grerg
fefewf

第二种情况适合有个别的 li 中的样式与其他的不一样，这样就用.aa这种，
这样class="aa"的样式级别优先总的定义的.wrap li a的样式。

你想象一下，假如一个

..................../*有100个*/

你用第一种情况就可以了，如果用第二种的话，还得给每个a再写个class，那种情况更节省代码，而且如果其中有个别的a的样式与其他的不一样，你就可以把第二种方法写进去。如

..................../*有100个*/

像你说的豆瓣，百度等互联网大公司都是用类似这种情况，这是种情况无关紧要，与个人书写习惯有关，关键是你认为那种情况更利于你的代码书写，那个效率更高。

参考技术A 第一个好一些,可以节约页面的读取时间.

class="list-item" 这也有不少字节,追问

第一种不也降低了css性能和重用性吗

HTML里出现<ul class="" clstag="">中的“clstag”是啥属性

HTML里出现<ul class="" clstag="">中的“clstag”是用户自定义的一个属性，用来定义ul的特殊属性。这个命名没有规定，但是在最新标准中，建议在属性名前加一个data-，如data-clstag表示是自定义属性。
1、HTML标签可以自定义属性，但是我们要考虑其在IE、Firefox以及chrome下的兼容性问题。
例如：

<div id="newTest"
myAttr="getAttr"></div>

这里的“myAttr”就是这个标签的自定义属性了。

如果定义了属性却使用不了，那么这个属性就没有任何意义了，接下来就是如何去调用我们的自定义属性的值了。

2、在IE浏览器里，我们通过获取对象后直接调用就可以了

document.getElementById("newTest").myAttr;

在IE浏览器里，我们同样可以对其直接赋值而动态产生一个自定义属性：

document.getElementById("newTest").newAttr = "new";

在火狐和谷歌浏览器里，我们可以通过getAttribute方法来实现调用：

document.getElementById("newTest").getAttribute("myAttr");

在火狐和谷歌浏览器里，我们可以通过setAttribute方法在产生并设置一个自定义属性：

document.getElementById("newTest").setAttribute("newAttr","new");

自定义属性一般是我们用来存储数据或是相关依据的，根据实际情况，自定义属性其实很有用的。 参考技术A 这不是标准属性，只是开发为了在dom结构中保存数据用的一个“自定义属性”。它叫任何名字都可以，但是在最新标准中，建议在属性名前加一个data-，如data-clstag表示是自定义属性。本回答被提问者采纳