css样式名称点和空格

记得去年我在咖啡馆改代码的时候，看着屏幕突然发现了这一点。
当时有一个小项目，站点结构比较乱，而且样式覆盖有问题。
例如，我为所有 .alert 警报添加了红色背景，并且 .alert 和 .close 设置按钮也变成了红色。
显然，我希望按钮具有不同的效果。
这时我才意识到.alert直接搜索所有具有该类的对象，无论它们在哪里； .alert.close 要求 .close 必须位于 .alert 中。

就像找人一样。
数字点（.）就像叫名字一样，“嘿，那个叫王的家伙！”无论是在家里还是不在家里，无论是在朋友家还是在朋友家，都没有关系。
空格（ ）就像说“王家的亲戚”，“找客厅里一个姓王的人”。
你需要先找到王家人，然后再去客厅找他。

后来我专门做了一个本地的例子。
更改 .card .title 中的字体大小后，.card 下的所有标题都发生更改，甚至那些相距几级的标题也会受到影响。
如果您使用 .card space.title，则必须是直接的。

等等，还有一件事。
上次我使用 Sass 预处理器时，它似乎可以更智能地处理空间并自动提取级别。
但在纯 CSS 中，空格是一条严格的规则。
添加更多，但不要添加更多。
.a .b .c 和.a .b 具有完全不同的效果。

我突然想到，如果HTML结构特别复杂，使用空格选择器会不会让我显得秃头？例如，.container .item .button .active... 代码看起来像树结构，但实际匹配取决于嵌套顺序。

有时候我觉得选择时期和空间就像修路一样。
点用于绘制直线，可以到达您需要的任何地方；空间用于挖掘隧道，上方必须有道路才能钻孔。
两种方法都能通向结局，但思路却完全不同。

css中怎么添加空格符号

直接快速添加实体字符，例如： 。

使用calc()动态调整空间宽度，如：margin-right: calc(1 em + 5 px);。

伪元素之间添加空格，如： .spaced-element::after { content: "";显示：内联块；宽度：1 0px； }。

注重响应式设计和兼容性。

CSS怎么清除空格_CSS清除元素内外空白与间距方法教程

2 02 2 年，我在南方城市做前端，CSS确实很头疼。
空白区域和空白区域需要彻底清理。

盒子模型重置是第一步。
想一想，这样写{margin:0;padding:0;box-sizing:border-box;}这行的效果是什么？所有元素的margin和padding都重置为零，box-size设置为border-box，宽度包括padding和border。
这样就不会出现意外溢出，并且缝隙也很少。

然后文本是空白的。
您应该能够使用空白属性。
例如，white-space:abwrap;连续的空格字符会被合并，文本不会换行，适合标题。
white-space:pre;，根据代码块的情况，保留所有空白字符，并且还保留换行符。
white-space: pre-wrap;，空白字符被保留但可能会自动换行，常用于用户注释中。
White-space：预行；，将空白字符合并为空格，并保留换行符，适合原文。

内联块元素是最烦人的。
display:inline-block;，元素之间会出现像幽灵一样的间隙。
该怎么办？一种方法是将父元素的 font-size 设置为 0，然后重置子元素的 font-size。
但更常用的可能是 Flexbox 或网格布局。
根元素是display:flex;或显示：网格；。
子元素就没那么麻烦了。
差距该功能控制间距，非常方便。

画面滞后也是一个大问题。
图片默认与基线对齐，下方留有空白。
一种解决方案是将图像显示设置为阻止。
或者调整垂直对齐。

现在布局功能更容易使用。
gap属性在flexbox和grid中，gap:1 0px;，设置子元素之间的间隙，边距不会塌陷。
行高控制行间距，字母间距，字间距调整字符和字间距。
有时会使用负边距，但要小心。
transform:translate() 也可以解决这种情况。

总之，CSS应该被广泛使用。
2 02 2 年的那个时候，我也很迷茫，后来才意识到这一点。
也许我太极端了，但我真的不得不这样做。

css中“>”(大于号)、"~"(波浪号)、" "(空格)、","(逗号)、"+"(加号)详解

上周，一位客户问我 CSS 中的这些符号是什么意思，我向他解释了这一点。
让我们从“大于”符号开始。
这个符号是“>”。
它是一个子元素选择器，也就是说选择它后面的直接子元素。
例如，如果您有一个“div”元素，其中包含“p”元素，则可以使用“div > p”选择器来选择该“p”。

然后是“波浪号”，也称为“~”，用于选择某个元素之后的所有相同类型的元素。
例如，如果您有一个“.box”元素，后跟多个“h2 ”元素，请使用“.box~h2 ”来选择这些“h2 ”元素。

后跟一个“空格”，该符号用于选择某个元素之后的所有子元素，无论它们是否直接跟随。
例如，“div p”选择“div”中的所有“p”元素，无论其位置如何。

“逗号”符号用于对选择器进行分组，以便多个选择器可以使用相同的样式。
例如，“div, p”选择所有“div”和“p”元素。

最后一个是“加号”，即“+”。
这用于选择紧接在元素后面的元素。
这两个元素必须位于同一父元素中。
例如，“div+p”仅选择紧随“div”之后的第一个“p”元素。

这些符号对于布局非常重要，尤其是对于初学者。
了解如何使用这些选择器将使您更好地控制网页的样式。
反正你能搞清楚，用得好的话，网页的布局会好看很多。
我还在想，有时候使用这些符号还是有点复杂。