html - 为什么“初始”属性对我不起作用?
问题描述
我正在尝试为我使用的交互式 html 元素创建类似于原生样式规则的东西,因此我使用的是类型选择器,如果与类选择器交换,则根本没有明显的区别——就我和开发工具可以告诉。我正在使用初始属性将我的自定义重置为浏览器的本机样式。但无论我尝试什么 - 它都不会成功。我担心的是我做错了什么,但我就是说不出来。请帮帮我!提前致谢!
我已经在下面发布了我迄今为止使用的所有代码的示例,以便更轻松地进行后续操作。
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 1rem;
}
ul a, ol a {
text-decoration: none !important;
}
a {
color: #2196f3;
background-color: transparent;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a[type="nativeStyling"] {
color: initial;
background-color: initial;
text-decoration: initial;
}
a[type="nativeStyling"]:hover {
text-decoration: initial;
}
<a href="#" type="nativeStyling">I'm an anchor tag</a>
解决方案
该initial
值适用于您的 a 元素就好了,问题是它没有按照您的想法执行。它将值重置为该属性的初始值(在本例中为black
)。
这与该属性的默认值以及浏览器默认样式表的效果不同。
您可能需要该revert
值,但目前只有Firefox 和 Safari 支持。
a { display: block; color: pink }
.i { color: initial; }
.r { color: revert; }
<a class="i" href="http://example.com/">One</a>
<a class="r" href="http://example.com/">Two</a>
<a class="x" href="http://example.com/">Three</a>
推荐阅读
- json - Python requests.get 与 Session.get
- qt - QML VirtualKeyboard 即将出现在 Popup 之上
- django - Django Rest - 发布数据在外键引用表中创建新行
- batch-file - 批处理:如果源文件夹上的文件名包含 x,则移动到 x 目标文件夹
- google-cloud-platform - Firestore 云函数 http 请求
- javascript - 承诺不会在循环内返回
- python - 如何使用 Python 从两个绘制的图表中找到 RMSE?
- c++ - 为什么在成员初始化器列表中初始化数组时不需要括号?
- android - 如何在 Android Studio 中为图像按钮添加渐变颜色,中心颜色为最大
- java - MockMvc 不受 spring.data.web.pageable.size-parameter 参数影响