mkimq

15 个鲜为人知的 CSS 技巧

使用 :not() 伪类来简化你的 CSS

:not() 伪类允许您将样式应用于所有不匹配指定选择器的元素。 这是简化 CSS 并避免手动列出元素或应用类来排除某些元素的好方法。

/* Apply styles to all elements except paragraph and anchor tags */
:not(p, a) {
  /* Your styles here */
}

使用 ::before 伪元素为损坏的图像添加样式

损坏的图像会对您网站的美观产生负面影响。 为了优雅地处理它们，您可以使用 ::before 伪元素和 content 属性来显示替代消息或图标来代替损坏的图像。

img::before {
  content: "Image not available";
  display: block;
  text-align: center;
  /* Additional styles here */
}

使用:empty伪类隐藏空元素

有时，您可能希望隐藏空元素以保持干净的布局。 您可以使用 :empty 伪类来隐藏这些元素，而不需要 JavaScript。

div:empty {
  display: none;
}

使用calc()进行动态计算

calc() 函数使您能够使用 CSS 中的不同单位执行计算，例如百分比、像素和 em。 这在创建响应式设计时特别有用。

.container {
  width: calc(100% - 20px);
}

使用 :hover 伪类和过渡属性为元素设置动画

您可以使用 :hover 伪类结合 transition 属性创建简单的动画。 这是一种无需依赖 JavaScript 或外部库即可为您的设计添加交互性的轻量级方法。

.button {
  transition: background-color 0.3s ease-in-out;
}

.button:hover {
  background-color: #f00;
}

使用*选择器应用全局样式

* 选择器是一个通配符选择器，它以页面上的所有元素为目标。 通过使用此选择器，您可以轻松地将全局样式应用到您的网站。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

设置第一个和最后一个子元素的样式

您可以使用 :first-child 和 :last-child 伪类来定位和设置父元素的第一个和最后一个子元素的样式。 这在设计列表或导航菜单时特别有用。

li:first-child {
  font-weight: bold;
}

li:last-child {
  border: none;
}

使用 currentColor 关键字来实现一致的颜色样式

.button {
  color: #f00;
  border: 1px solid currentColor;
}

使用 :focus-within 伪类来设置有焦点子元素的样式

.form-group:focus-within {
  border: 1px solid #f00;
}

实现CSS变量，方便主题切换

CSS 变量，也称为自定义属性，允许您在整个样式表中存储和重用值。 这在创建主题或需要一次更改多个值时特别有用。

:root {
  --primary-color: #f00;
}

.button {
  background-color: var(--primary-color);
}

使用 :checked 伪类样式复选框和单选输入

由于浏览器不一致，自定义复选框和无线电输入的外观可能具有挑战性。 :checked 伪类允许您在选择这些元素时设置它们的样式，从而提供一致且视觉上吸引人的用户体验。

input[type="checkbox"]:checked + label {
  background-color: #f00;
  /* Additional styles here */
}

input[type="radio"]:checked + label {
  border: 2px solid #f00;
  /* Additional styles here */
}

使用 :target 伪类在没有 JavaScript 的情况下创建滚动效果

:target 伪类允许您在元素是当前 URL 片段标识符（“#”之后的部分）的目标时设置元素样式。 这可用于创建滚动效果或突出显示特定部分，而无需依赖 JavaScript。

section:target {
  background-color: #f0f;
  /* Additional styles here */
}

实现::selection伪元素自定义文本选择

::selection 伪元素允许您设置元素中所选文本外观的样式。 这可用于通过将文本选择颜色与您网站的配色方案相匹配来创建更具凝聚力的设计。

::selection {
  background-color: #f00;
  color: #fff;
}

利用 :required 和 :optional 伪类来设置表单输入的样式

:required 和 :optional 伪类使您能够根据它们被标记为必需还是可选来设置表单输入的样式。 这有助于向用户提供有关特定表单字段重要性的视觉提示。

input:required {
  border: 2px solid #f00;
}

input:optional {
  border: 1px solid #ccc;
}

使用 ::placeholder 伪元素来设置输入占位符的样式

::placeholder 伪元素允许您在输入元素中设置占位符文本的样式。 这可用于创建视觉上一致且有吸引力的表单，同时为用户提供有用的指导。

input::placeholder {
  color: #f00;
  font-style: italic;
}
贡献者: mankueng