這是一個關於樣式html元素的問題

-1

波紋管是我的代碼，它假設創建一個搜索框然後設置它的樣式。出於某種原因，我嘗試賦予該框的CSS屬性不適用。我嘗試在一個單獨的文件中，並在腳本中，如下所示的CSS。這是什麼問題（我使用NetBeans和該文件以.php）這是一個關於樣式html元素的問題

這裏是代碼：

<!DOCTYPE html> 
<!-- 
To change this license header, choose License Headers in Project Properties. 
To change this template file, choose Tools | Templates 
and open the template in the editor. 
--> 
<html> 
    <head> 

     <meta charset="UTF-8"> 
     <title>cats</title> 

    </head> 
    <body> 
     <form> 
      <input type="text" placeholder="Search me..." required> 
      <input type="button" value="Search"> 
     </form> 

     <style type="text/css" media="screen"> 
form { 
       width:500px; 
       margin:50px auto; 
} 
.Search { 
       padding:8px 15px; 
       background:rgba(50, 50, 50, 0.2); 
       border:0px solid #dbdbdb; 
} 
.button { 
       position:relative; 
       padding:6px 15px; 
       left:-8px; 
       border:2px solid #207cca; 
       background-color:#207cca; 
       color:#fafafa; 
} 
.button:hover { 
       background-color:#fafafa; 
       color:#207cca; 



     </style> 

     <?php 

     // put your code here 
     ?> 
    </body> 
</html>

來源

2014-10-08 user2864059

你的HTML元素實際上並沒有CSS類「附加」給他們。它如何知道影響什麼元素？ – patricksweeney 2014-10-08 19:00:43

我明白了，因爲我在網上跟着一個例子，它是這樣編寫的 – user2864059 2014-10-08 19:02:37

這可能會有幫助：[CSS類選擇器@ MDN]（https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors） – showdev 2014-10-08 19:03:08

您正在使用CSS class selectors。給你想要的風格相應的類屬性（如patricksweeney提到）的元素：

form { 
 
    width:500px; 
 
    margin:50px auto; 
 
} 
 
.search { 
 
    padding:8px 15px; 
 
    background:rgba(50, 50, 50, 0.2); 
 
    border:0px solid #dbdbdb; 
 
} 
 
.button { 
 
    position:relative; 
 
    padding:6px 15px; 
 
    left:-8px; 
 
    border:2px solid #207cca; 
 
    background-color:#207cca; 
 
    color:#fafafa; 
 
} 
 
.button:hover { 
 
    background-color:#fafafa; 
 
    color:#207cca; 
 
}

<form> 
 
    <input type="text" class="search" placeholder="Search me..." required> 
 
    <input type="button" class="button" value="Search"> 
 
</form>

來源

2014-10-08 19:08:31 showdev

你打敗了我，並清理了古怪的大寫字母，所以我會刪除我的答案。 :-) – 2014-10-08 19:13:27

這是一個關於樣式html元素的問題

回答

相關問題