Question

我从头开始学习HTML，我没有CSS或任何Web开发语言的背景，在本教程中他们发布了以下练习：

添加＆＃34;介绍＆＃34;所有<p>元素的类。

然后我必须更改以下代码：

<!DOCTYPE html>
<html>
<head>
<style>
p.intro {
    background-color:black;
    color:white;
    border:1px solid grey;
    padding:10px;
    margin:30px;
    font-size:150%;
}


</style>
</head>
<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

为了解决这个问题，我在每个段落中添加了类，但这看起来非常低效。有没有办法允许我将类添加到所有段落？

Answer 1

p.intro选择具有类简介的所有段落。例如：<p class="intro">。要将类应用于所有段落而不必将类添加到每个段落，请将选择器更改为p

例如：

p {
    background-color:black;
    color:white;
    border:1px solid grey;
    padding:10px;
    margin:30px;
    font-size:150%;
}

Answer 2

试试这个

p{
   background-color:black;
   color:white;
   border:1px solid grey;
   padding:10px;
   margin:30px;
   font-size:150%;
}

Answer 3

你可以在jQuery中做到这一点。 $（＆＃34; p＆＃34;）。addClass（＆＃34; intro＆＃34;）; 但是你需要下载jquery文件来使用它和其他jquery功能。

Answer 4

取决于您的编辑器或操作系统。在Windows编辑器中，通常ctrl + H将打开搜索和替换对话框。将

作为搜索和替换。在Linux / Mac中，您可以使用sed。 -i表示就地（与使用新文件相对）。 s / ...部分是许多基于Linux的程序中常见的标准替换调用，它说找到空标记并将其替换为具有class =“intro”部分的标记。

sed -i '' 's/\<p\>/<p class="intro">/g' yourFile.html

如何执行此操作的列表与编辑器列表一样大。

将类添加到所有HTML段落

4 个答案: