我正在使用 nextjs、typescript 和 scss。在 global.scss 上有 *(asterisk selector) 將填充和邊距設定為零(0)，但它不起作用
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}import "../styles/globals.scss";
import type { AppProps } from "next/app";
import "antd/dist/antd.css";
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}
export default MyApp;uj5u.com熱心網友回復：
嘗試 ：
* {
box-sizing: border-box !important;
padding: 0 !important;
margin: 0 !important;
}
uj5u.com熱心網友回復：
嘗試
body {
padding: 0;
margin: 0;
}
uj5u.com熱心網友回復：
這是因為選擇器的專一性*小于h1,h2,h3,h4,h5,h6。
這意味著h1,h2,h3,h4,h5,h6選擇器值將覆寫*.
是的，您可以!important通過完全否決任何特異性來解決這個問題，但這會破壞 css 的整個級聯功能（又名特異性），并且會在晚上困擾您。為什么？讀這個。
您的問題的正確解決方案是h1,h2,h3,h4,h5,h6在您需要的情況下自己正確覆寫選擇器上的邊距。
* {
margin: 0;
padding: 0;
}
h1,
h2 {
/* this will overwrite the margin:0 and set the color to red from the * selector */
margin-top: 10px;
color: red;
}
.mycontentwrapper h1 {
/* this will overwrite the margin:10px from the h1,h2 selector */
margin-top: 0;
}
.mycontentwrapper h2 {
/* this will overwrite the margin and color from the h1,h2 selector */
color: blue;
margin-top: 50px;
}<div class="mycontentwrapper">
<h1>Test</h1>
<h2>Test 2</h2>
</div>uj5u.com熱心網友回復：
嘗試
html {
box-sizing: border-box ;
padding: 0px ;
margin: 0px;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/360140.html
標籤：css
上一篇：如何懸停第n個孩子的行