Question

我的段落标签下面有几个li标签，我正在尝试按照段落项目保留li项目的相同文本样式。但是，目前它出现的不同于父（段）元素。以下是示例HTML代码：

             <div>
                <p>
                Example paragraph
                    <ul>
                        <li>Example list item 1</li>
                        <li>Example list item 2</li>
                        <li>Example list item 3</li>
                    </ul>
                </p>
            </div>

以下是我正在使用的当前SASS代码（可能100％错误）：

p {
  font-size: 1.1rem;
  >ul li*{
    font-size: 1.1rem;
  }
}

Answer 1

如此处所指定：http://developers.whatwg.org/grouping-content.html#the-p-element禁止在段落中放置列表元素。

要实现此功能，请尝试使用<div>代替<p>

        <div>
        Example paragraph
            <ul>
                <li>Example list item 1</li>
                <li>Example list item 2</li>
                <li>Example list item 3</li>
            </ul>
        </div>

和css一样：

 div {
        font-size: 1.1rem;
     }

Answer 2

在段落中放置一个列表违反语言规范，而是建议包含段落和列表的包装label或div。这可以简化您的CSS，只需在font-size上声明div，就像这样。

div {
    font-size: 1.1rem;
}

当拥有像这样的重复值时，将它们作为变量引入可能是明智的，因为您只需要更改一次而不是多个点。

$font_size: 1.1rem;

p {
    font-size: $font_size;
}
li {
    font-size: $font_size;
}

Answer 3

请尝试该代码：

HTML：

 <div class="first">
            <p>
            Example paragraph </p>
                <ul>
                    <li>Example list item 1</li>
                    <li>Example list item 2</li>
                    <li>Example list item 3</li>
                </ul>

        </div>

CSS：

.first p {
  font-size: 1.1rem;
  }

 .first ul li {
  font-size: 1.1rem;
  }

.first p {
  font-size: 10px;
  }
 
 .first ul li {
  font-size: 10px;
  }

 <div class="first">
                <p>
                Example paragraph </p>
                    <ul>
                        <li>Example list item 1</li>
                        <li>Example list item 2</li>
                        <li>Example list item 3</li>
                    </ul>
               
            </div>

Answer 4

试试这个

＆＃13;

.font{
  font-size: 10px;
  }

＆＃13;

 <div class="first">
                <p>
                Example paragraph </p>
                    <ul>
                        <li>Example list item 1</li>
                        <li>Example list item 2</li>
                        <li>Example list item 3</li>
                    </ul>
               
            </div>

＆＃13;

在子元素上应用父样式

4 个答案: