如何更改 CSS 中的样式，使其仅影响“部分”或“div”中的代码

Question

我想给一段HTML代码的渲染设置样式，自动生成然后用一个header完成。我可以在 header 中添加样式信息，但对生产和插入的 HTML 块影响有限。（背景：我正在使用 Pandoc 呈现降价文本，其中生成的 HTML 片段在写入文件之前插入到模板中。）。

问题是如何为 HTML 的一部分更改 CSS 规则。我假设（天真地）基于 class 的选择器，例如img.content 将应用于 div 中包含的所有元素，其中 classe:

头部样式部分

...
img.content {max-height: 300px;}
...

并在 body

...
<img ... another image ... >
...
<div class=content> 
....
    <img ... myImage ... > 

</div>

其中 myImage 将与指定的 max-height 一起显示，但其他图像（例如 anotherImage 不受影响。

这好像不行，但是我不能在使用img标签的地方加上class=content。

有没有办法在 HTML/CSS 中实现只影响代码某些部分的选择器的规则？

我加个运行例子说明我的意思：

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <link rel="stylesheet" href="/resources/templates/static/w3c.css" type="text/css">
  <style>
    img {
      max-height: 20px;
    }
    
    img.content {
      max-height: 40px;
    }
  </style>
</head>

<body>

  <h1>My First Heading</h1>
  <img src="pic_trulli.jpg" alt="Italian Trulli">
  <p>My first paragraph.</p>
  <div class=content>
    <!-- code I cannot change but where pictures should be bigger  -->
    <img src="pic_trulli.jpg" alt="Italian Trulli">
    <!-- end -->
  </div>

</body>

</html>

Answer 1

是的，您可以使用子选择器>。 > 组合器选择作为第一个（父）元素的直接子节点的节点。 img.content 仅当您为图像指定了 class 调用内容时才有效。

div.content > img {
  width: 100%;
  height: 100%;
}

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <link rel="stylesheet" href="/resources/templates/static/w3c.css" type="text/css">
  <style>
    img {
      max-height: 20px;
    }
    
    img.content {
      max-height: 40px;
    }
  </style>
</head>

<body>

  <h1>My First Heading</h1>
  <img src="pic_trulli.jpg" alt="Italian Trulli">
  <p>My first paragraph.</p>
  <div class="content">
    <!-- code I cannot change but where pictures should be bigger  -->
    <img src="pic_trulli.jpg" alt="Italian Trulli">
    <!-- end -->
  </div>

</body>

</html>

Answer 2

div 有 class .content 不是 img，所以它是 .content img

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <style>
    img {
      max-height: 20px;
    }
    
    .content img {
      max-height: 40px;
    }
  </style>
</head>

<body>

  <h1>My First Heading</h1>
  <img src="https://i.ibb.co/hZj77BZ/lena01.jpg" alt="Lena">
  <p>My first paragraph.</p>
  <div class=content>
    <img src="https://i.ibb.co/hZj77BZ/lena01.jpg" alt="Lena">
    <!-- end -->
  </div>

</body>

</html>

如何更改 CSS 中的样式，使其仅影响“部分”或“div”中的代码

How to change a style in CSS such that it affects only code in a `section` or a `div`

html

css

css-selectors