Question

我正在将一个盒子阴影应用于表单，因此它的所有输入都是如此。对于提交按钮，我将它作为一个特定的类，我正在尝试使用box-shadow：none，但它似乎没有采取。知道为什么吗？

的CSS：

body {
  background: #b3b3b3;
  font: 16px helvetica, arial, sans-serif;
}

.clear_both {
  clear: both;
}


/* Heading */

#HeaderContainer {
  background: #272727;
  height: 120px;
  box-shadow: 5px 5px 5px #7f7f7f;
}

#NavigationContainer {
  position: relative;
  float: right;
  top: 90px;
  margin: -5px 30px 0px 0px;
}

#NavigationContainer .current_page a {
  color: #2e7de8;
  text-shadow: 0px 0px 10px #2e7de8;
}

#NavigationContainer a:hover {
  text-shadow: 0px 0px 15px #2e7de8;
}

#NavigationContainer li {
  display: inline;
  margin-left: 40px;
  padding: 5px;
}

#NavigationContainer a {
  text-decoration: none;
  color: #FFF;
  font: bold 20px helvetica, arial, sans-serif;
}

/* Content */

#MainContent {
  width: 960px;
  margin: 20px auto 40px auto;
}

#ContentRightColumn {
  float: right;
  width: 240px;
  background: #272727;
  padding: 20px 20px 40px 20px;
  margin-top: 20px;
  color: #fff;
  border-radius: 15px;
  box-shadow: 5px 5px 5px #7f7f7f;
}

#ContentRightColumn h1 {
  font-size: 24px;
  font-weight: bold;
}

#ContentRightColumn h3 {
  font-size: 14px;
  font-weight: bold;
}

#ContentRightColumn p {
  font-size: 16px;
}

.news_item {
  margin-top: 15px;
}

#ContentLeftColumn {
  width: 640px;
  padding: 20px;
}

#ContentLeftColumn h1 {
  background: #272727;
  color: #FFF;
  max-width: 500px;
  font-size: 24px;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 15px;
  box-shadow: 5px 5px 5px #7f7f7f;
  position: relative;
  right: 40px;
} 

#ContentLeftColumn p {
  text-indent: 1em;
}

.content_item {
  margin-top: 20px;
}

.content_item p {
  margin-top: 20px;
}

.content_item h2 {
  font-weight: bold;
  font-size: 24px;
  color: #004dd4;
  text-shadow: 3px 3px 4px #7f7f7f;
  right: 20px;
}

/* Footer */

#FooterContainer {
  background: #272727;
  color: #fff;
}

#FooterContainer li {
  display: inline;
}

#FooterContainer input, #FooterContainer textarea {
  display: block;
  width: 100%;
}


#ContactNavigationContainer {
  float: right;
}

#FooterRightColumn {
  width: 40%;
  float: right;
  margin: 20px 150px 20px 50px;
}

#FooterRightColumn form {
  margin-top: 20px;
  padding: 15px 20px;
}

#FooterRightColumn input, #FooterRightColumn textarea {
  margin: 5px;
  box-shadow: inset 5px 5px 8px black;
  border: none;
  font-size: 16px;
  background: #b3b3b3;
  padding: 5px 10px;
}

#FooterRightColumn textarea {
  height: 160px;
}


#FooterRightColumn .current_contact_option {
  margin-right: 20px;
  padding-right: 20px;
  border-right: 1px solid #FFF;
  color: #2e7de8;
  font-weight: bold;
  text-shadow: 0px 0px 5px #2e7de8;
}

#FooterLeftColumn {
  width: 40%;
  padding: 40px 50px;
  margin-left: 100px;
  margin-top: 20px;
}

#FooterLeftColumn h1 {
  font-weight: bold;
  font-size: 24px;
  position: relative;
  right: 20px;
}

#FooterLeftColumn p {
  padding: 20px 0px;
  text-indent: 1em;
}

.submit_button {
  position: relative;
  width: 80px;
  float: right;
}

HTML：

<html>
<head>
  <title>B.workshop Home</title>
  <link rel="stylesheet" type="text/css" href="../css/reset.css" />
  <link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>
<body>
  <div id="HeaderContainer">
    <img src="../images/logo.png"></img>
    <div id="NavigationContainer">
      <ul id="NavigationMenu">
        <li class="current_page"><a href="home.html">Home</a></li>
        <li><a href="#">Technologies</a></li>
        <li><a href="#">Projects</a></li>
      </ul>
    </div> <!-- Close NavigationContainer -->
  </div> <!-- Close HeaderContainer -->
  <div id="MainContent">
    <div id="ContentRightColumn">
      <h1>News</h1>
      <div class="news_item">
        <h3>Mon. October 28th</h3>
        <p>I need to build a portfolio, you need a website or application. Until I I get a few jobs under the belt I'm offering to work at the equivalent of a paid interns wage. Take advantage of this while you can!</p>
      </div>
      <div class="news_item">
        <h3>Mon. October 26th</h3>
        <p>The website is now live!</p>
      </div>
    </div> <!-- Close RightColumn -->
    <div id="ContentLeftColumn">
      <h1>Welcome to Brett's Workshop...</h1>
      <div class="content_item">
        <h2>So who are you?</h1>
        <p>Hi, my name is Brett Sprouse and you've found my homepage! I'm a freelance web developer and programmer. Take a look around and if you think you may have a project I can help you with then head over to the contact page and share it with me.</p>
      </div>
      <div class="content_item">
        <h2>Ok, and what can you do for me?</h2>
        <p>Well, I can make you a webpage of course. Not just that, but setup hosting, provide server maintenance, website support, both per job or on a contractual basis. I can likely also take over support for existing websites in addition to the one I may make from scratch.</p>
        <p>Everything is coded to the current html specifications including html5 and css3 (when applicable, many browsers still do not support the current html5/css3 specifications). I said I'm a programmer as well so this means I can work my way around javascript for front end/client side interactivity as well as server side scripting preferentially with python though I can also use php if it's for some reason forced upon me.</p>
      </div>
      <div class="content_item">
        <h2>Is that it?</h2>
        <p>What do you mean is that it!? Ok, ok, I can also develop desktop applications, tools and utilities, or scripts to help automate otherwise monotonous tasks; pretty much anything within a programmers domain. I know quite a few languages, libraries, frameworks, and can learn new ones rather quickly. Both windows and linux so if there's a task you believe can be solved with programming I can likely make that happen for you. Do keep in mind however that I am only one guy so there is a limit to the size of projects in which I can handle, but if you're not sure it doesn't hurt to ask. </p>
      </div>
    </div> <!-- Close LeftColumn -->
  </div> <!-- Close MainConent -->
  <div id="FooterContainer">
    <div id="FooterRightColumn">
      <div id="ContactNavigationContainer">
        <ul id="ContactNavigation">
          <li class="current_contact_option">Message Form</li>
          <li>Live Chat</li>
        </ul>
      </div> <!-- Close ContactNavigationContainer -->
      <form>
        <input type="text" value="Name" name="name"></input>
        <input type="text" value="Email" name="email"></input>
        <textarea type="text" value= "Message" name="message"></textarea>
        <div class="submit_button"><input type="submit" value="submit"></input></div>
      </form>
    </div> <!-- Close FooterRightColumn -->
    <div id="FooterLeftColumn">
      <h1>Contact</h1>
      <p>So you've looked me over and decided to give me a shot. Well you won't be let down. Just use the form on your right to send me a shot description and anything else you feel is necessary and I'll get back to you shortly with a proposal. If you've happened to catch me when I'm on the computer and would like to talk directly feel free to use the new live chat system!</p>
    </div> <!-- Close FooterLeftColumn -->
  <div class="clear_both"></div>
  </div> <!-- Close FooterContainer -->
</body> 
</html>

Answer 1

这只是关于specificity的问题 - 您只需要比初始声明更具体。

!important,不需要使用以下内容：

#FooterRightColumn .submit_button input {
    box-shadow: none;
}

jsFiddle example - 它有效。

最初，您通过#FooterRightColumn input添加了阴影。更确切地说，取而代之的是#FooterRightColumn .submit_button input。

为什么输入的框阴影没有被重置？

1 个答案: