主页 / 问题 / 975414
Accepted
Сергей Терпеливый
Asked:2020-04-27 04:17:22 +0800 CST2020-04-27 04:17:22 +0800 CST

子选择器

  • 772

我最近开始学习 HTML + CSS，在浏览子选择器时遇到了问题。有一个简单的代码：

<div>
<p>Известно, что пустыня обладает неправильной формой, которую
принимаем прямоугольной. Это достигается одним из двух способов —
<i>включением частей</i>, выходящих за пределы области пустыни
или их <i>отбрасыванием</i></p>
</div>
<p>
<h1>Текст1<h2>Текст2</h2></h1>
</p>

样式是：

p > h1{
    color: red;
}

h1 > h2{
    color: blue;
}

第一种风格和第二种风格都不起作用。我不知道为什么会这样。

html

2 个回答

  1. Best Answer

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p

    </p> 段落是块级元素，如果在结束标记之前解析另一个块级元素，则会自动关闭。

    那是

    段落（paragraph）是一个块（翻译？）元素，如果另一个块元素在</p>遇到结束标记之前开始，它会自动关闭。

    h1因此，内部没有元素p。对于 elementsh2中的元素也是如此h1。

    我了解标签<p>，但不了解h1>h2

    h1和h2- 也是块元素，一个不能在另一个内部。即使您在问题中编写 html 标记，浏览器仍会创建非嵌套的h1and h2.

    <h1>Текст1<h2>Текст2</h2></h1>

    在此处输入图像描述

    • 5 

  2. div>h1 {
  color: red;
}

div>h2 {
  color: blue;
}

div i {
  color: green;
}
    <div>
  <p>Известно, что пустыня обладает неправильной формой, которую принимаем прямоугольной. Это достигается одним из двух способов —
    <i>включением частей</i>, выходящих за пределы области пустыни или их <i>отбрасыванием</i></p>
</div>
<div>
  <h1>Текст1</h1>
  <h2>Текст2</h2>
</div>

    标志 >是可选的，一个空间就足够了。

    如果您的目标是从标题或类似内容构建视觉报价，那么：

    div.zagolovki, h1, h2 {
    display: inline-block;
}
div.zagolovki h1 {
    margin-right: 5px;
}
    <div class="zagolovki"><h1>Текст1</h1><h2>Текст2</h2></div>

    • 1

相关问题