我正在尝试从 Markdown 文件生成网页。此示例生成所需的网页视觉呈现:
header.html
<!DOCTYPE html>
<html>
<head>
<style>
code {
display: block;
white-space: pre;
padding: 20px;
line-height: 125%;
background: #eee;
border: 1px solid #ccc;
margin: 1em 0;
}
p:nth-of-type(1) code {
display: inline-block;
padding: 0;
color: red;
}
</style>
</head>
<body>
body.md
Assuming you have the IP `1.1.1.1` or `2.2.2.2`, then execute the following:
```
echo "hello world";
echo "another command here";
echo "you are done";
```
footer.html
</body>
</html>
当我运行命令时:
apt-get install markdown;
markdown body.md > body.html;
cat header.html body.html footer.html > index.html;
我在网络浏览器中看到这个:
这正是我想看到的!
但是,我想删除该p:nth-of-type(1) code
规则,因为我不想编写自定义 CSS 选择器来定位每个内联<code>
块。我有数千页 Markdown 文档需要转换为 html。手动逐页浏览以找出哪个<code>
块是内联的以及哪个是块级元素太耗时。
有没有更简单的方法
a) 编写一个 CSS 选择器,p>code
当且仅当p
具有一个且仅有一个子元素并且该子元素属于元素类型时code
或 b) 告诉命令向元素markdown
添加 css 类的方法<code>
或者c)完全不同的东西让我编写一个通用的CSS规则来定位内联代码元素与块级代码元素?
你正在寻找的是伪类
:only-child
您想要的选择器很简单
p > code:only-child
。