为特定div指定css

时间:2017-03-29 02:03:34

标签: html css html5 css3

在制作单页网站的过程中,我的表单的css干扰了我的页面的其余部分。可以指定div而不是逐个通过css并指定div。任何帮助表示赞赏。

2 个答案:

答案 0 :(得分:0)

您尝试使用的表单包含一些非常通用的CSS - 它为{* 1}}和<body>元素设置样式,适用于初学者以及所有<header>元素。如果要限制表单中CSS对网站其他部分的影响,则需要使其更具体。例如,如果您更改

<input>

header {
  position: relative;
  margin: 100px 0 25px 0;
  font-size: 2.3em;
  text-align: center;
  letter-spacing: 7px;
}

它仅适用于具有#form header { position: relative; margin: 100px 0 25px 0; font-size: 2.3em; text-align: center; letter-spacing: 7px; } 属性的元素内的<header>元素(在这种情况下,表示您尝试使用的表单上的ID) 。您可能必须将这个更具体的选择器添加到影响页面其他部分的表单中的几个CSS选择器中。

答案 1 :(得分:0)

我建议您阅读CSS Selectors,这是CSS中可以选择HTML元素特定部分的不同方法。

最基本的是:

元素选择器

p { color: #ff0000; }

这将选择HTML中与CSS规则匹配的任何元素。在这种情况下,它将匹配所有<p>

ID选择器

#paragraph { color: #ff0000; }

这将选择将唯一ID设置为“paragraph”的元素。在这种情况下,它将选择以下任何元素:

<div id="paragraph"></div>
<p id="paragraph"></p>
<span id="paragraph"></span>

请注意,ID应该是唯一的。您不应该在HTML中使用具有相同ID的多个元素。

班级选择器

.paragraph { color: #ff0000; }

类选择器选择具有与CSS规则匹配的类名的所有元素。请注意,类名不需要是唯一的,与ID不同,许多元素可以共享相同的类名。

上述规则符合以下所有元素

<div class="paragraph"></div>
<p class="paragraph header"></p>
<span class="image paragraph"></span>

您还可以将这些(和其他CSS选择器)组合在一起,以更具体地根据您的规则选择和设置样式。例如,如果您只想选择类名为<p>的所有paragraph,但不要选择具有相同类的其他元素。你会写下面的内容:

p.paragraph { color: #ff0000; }

解决您的问题

凭借上述知识,您可以轻松解决您遇到的问题。表单的CSS非常通用,它使用元素选择器来选择页面上的所有元素。您可以通过在HTML元素上设置类和ID,然后调整CSS规则以选择要更改的特定元素来解决此问题。