Sweet-scented osmanthus fragrance season, xiaoming ushered in his first interview when the interviewer xiaohong. At first glance, Ming... . Xiaoming feels at this time must show the depth of his technology, a few days just studied pseudo class, can try, think of this, Xiaoming smugly smile 😊Copy the code

:default

  • Xiaoming: Pseudo-class :default do you know, introduce
  • Hong smiles: This pseudo-class only works on form elements, meaning it is in the default state
  • Xiaoming: Can select and checkbox have multiple default states
  • Xiao Hong: Yes, you can
  • Xiaoming: What does this pseudo-class actually do
  • Xiao Hong: I think when users choose a set of data, they can know what the default option is, which can play a certain guiding role and enhance user experience.
    • In addition, if option is not selected and checkbox and radio are not checked, pseudo-class :default will not match.
    • Second, rapid changes in javascript do not affect the pseudo-class :default
    • I feel I can operate the payment method, for example, I can choose one of the payment package, wechat and bank card by default

The details are as follows: 👇

  • Small red: don’t believe, that you hard poke me 🐶
  • Xiaoming: how to have such a strange request 👀…

:empty

  • Xiaoming: HMM, does the pseudo-empty class have any contact
  • Xiao Hong stroked her hair on her lower forehead
  • Xiao Ming’s heart shivered
  • Red: There are a few things to note about this mainly matching empty tag elements

** We would like to thank the huo Volcano for pointing out that only the annotations can match the attached demo

    1. Element with Spaces and newlines does not match
    1. A closed element without a closed tag will also not match the empty pseudo-class
    1. The contents of ::before, ::after do not affect the matching of the: Empty pseudo-class
    • Send a screenshot of the code 👇
// css
.cs-empty:empty {
  height: 20px;
  background-color: lightblue;
}
h3::after {
  content: 'wo shi h3';
}

<! -- Normal match -->
<div class="cs-empty"></div>

<! -- There is a comment that does not match -->
<div class="cs-empty"><! - comments -- ></div>

<! -- some Spaces do not match -->
<div class="cs-empty"> </div>

<! -- newline mismatch -->
<div class="cs-empty">

</div>

<! -- Closed elements without closed tags do not match -->
<p class="cs-empty">
<p class="cs-empty">

<! -- ::before, ::after
<h3 class="cs-empty"></h3>

Copy the code

  • Xiaoming: Is there any specific practicability
  • Xiao Hong: Sure
    • Hide empty elements to eliminate the possibility of empty elements affecting the layout
    • Intelligent hint for missing field
Cs-module :emtpy {display: none; }. Ajax dd {margin-top: -1.3em; }. Ajax dd: :after {content: 'no search results '; } // Intelligent prompt<dl class="ajax">
  <dt>The name</dt>
  <dd>Zhang SAN</dd>
  <dt>Gender:</dt>
  <dd></dd>
  <dt>Mobile phone:</dt>
  <dd></dd>
  <dt>email</dt>
  <dd></dd>
</dl>
Copy the code

The code can be found here at 😄

:placeholer-shown

  • The girl can ah, Ming thought, and continued :placeholder-shown
  • Xiao Hong: No problem
    • Represents the pseudo class matches when the input box placeholder content is displayed
    • There are probably two specific uses
      • Interaction at input time
      • A null value judgment
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="Email" />
  <label for="" class="input-label">email</label>
</div>
Copy the code

Specific picture 👇 this is also able to let the user know what is currently filled in a performance

There is only one small example with focus effect in the picture above, please try hard to poke me 👇 for other focusing effects

Input :placeholder-shown + small::before, textarea:placeholder-shown + small::before {content: "not yet input "; color: red; The font - size: 87.5%; } // the placeholder space is important and you can try to remove it<input type="text" placeholder="" /> <small></small>
<textarea type="text" placeholder=""></textarea> <small></small>
Copy the code

The details are as follows: 👇

The actual operation can be stamped at 👇 to experience

  • Xiaoming thought this younger sister has something, don’t chat more meeting: you thirsty not, come to cup small blue cup?
  • Xiao Hong: Ok!
  • Xiaoming pidian pidian to buy milk tea 🥤…

The last

The above content borrowed from Zhang Xinxu teacher “CSS selector world”, in order to write these examples, read again, harvest a lot. As for Xiao Ming, of course, still want to come back 😄