css - 这些 CSS 规则的目的是什么？-6ren

css - 这些 CSS 规则的目的是什么？

转载作者：行者123 更新时间：2023-12-03 18:29:23

25

4

这个问题在这里已经有了答案:

What does *:before and *:after do in css

(4 个回答)

Why use * selector in combination with *::before and *::after [duplicate]

(7 个回答)

1年前关闭。

所以我一直试图自己找出下面的代码实际上对每一件事做了什么，但我一直无法完全理解。

/*Global Style*/
*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

我从视频中复制了它，所以它并没有真正向我解释这一切。
如果您能向我解释这段代码，我将不胜感激!

最佳答案

*是 HTML 文件中所有元素的全局选择器。
*::before插入东西之前内容已选择
*::after插入东西后内容已选择

为了回答你的问题，HTML 中的所有元素都会有 0 padding , 0 margins和 box-sizing: inherit

*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

运行示例。希望这是有道理的。

引用: https://www.w3schools.com/cssref/sel_after.asp

引用: https://www.w3schools.com/cssref/sel_before.asp

p::after { 
  content: " - Remember this";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

p::before { 
  content: " - Remember this";
  background-color: pink;
  color: red;
  font-weight: bold;
}

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<p>My name is Donald</p>
<p>I live in Ducksburg</p>

</body>
</html>

关于css - 这些 CSS 规则的目的是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58981682/

25

4

0

文章推荐： python-3.x - 从工作簿中删除工作表 - python

文章推荐： python - numpy.polyfit vs numpy.polynomial.polynomial.polyfit

文章推荐： oracle - 使用 SELECT 返回过去 6 个月的记录

OAuth2 `expires_in` 目的
我正致力于通过 OAuth 合并外部 API，但对 expires_in 属性的用途有点迷惑。通过阅读，应该对 api token 的使用进行防御性编码，因为您应该预料到 token 在任何时候都可能
spring - Spring中bean的用途/目的
有人可以概述或总结一下 Spring 框架上下文中 bean 的用途吗？我了解标准的 Java bean(没有 arg 构造函数、getter/setter，通常是序列化的)，但 Spring be
opengl - OpenGL程序管道对象的正确用法/目的
使用 OpenGL 4.1 和 ARB_separate_shader_objects，我们能够在着色器程序中存储着色管道的不同阶段。众所周知，要使用这些，我们需要将它们附加到程序管道对象，然后绑定(
optaplanner - MoveIteratorFactory 目的
正如我从文档中了解到的那样，“MoveIteratorFactory”的目的是生成每一步都需要执行的 Action 。 “getSize”方法的移动子集有多大？ “createOriginalMove
cmake - InstallRequiredSystemLibraries 目的
请解释 CMakeLists.txt 中这一行的目的是什么: 包括(InstallRequiredSystemLibraries) 我在 CMake 示例中看到这一行，但找不到好的解释，为什么我需要它
android - 多个布局中的一个过程/目的
这里是新手。我仍在尝试理解在多个布局中运行单个进程或目的的概念。例如，我想在我的申请中添加“提交后”功能。有一个包含标题、内容等文本框的主布局，以及一个链接到另一个布局以选择类别的按钮。我的问题是，
ios - willSendRequestForAuthenticationChallenge 目的
我在看 Box Oauth2.0 View Controller : https://github.com/box/box-ios-sdk-v2/blob/master/BoxSDK/OAuth2/B
Java clipboardOwner 目的？
我编写了一个将字符串复制到系统剪贴板的 Java 应用程序。构造函数使用 Clipboard.setContents(Transferable contents, ClipboardOwner own
c# - 命令模式 - 目的？
阅读此文后:http://sourcemaking.com/design_patterns/command 我还是不太明白为什么我们需要这个。最佳答案想法是，如果命令被封装为对象，那么这些命令可以
c++ - 专业模板 - 目的
我知道 c++ 中的模板是做什么的，但是今天我看到了一些奇怪的代码: template <> void swap(foo &a, foo &b) { a.name = b.name; a.
c# - IEnumerator 目的
我不太明白 C# Collections 中 IEnumerator 的用途是什么。它的用途是什么，为什么要使用它？我试着在线查看 http://msdn.microsoft.com/en-us/l
c - #line - 目的？
不幸的是，我今天做了一些代码考古(同时重构了一些旧的危险代码)并发现了这样的小化石: # line 7 "foo.y" 能在里面找到如此古老的宝藏，我完全惊呆了。我在 C 编程的网站上阅读了它。然而，
java - Hibernate @UniqueConstraint 目的
您能否澄清一下此注释的实际用途？ - 如果我们没有使用数据库中的 SQL 表定义定义相应的约束，会发生什么情况。当我们尝试插入时，hibernate 会检查唯一性吗？或者这就是DB的目的吗？如果 hi
javascript - join ("") 在只有一个元素的字符串数组上调用。目的？
我在视频教程中看到过这段代码: const navToggle = ["Menu"].join(""); $(".site-header").prepend(navToggle); 我明白它的基本作用
c++ - Gtkmm scroll_to() 目的
我想知道这个成员函数的 scroll_to(TextBuffer::iterator& iter, double within_margin = 0)参数 within_margin。 API 是这样
search - 是否可以将子目录提交到目录以用于 seo 目的？
我想知道是否可以将子目录提交到目录例如，假设您有 site.com/directory 可以将子目录提交到目录。我即将开始为希望她的网站在搜索引擎中排名靠前的客户进行一些搜索引擎优化。我知道实现此目的
c++ - STL 迭代器 - 目的
STL 迭代器的用途是什么？为什么程序员要创造这个概念？最佳答案迭代器允许您将算法与容器分开。只要您有开始和结束迭代器，并且知道迭代器的功能(随机访问等)，您就可以在迭代器指定的范围内进行操作。例
objective-c - NSUTF8StringEncoding 目的
NSData *responseData = [NSURLConnection sendSynchronousRequest:theRequest returningResponse:&respons
linux - I2C_SLAVE ioctl 目的
我正在编写代码，使用通用的 linux i2c 驱动程序 linux/i2c-dev.h 实现一个简单的 i2c 读/写功能我对 ioctl 感到困惑:I2C_SLAVE 内核文档说明如下: You
Scala collection.mutable.Cloneable 目的
在尝试克隆可变集合时，我最初的方法是对 mutable.Cloneable 特征使用 clone() 方法。但是，这取决于创建引用副本的 java.Object.clone 实现，而不是深拷贝。通过测

首页

博学

6Ren·AI

商城

css - 这些 CSS 规则的目的是什么？