常用的一些 CSS 技巧二 | 伪类伪元素

2021-03-26 本文已影响0人 lio_zero

你可以看看其他常用的 CSS 技巧：

CSS 重置盒模型

*,
*::before,
*::after {
  box-sizing: border-box;
}

当与将所有元素边距减为零的重置规则或父规则一起使用时，这会将上边距应用于其他元素后面的所有元素。这是一种快速获得垂直节奏的方法。

* + * {
  margin-top: 1.5rem;
}

如果你真的想更具选择性，那么我喜欢在以下特定情况下将其作为后代使用：

article * + h2 {
  margin-top: 4rem;
}

这类似于堆栈的思想，但更针对标题元素，以便在内容节之间提供更多的喘息空间。

清除浮动

使用 :after 伪元素并应用 content: '' 以使其影响布局。
使用 clear: both 做出明确的元素都过去左右浮动。
将该元素设置为 display: block 块级元素才能正常运行
注意：仅在用于 float 构建布局时，此选项才有用。考虑使用更现代的方法，例如 flexbox 或 grid 布局

.clearfix::after{    
  content: '';
  display: block;
  clear:both;
}

:focus 状态样式

.input {
  transition: 180ms box-shadow ease-in-out;
}
.input:focus {
  box-shadow: 0 0 0 3px hsla(245, 100%, calc(82%), 0.8);
  border-color: hsl(245, 100%, 42%);
  outline: 3px solid transparent;
}

:focus

:focus-within

创建带有视觉，不可编辑前缀的输入。

当用户与 <input> 字段交互时，使用 :focus-within 伪类选择器为父元素设置样式。

<div class="input-box">
  <span class="prefix">+08</span>
  <input type="tel" placeholder="888 8888" />
</div>

css 如下

.input-box {
  display: flex;
  align-items: center;
  max-width: 300px;
  background: #fff;
  border: 1px solid #a0a0a0;
  border-radius: 4px;
  padding-left: 0.5rem;
  overflow: hidden;
  font-family: sans-serif;
}

.input-box .prefix {
  font-weight: 300;
  font-size: 14px;
  color: #999;
}

.input-box input {
  flex-grow: 1;
  font-size: 14px;
  background: #fff;
  border: none;
  outline: none;
  padding: 0.5rem;
}

.input-box:focus-within {
  border-color: plum;
}

:focus-within

实现分割线

实现分割线的方式有很多种，这里我们使用 ::before 和 ::after 伪元素实现

.divider {
  display: flex;
  align-items: center;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #dcdfe6;
}

.divider::before {
  margin-right: 1rem;
}

.divider::after {
  margin-left: 1rem;
}

分割线

CSS :empty

通常，我们希望为包含内容的元素设置样式。当元素完全没有子元素或文本时，该怎么办？容易，您可以使用 :empty 选择器

<p> </p>
<!-- 注意空白区 -->

<p></p>
<!-- 中间什么都没有 -->

p::before {
  font-family: 'FontAwesome';
  content: '\f240';
}

p:empty::before {
  content: '\f244';
}

p {
  color: silver;
}

p:empty {
  color: red;
}

CSS :only-child

如果要设置没有兄弟元素的样式，请使用 :only-child 伪类选择器

<ul>
  <li>child</li>
</ul>

<ul>
  <li>siblings</li>
  <li>siblings</li>
</ul>

li:only-child {
  color: DeepPink;
}

CSS :not()

不要使用两个不同的选择器来指定样式，然后使用另一个来否定它使用。:not 选择器可选择除与所传递参数匹配的元素之外的所有元素

/* ❌ */

li {
  margin-left: 10px;
}

li:first-of-type {
  margin-left: 0;
}

/* ✅ 使用 :not() 要好很多 */

li:not(:first-of-type) {
  margin-left: 10px;
}

CSS 设置 ::placeholder 文本的样式

使用 ::placeholder 伪元素在 <input> 或 <textarea> 元素为占位符文本设置样式。大多数现代浏览器都支持此功能，但对于较旧的浏览器，将需要供应商前缀。

<input placeholder="CSS Placeholder" />

::placeholder {
  color: pink;
}

placeholder

CSS :placeholder-shown

使用此伪类为当前显示占位符文本的输入设置样式

input:placeholder-shown {
  border-color: pink;
}

在逛到张鑫旭的博客时，看到一篇关于 :placeholder-shown 的文章，里面示例的代码主要如下：

/* 默认placeholder颜色透明不可见 */
.input-fill:placeholder-shown::placeholder {
    color: transparent;
}

.input-fill-x {
    position: relative;
}
.input-label {
    position: absolute;
    left: 16px; top: 14px;
    pointer-events: none;
}

.input-fill:not(:placeholder-shown) ~ .input-label,
.input-fill:focus ~ .input-label {
    transform: scale(0.75) translate(0, -32px);
}

:placeholder-shown

:placeholder-shown实现占位符过渡动画demo

自定义列表

主要的几行代码如下：

ul li::marker {
  content: attr(data-icon);
  font-size: 1.25em;
}

ol li::marker {
  content: counter(list-item);
  font-family: "Indie Flower";
  font-size: 1.5em;
  color: purple;;
}

上面例子中，attr() 用于抓取标签上的自定义属性 data-* 中的值赋予 content。详细例子请看：CODEPEN

1616732729(1).jpg

自定义文字选择

使用 ::selection 伪选择器来选择其中的文本样式。

::selection {
  background: aquamarine;
  color: black;
}

.custom-text-selection::selection {
  background: deeppink;
  color: white;
}

对于 Firefox，您将需要使用 ::-moz-selection

p::-moz-selection {
  background: deeppink;
  color: white;
}

自定义 WebKit 滚动条

为具有可滚动溢出的元素自定义滚动条样式。

主要有三个

::-webkit-scrollbar 设置整个滚动条元素的样式。
::-webkit-scrollbar-track 滚动条轨道（滚动条的背景）的样式。
::-webkit-scrollbar-thumb 滚动条滑块（可拖动元素）的样式。

其他

::-webkit-scrollbar-button 设置滚动条上的按钮 (上下箭头)的样式。
::-webkit-scrollbar-track-piece 设置滚动条没有滑块的轨道部分的样式。
::-webkit-scrollbar-corner 设置当同时有垂直滚动条和水平滚动条时交汇的部分的样式。
::-webkit-resizer 设置某些元素的corner部分的部分样式（如：textarea 的可拖动按钮）的样式。

/* 为所以的滚动条设置相同的样式 */
::-webkit-scrollbar {
  width: 8px;
  background: transparent;
}

::-webkit-scrollbar-track {
  background: #e0e4f6;
  border-radius: 12px;
}

::-webkit-scrollbar-thumb {
  background: #666e8f;
  border-radius: 12px;
}

/* 仅在单独地方设置滚动条样式 */

.box::-webkit-scrollbar {
  width: 8px;
  background: transparent;
}
.box::-webkit-scrollbar-track {
  background: #e0e4f6;
  border-radius: 12px;
}
.box::-webkit-scrollbar-thumb {
  background: #666e8f;
  border-radius: 12px;
}

首字大写

::first-line 伪元素选择器选择换行之前文本的首行。

::first-letter 伪元素选择器应用于元素中文本的首字母。

:first-child 伪类选择器仅选择第一段

p::first-line {
  color: plum;
}

first-line

p::first-letter {
  color: plum;
  font-size: 40px
}

first-letter

p:first-child {
  color: plum;
}

first-child

使第一段的第一个字母大于文本的其余部分。

使用 :first-child 选择器仅选择第一段。
使用 ::first-letter 伪元素为段落的第一个元素设置样式。

p:first-child::first-letter {
  color: plum;
  float: left;
  margin: 0 8px 0 4px;
  font-size: 3rem;
  font-weight: bold;
  line-height: 1;
}

首字大写

:nth-child()

创建具有交替背景颜色的列表

使用 :nth-child(odd) 或 :nth-child(even) 伪类选择器将不同 background-color 的元素应用于根据其在同级组中的位置匹配的元素。

li:nth-child(odd) {
  background-color: purple;
}
li:nth-child(even) {
  background: plum;
}

1616744697(1).jpg

:hover

使用过渡设置不透明度更改的动画。
使用 :hover 和 :not 伪类选择器将所有元素的不透明度更改为 0.5，但鼠标停留的元素除外。

li {
  display: inline-block;
  padding: 0 16px;
  transition: opacity 0.3s;
}
.sibling-fade:hover li:not(:hover) {
  opacity: 0.5;
}

sibling-fade

:hover 可以配合动画和其他选择器做出很多效果，找时间在写一些例子，顺便加深印象

::marker

::marker 伪元素代表一个列表项的标记框 <li>。标记通常是一个项目符号或数字。

ul li::marker {
  color: red;
  font-size: 1.5em;
}

::marker

:invalid 和 :valid

CSS 伪类 :invalid 表示任意内容未通过验证的 <input> 或其他 <form> 元素。

CSS 伪类 :valid 表示内容验证正确的 <input> 或其他 <form> 元素。

<form>
  <div>
    <label for="url_input">Enter a URL:</label>
    <input type="url" id="url_input" />
  </div>
</form>

/* 当校验错误时 */
input:invalid {
  background-color: pink;
}
form:invalid {
  border: 2px solid pink;
  padding: 10px;
}

/* 当校验成功时 */
input:valid {
  background-color: #ddffdd;
}
form:valid {
  border: 2px solid #ddffdd;
  padding: 10px;
}

当校验错误时

1616748752(1).jpg

当校验成功时

1616748801(1).jpg

:checked 和 :default

:checked 伪类选择器表示任何处于选中状态的radio(<input type="radio">)，checkbox (<input type="checkbox">) 或select 元素中的 option。

option:checked {
  color: coral;
}

:checked

:default 伪类选择器只能作用在表单元素上，表示默认状态的表单元素。

:default 默认应用到有 checked 属性的的标签上。当你切换或选择其他选项时，该选择器不会跟随着应用到你选择的标签上。（它是固定的，不响应的）

示例：默认推荐

input:default + label:after {
  content: ' (推荐)';
  color: coral;
}

:default

常用的一些 CSS 技巧二 | 伪类伪元素

CSS 重置盒模型

清除浮动

:focus 状态样式

:focus-within

实现分割线

CSS :empty

CSS :only-child

CSS :not()

CSS 设置 ::placeholder 文本的样式

CSS :placeholder-shown

自定义列表

自定义文字选择

自定义 WebKit 滚动条

首字大写

:nth-child()

:hover

::marker

:invalid 和 :valid

:checked 和 :default

猜你喜欢

热点阅读