Question

我在另一个页面上有一些正在使用的标签（h4，p，ul和li）（包括那些干扰元素的CSS），其样式被设置为居中。我在不同的页面上有相同的标签，但不希望它们的样式相同。包含的HTML是我希望标签与页面不同的页面，而不是样式标签所针对的原始页面。

我的代码：

h4 {
  text-align: center;
}


/*Paragraph Stuff*/

p {
  text-align: center;
}


/*Header Things*/

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
}


/*Contact Stuff*/

.left {
  float: left;
}

.right {
  float: right;
}


/*Contact Header Stuff*/

#headerLeft {
  text-align: left;
}

#headerRight {
  text-align: right;
}


/*Contact p stuff*/

#pLeft1 {}

#pLeft2 {
  text-align: left;
}

#pRight1 {
  text-align: right;
}

#pRight2 {
  text-align: right;
}


/*Contact ul & li stuff*/

#ulLeft {
  text-align: left;
}

#liLeft1 {
  text-align: left;
  float: left;
}

#liLeft2 {
  text-align: left;
  float: left;
}

#liLeft3 {
  text-align: left;
  float: left;
}


/*About List Stuff*/

ul {
  margin: 0 auto;
  width: 1200px;
  padding-left: 0;
  font-size: 0;
}

li {
  font-size: 18px;
  list-style-type: none;
  width: 150px;
  height: 50px;
  line-height: 50px;
  margin: 15px auto;
  box-sizing: border-box;
  text-align: center;
}

<div class="wrapper">
  <div class="wrapper__section">

    <h3 id="headerLeft"> Want to be informed of new content? </h3>
    <p id="pLeft"> Then join my newsletter and never miss out again! </p>

    <form>
      <!-- Start Form -->
      <label for="fName">First Name:</label>
      <input type="text" id="fName" name="fName">
      <label for="email">Email:</label>
      <input type="email" name="email" id="email">
      <p>I would like more information about:</p>
      <ul id="ulLeft">
        <li><input type="checkbox" name="newart" id="newart" value="newart" class="chkbx">New Art</li>
        <li><input type="checkbox" name="announ" id="announ" value="announ" class="chkbx">Announcements</li>
        <li><input type="checkbox" name="commi" id="commi" value="commi" class="chkbx">Commissions</li>
      </ul>
      <input type="submit" id="submit" value="Submit" class="btn">
      <input type="reset" id="reset" value="Reset Form" class="btn">
    </form>
  </div>

  <div class="wrapper__section">
    <h3 id="headerRight"> Want a commission?</h3>
    <p>Contact me @ </p> <a href="mailto:kaijumydude@gmail.com">KaijuMyDude@gmail.com</a>
    <p> or DM me on social media </p>
    <a href="https://www.instagram.com/kaijumydude/" target="_blank"><img src="Images/instaicon.png" style=" width: 5%;" alt="Instagram logo"> </a>
  </div>
</div>

Answer 1

执行此操作的多种方法，如下：

1）使用所需的任何标签样式将单独的样式表附加到第二页的顶部

2）使用类在元素上指定样式。一个类将覆盖标签样式，因为它更具体。 https://www.w3schools.com/html/html_classes.asp

示例。

HTML：

<div class="alignLeft"></div>

CSS：

.alignLeft{
   text-align:left;
}

3）内联样式化元素，这些样式将覆盖大多数CSS文件样式

示例。

HTML

<div style="text-align:left;"></div>

如果您刚刚起步，我还建议您阅读一些https://www.codecademy.com/教程。

如何将标签更改为与另一页上使用的相似标签不同？

1 个答案: