时间戳

首页 > 解决方案 > 是否可以将规则应用于标签嵌套中的特定标签？

html - 是否可以将规则应用于标签嵌套中的特定标签？

问题描述

这是一个漂亮的，我认为我想解决的不寻常的问题。

这是关于访问 css 中的特定 html 标签。所以这是html文件中的场景

<DOCTYPE html>
   <html>
      <head>
         <link rel="stylesheet" href="MyCssCode.css"/>
      </head>
      <body>
         <p>
            Some Text!
            <h1>Even More Text!</h1> <!-- what i want to access -->
         </p>
         <h1> Lorem Ipsum Dolor Sit Amet.</h1>
      </body> 
   </html>

现在问题来了，当在 css 中时，我想特别地将规则应用于标签h1内部。p不影响h1下面的另一个（在 p 标签之外）。我已经尝试过选择器，例如+，>但我无法在网上找到真正的答案，证明这是不可能的。

标签： htmlcsscss-selectors

解决方案

问题是因为将 h1 标签放在 p 标签内是不合适的，如果您查看浏览器控制台，您会看到您的代码已损坏。

在此处输入图像描述

您可以像这样使用 div 标签，而不是使用 p 标签

<html >
<body>
    <div>
        Some Text!
        <h1>Even More Text!</h1> <!-- what i want to access -->
    </div>
    <h1> Lorem Ipsum Dolor Sit Amet.</h1>
</body>

然后你可以应用这样的样式

div h1{/* all h1 tag inside div*/}
div+h1{/* the h1 next to div*/}
div>h1{ /* h1 tags direct child of a div*/}

推荐阅读