个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
在学习 CSS 类(class)时，我遇到了一个有趣的问题。
在 body 上定义我的 font-family 不会对显示的字体进行任何更改，但它在使用 * 或其他任何地方定义时有效，(如 p、标题 等)。为什么会这样？
这里有代码:
这是index.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome</title>
<link rel="stylesheet" href="css/reset.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body> ...
</body>
</html>
这是style.css
body{
font-family: 'Lato', sans-serif;
font-size: 15px;
line-height: 1.5em;
}
我也在用 Meyer 的 reset.css
谢谢!
最佳答案
tl;dr:始终在加载站点的自定义 CSS 资源之前加载重置和外部资源。
解释
您在这里遇到的是重置 CSS 代码的特殊性问题。
当两个 CSS 规则相互冲突时，浏览器将使用两者中具有最具体选择器的那个(或者，在同等具体的情况下，它使用最后加载的规则)。
Mozilla 开发者网络将“Specificity”定义为:
The specificity is a weight that is applied to a given CSS declaration based on the count of each selector type. In the case of specificity equality, the latest declaration found in the CSS is applied to the element. Specificity only applies when the same element is targeted. CSS rules that directly target an element will always take precedence over rules that an element inherits from an ancestor.
你说你正在使用 Meyer's CSS Reset .该文件包含一行内容为 font: inherit，这与您的 font-family 规则(以及您的 font-size)直接冲突.在这种情况下，您已经成为特定性定义中最后一句话的牺牲品:重置的字体属性应用于段落、标题、列表等，并且“直接针对元素的规则将始终优先于规则元素继承自祖先”(在本例中，祖先是 body。
这里有几个选项。首先，仔细检查您是否在重置后 加载了 CSS。这可能会解决它，但也可能不会。您可以使您的选择器比重置中的选择器更具体，这应该不难，因为它们旨在使用尽可能低的特异性。这就是使用 body * 作为选择器的原因。
第三个选项是不推荐的:在您希望被视为比所有其他规则具有更高优先级的任何规则上使用 !important 装饰器。这很危险，因为它很容易导致意外碰撞。
示例
Non-Working Example:这是一个不起作用的例子。这个例子不起作用，因为 Stack Snippets 在 HTML 部分之前加载了 CSS 部分——因为我在 HTML 部分中包含了重置，并且因为两个 CSS 资源有一个冲突的相同规范规则，最近加载的规则得到应用。
body {
font-family: 'Lato', sans-serif;
}<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<p>Hello, world</p>工作示例:重新排序 CSS 资源:在这里您可以看到，如果我在重置后显式加载我的 CSS，问题就解决了。现在正在使用我的重置规则。
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<style type="text/css">
body {
font-family: 'Lato', sans-serif;
}
</style>
<p>Hello, world</p>工作示例:使用更具体的选择器:如果您无法更改包含资源的顺序，则此示例有效。
body * {
font-family: 'Lato', sans-serif;
}<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<p>Hello, world</p>工作示例:使用 !important 装饰器:就像我之前说的，对于使用 !important 装饰器，总是要经过深思熟虑，作为they're generally considered bad practice .
body {
font-family: 'Lato', sans-serif !important;
}<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<p>Hello, world</p>关于html - 字体系列声明不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31438461/
25
4
0
我在覆盖 ReSwift Pod 中的函数时遇到问题。我有以下模拟类(class): import Foundation import Quick import Nimble import RxSwi
我有一个类似于下面的继承结构。我正在采用 Printable 协议(protocol)并努力覆盖 description 属性。我遇到了一个谷歌此时似乎不知道的奇怪错误，提示为第三类，并引用了第二类和
我有一个类“Cat”和 Cat 类的一个子类“DerivedCat”。 Cat 有一个函数 meow()，而 DerivedCat 覆盖了这个函数。 在应用程序中，我声明了一个 Cat 对象: Cat
Kotlin 变量 变量是用于存储数据值的容器。 要创建一个变量，使用 var 或 val，然后使用等号（=）给它赋值： 语法 var 变量名 = 值 val 变量名 = 值 示例 va
C 中的所有标识符在使用前都需要声明，但我找不到它在 C99 标准中表示的位置。 我觉得也是指宏定义，不过定义的只是宏展开顺序。 最佳答案 C99:TC3 6.5.1 §2，脚注 79 明确指出: T
今天我的博客提要显示错误: This page contains the following errors: error on line 2 at column 6: XML declaration
在编写 IIF 语句、表和下面给出的语句时出现错误。 陈述: SELECT IIF(EMP_ID=1,'True','False') from Employee; table : CREATE TAB
我正在创建一个登录 Activity ，我希望它在按下登录按钮时显示进度对话框，我声明、初始化并调用了它，但它没有显示。但是当我在创建时调用进度对话框时，它出现了 这是我的代码: public cla
当我输入声明语句时: Vector distance_vector = new Vector(); 我收到错误(在两种情况下都在“双”下划线): Syntax error on token "doub
我正在本地部署在docker-for-desktop中。这样我将来可以迁移到kubernetes集群。 但是我面临一个问题。使用永久卷时，docker容器/ pod中的目录将被覆盖。 我正在拉最新的S
我有一个 MyObject 类型的对象 obj，我声明了它的实例。 MyObject obj; 但是，我没有初始化它。 MyObject 的类看起来像: public class MyObject {
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 9 年前。 Improv
这个问题已经有答案了: Android: Issue during Arraylist declaration (1 个回答) 已关闭 9 年前。 有时我会看到 ArrayList 声明如下 Arra
我对java比较陌生，经过大量搜索，我无法将相关问题的任何解决方案与我的解决方案配对。我正在尝试实现一种非常简单的方法来写入/读取数组，但编译器无法识别它。 “键盘”也是一个“无法识别的变量”。这是数
简短:何时分配内存 - 在声明或初始化时？ 长整型:int x;将占用与int z = 10;相同的内存。 此外，这对于包含更多数据的自定义对象将如何工作。假设我有这个对象: public class
我需要使用此程序更好地理解函数定义、声明和正确调用。我真的需要了解如何使用它们。您能否向我展示编写此程序的正确方法(所有三个都正确并进行解释)？ #include #include quad_eq
这是我的主要功能以及我要传递的内容。 int main(void){ struct can elC[7]; // Create an array of stucts Initiali
我想知道是否有更好的方法来完成此任务； 我有一个对象 - 其中一个属性是字典。我有一组逗号分隔值。我需要过滤 Dictionary 并仅获取 Dictionary 值至少与其中一个值匹配的那些元素 这
下面的using-declarations有什么意义 using eoPop::size; using eoPop::operator[]; using eoPop::back; using eoPo
我的问题更像是一个关于 for 循环样式的好奇问题。在阅读别人的一些旧代码时，我遇到了一种我以前从未见过的风格。 var declaredEarlier = Array for(var i=0, le
我是一名优秀的程序员,十分优秀！