“This is the 16th day of my participation in the November Gwen Challenge. See details of the event: The last Gwen Challenge 2021”.

Past links:

“CSS Selector”

“CSS Selector (2)”

“CSS Selector (3)”

preface

Finally, after our summary of the chapter a few days ago, the classification of selector is concluded, we can go back and forth, consolidate their knowledge.

So why do we use selectors? Let’s talk about it.

Why use a selector?

We now know that CSS styles are written in a variety of classes, so why use selectors?

First of all,

  • Using selectors allows you to do things that can only be done with JS, which reduces manipulation of the DOM.

  • You can also eliminate unnecessary or little-used classes and avoid having a tag full of classes.

Next, let’s take a look at a few common and available selectors.

:hover

: Hover: used as a mouse hover style, can be said to be our development is very commonly used, and very convenient. In some scenarios, it can also replace the mouseEnter and Mouseleave mouse events, plus CSS animation, which is perfect.

We can do something interesting with attr().

The code is as follows:

/ / HTML < ul class = "hover - tabs" > < li data - name = "red" > < / li > < li data - name = "orange" > < / li > < li data - name = "yellow" > < / li > < li Data - name = "green" > < / li > < li data - name = "blue" > < / li > < li data - name = "blue" > < / li > < / ul >Copy the code
// css $color-list: red orange yellow green greenyellow blue; .hover-tabs { margin: 200px 100px; display: flex; justify-content: space-between; width: 200px; li { position: relative; padding: 2px; border: 2px solid transparent; border-radius: 100%; width: 24px; height: 24px; background-clip: content-box; cursor: pointer; transition: all 300ms; &::before, &::after { position: absolute; left: 50%; bottom: 100%; opacity: 0; Pointer to the events: none; transform: translate3d(0, -30px, 0); transition: all 300ms; } &::before { margin: 0 0 12px -35px; border-radius: 5px; width: 70px; height: 30px; background-color: rgba(#000, .5); line-height: 30px; text-align: center; color: #fff; content: attr(data-name); } &::after { margin-left: -6px; border: 6px solid transparent; border-top-color: rgba(#000, .5); width: 0; height: 0; content: ""; } @each $color in $color-list { $index: index($color-list, $color); &:nth-child(#{$index}) { background-color: $color; &:hover { border-color: $color; } } } &:hover { &::before, &::after { opacity: 1; transform: translate3d(0, 0, 0); }}}}Copy the code

Ok, that’s all for today, bye bye, you are still the best today. Come on, come on, you’re the best! Come on, come on, you’re the best! Oh huo, Bye Bye!!