首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >OOCSS -仅使用类来设置样式

OOCSS -仅使用类来设置样式
EN

Stack Overflow用户
提问于 2020-03-11 08:25:54
回答 1查看 44关注 0票数 1

我现在正在练习OOCSS,但我遇到了一个问题。

代码语言:javascript
代码运行次数:0
运行
复制
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

如果我想分别设置这3个<li>项目的样式,我会这样做:

代码语言:javascript
代码运行次数:0
运行
复制
li:nth-of-type(1) {}
li:nth-of-type(2) {}
li:nth-of-type(3) {}

但是根据OOCSS,我们应该使用class来设置元素的样式,比如:

代码语言:javascript
代码运行次数:0
运行
复制
<ul>
    <li class="li-1">a</li>
    <li class="li-2">b</li>
    <li class="li-3">c</li>
</ul>

.li-1 {}
.li-2 {}
.li-3 {}

现在看起来还可以,但是如果我有10个<li>,我必须添加10个类,这在我看来是愚蠢的。

我应该使用哪种风格?基于OOCSS,我可以使用除类之外的其他元素来设置元素的样式吗?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-03-11 08:36:58

嗯,从技术上讲,我认为他们指的是你应该使用类而不是html元素标识符。

因此,也许可以这样做:

代码语言:javascript
代码运行次数:0
运行
复制
<ul>
   <li class="li">a</li>
   <li class="li">b</li>
   <li class="li">b</li>
</ul>

然后只需使用您的原始样式,如:

代码语言:javascript
代码运行次数:0
运行
复制
.li:nth-of-type(1) {}
.li:nth-of-type(2) {}
.li:nth-of-type(3) {}

在您的例子中,您基本上是像使用id一样使用类。类应该标识多个元素。

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/60627671

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档