0
好吧，這是我第一次發生這種情況，我曾經在我的機器上使用過css locale進行學習，這次它有一個奇怪的行爲（或者我認爲是這樣）。CSS不重寫用戶代理按鈕樣式
由於我試圖對我的頁面樣式不適用於按鈕。我一直在尋找很多修正這一點，就像使用reset.css，speeling <!DOCTYPE html>權，有在我的CSS聲明type="text/css"等
使用內聯CSS工作正常，但編寫相同的代碼在CSS文件沒有效果，奇怪的是，其他的CSS像表格或頁面的其他部分一樣工作。
所以顯然我不能覆蓋用戶代理樣式表按鈕樣式。
這裏是我的html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Botões</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
</head>
<body>
<div class="container">
<ul id="flex-container">
<li>
<button class="btn normal">Apertar</button>
</li>
<li>
<button class="full">Apertar</button>
</li>
<li>
<button class="block">Apertar</button>
</li>
<li>
<button class="outlined">Apertar</button>
</li>
<li>
<button class="clear">Apertar</button>
</li>
</ul>
</div>
</body>
</html>
我的CSS文件：
//PAGE:
html, body {
height: 100%;
box-sizing: border-box;
}
.container {
width: 95%;
margin: 0 auto;
}
ul#flex-container {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
ul li {
text-align: center;
padding: 30px 0;
width: 20%;
border: 1px dotted lightgray;
}
// ================================
button.btn {
font-size: 2.3em;
font-weight: bold;
text-transform: uppercase;
color: white;
cursor: pointer;
}
這是控制檯輸出，當我運行此文件
input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
padding: 1px 6px;
}
user agent stylesheet
input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
align-items: flex-start;
text-align: center;
cursor: default;
color: buttontext;
background-color: buttonface;
box-sizing: border-box;
padding: 2px 6px 3px;
border-width: 2px;
border-style: outset;
border-color: buttonface;
border-image: initial;
}
user agent stylesheet
input, textarea, select, button {
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em 0em 0em 0em;
font: 13.3333px Arial;
}
user agent stylesheet
input, textarea, select, button, meter, progress {
-webkit-writing-mode: horizontal-tb;
}
user agent stylesheet
button {
-webkit-appearance: button;
}
我的文件結構類似：
|- index.html
|- css folder
|- custom.css
|- reset.css
而這就是我的按鈕看起來像：
那麼，爲什麼我不能覆蓋用戶代理的風格，如果我一直在做這樣的事情和工作？這是新的Google Chrome更新嗎？有沒有辦法做到這一點？