Изучайте псевдокласс css == первая чашка чая с молоком осенью 🥤

CSS 
  桂花飘香的季节， 小明迎来了自己当面试官的第一位面试者小红。初见时的惊鸿一瞥， 小明...。
小明觉得这时候必须展现自己技术的深度，一想头几天刚研究过伪类，可以一试，一想到这，小明得意一笑😊

:default

  • Сяо Мин: Псевдокласс: по умолчанию Ты что-нибудь об этом знаешь?
  • Сяохун слегка улыбнулся: этот псевдокласс действует только на элементы формы, а значит, находится в состоянии по умолчанию.
  • Сяо Мин: Может ли раскрывающийся список (выбрать) и поле с несколькими вариантами выбора (флажок) иметь несколько состояний по умолчанию?
  • Сяохун: Ну да
  • Сяо Мин: Что на самом деле делает этот псевдокласс?
  • Сяохун: Я думаю, что пользователи могут знать, какие параметры по умолчанию, когда они выбирают набор данных, которые могут играть определенную руководящую роль и улучшать взаимодействие с пользователем.
    • Кроме того, если опция не выбрана, флажок и радио не отмечены, псевдокласс :default не будет соответствовать.
    • Во-вторых, быстрая модификация javascript не повлияет на псевдокласс :default
    • Я чувствую, что могу оперировать методом выбора платежа, например, в платежном пакете, WeChat и банковской карте один может быть выбран по умолчанию.

Подробности следующие 👇

:empty

  • Сяо Мин: Ну, вы связались с псевдо-классом :empty?
  • Сяохун возился с волосами на лбу.
  • Сердце Сяо Мина дрогнуло.
  • Xiaohong: Это в основном соответствует пустым элементам тега, есть несколько моментов, на которые следует обратить внимание.

** благодарный灬ВулканИсправления только комментариев могут совпадатьПрикрепите демо и ткните меня

    1. Внутри элемента есть пробелы, символы новой строки не совпадают
    1. Закрывающие элементы без закрывающих тегов также не могут совпадать: пустой псевдокласс
    1. Содержимое ::before, ::after не влияет на сопоставление псевдокласса :empty.
    • Отправьте скриншот кода 👇
// css
.cs-empty:empty {
  height: 20px;
  background-color: lightblue;
}
h3::after {
  content: 'wo shi h3';
}

<!-- 正常匹配 -->
<div class="cs-empty"></div>

<!-- 有注释不匹配 -->
<div class="cs-empty"><!-- 注释 --></div>

<!-- 有空格不匹配 -->
<div class="cs-empty"> </div>

<!-- 有换行 不匹配 -->
<div class="cs-empty">

</div>

<!-- 没有闭合标签的闭合元素 不匹配 -->
<p class="cs-empty">
<p class="cs-empty">

<!-- ::before, ::after 有内容 正常匹配 -->
<h3 class="cs-empty"></h3>

  • Сяо Мин: Есть ли какая-то конкретная практичность?
  • Сяохун: Конечно
    • Скройте пустые элементы, чтобы исключить вероятность того, что пустые элементы будут иметь эффекты макета.
    • Умные советы по отсутствующим полям
// 隐藏空元素
.cs-module:emtpy {
	display: none;
}

.ajax dd {
  margin-top: -1.3em;
}
.ajax dd:empty::after {
  content: '没有搜素结果';
}

// 智能提示
<dl class="ajax">
  <dt>姓名</dt>
  <dd>张三</dd>
  <dt>性别：</dt>
  <dd></dd>
  <dt>手机：</dt>
  <dd></dd>
  <dt>邮箱</dt>
  <dd></dd>
</dl>

Конкретный код здесь 😄

:placeholer-shown

  • Сяо Мин подумал про себя, что с этой девушкой все в порядке, и продолжил: :placeholder-show Вы понимаете?
  • Сяохун: Это тривиально
    • Указывает, что при отображении содержимого заполнителя поля ввода псевдокласс соответствует
    • Есть, вероятно, два конкретных использования
      • Взаимодействие при наборе текста
      • Нулевое оценочное суждение
// 输入交互的关键代码
.input:placeholder-shown::placeholder {
  color: transparent;
}

.g {
  position: relative;
}

.input-label {
  position: absolute;
  left: 16px;
  top: 14px;
  pointer-events: none;
}
.input {
  line-height: 3.5;
}

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

<div class="g">
  <input class="input" placeholder="邮箱" />
  <label for="" class="input-label">邮箱</label>
</div>

Конкретная картинка 👇 Это также проявление, которое позволяет пользователям узнать, что в данный момент заполнено

Только один небольшой пример на картинке выше имеет эффект фокуса, остальные эффекты фокусаПожалуйста, ткните меня сильно 👇, чтобы испытать

// 空值判断的具体代码
input:placeholder-shown + small::before,
textarea:placeholder-shown + small::before {
  content: "尚未输入内容";
  color: red;
  font-size: 87.5%;
}
// 这里的 placeholder 的空格很关键 自己可以尝试去掉 试一下
<input type="text" placeholder=" " /> <small></small>
<textarea type="text" placeholder=" "></textarea> <small></small>

Конкретный дисплей выглядит следующим образом 👇

Фактическая операцияВы можете нажать на меня👇, чтобы испытать

  • Сяо Мин подумал про себя, что в этой младшей сестренке что-то есть, давай поговорим еще немного: ты хочешь пить, хочешь синюю чашечку?
  • Сяохун: Хорошо!
  • Сяо Мин пошел купить чай с молоком🥤. . .

наконец

Вышеупомянутое заимствовано изУчитель Чжан Синьсюй«Мир CSS-селекторов», чтобы написать эти примеры, я перечитал его еще раз и многому научился. Что касается Сяо Мина, конечно, он должен вернуться 😄

Категории