这个 HTML 中的 <p> 标签,怎样才能用 css 选择器选中呢?

2020-01-17 14:58:19 +08:00
 lisisi

HTML 结构是这样的:

<div class="items">
    <p>item one</p>
    <p>item two</p>

    <li>
        <p>Notice: ...</p>
    </li>
</div>

CSS 已经写了 p 标签的样式:

.items p { margin: 15px auto };

需要把 li 标签 里的 p 标签 margin 修改,却发现覆盖不了 ( .items p { margin: 15px auto } ) :

li > p { margin: 10px auto }

请教,有什么方式用 CSS 选择器,再选中 li 标签下面的 P 标签,并覆盖 P 标签的 .items p { margin: 15px auto }; 样式吗? (li 下面的标签 p 没有 id 可选)

2295 次点击
所在节点    HTML
5 条回复
AugustCat
2020-01-17 15:01:07 +08:00
.items li p { margin: 10px auto }
humor66
2020-01-17 15:01:09 +08:00
.items li p ?
lisisi
2020-01-17 15:06:32 +08:00
@AugustCat
@humor66

感谢,补齐完整确实可以选中了
LyleRockkk
2020-01-17 15:08:56 +08:00
这个问题是 css 选择器权值的知识点,楼主可以学习一下相关
DOLLOR
2020-01-17 15:14:28 +08:00
.class 的权重比 tag 高,所以,“li > p”的样式覆盖不了“.items p”的样式。
另外,按照标准,<li>标签的父元素只能是<ul>、<ol>、<menu>,不能是<div>。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/638747

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX