Do you really know CSS? [CSS selector Series 1]

Time:2020-11-22

Do you really know CSS? [CSS selector Series 1]

 Do you really know CSS? [CSS selector Series 1]

Selector, selector priority, selector scope

/*Offspring relationship*/
.box div {background: #fff;}
/*Father son relationship*/
.box > div {background: #fff;}
/*Neighboring brotherhood*/
.box + div {background: #fff;}
/*Fraternity*/
.box ~ div {background: #fff;}

The above four are common selectors in CSS style file writing. In addition, there are double pipe characters||And pipeline symbol|The relevant knowledge content is not very useful for personal understanding and will not be explained here.

Selector scope

  • The scope of selector is basically global scope, that is, the style rendering of web page is only related to the action order of CSS code, not the order of elements themselves.
  • In addition, nowadays CSS selectors have the concept of local scope, such as in Vue files<style scoped>

Selector priority

priority Weight (numerical representation during calculation)
Wildcard, selector, logical combination pseudo class 0
element selector 1
Class name selector, property selector, pseudo class 10
ID Selector 100
Style inline style
!important

Tips:

  • Only logical composition pseudo class:not()
  • Use weight calculation to facilitate style reset, at the same time due to!importantThe weight is too high, and it can reset the modified style of JavaScript. It is not recommended to use it to avoid confusion
  • Style inline styles are used where temporary changes are needed, or HTML code can be modified when the style file is difficult to reset
  • When the same selector is copied and pasted to the end of the style file when the style is reset, the duplicate selector itself can be used to increase the selector weight, for example:

  .box.box div {background: #f99;}

Selector

Selectors, commonly used, are not difficult to understand, but we are looking at some UI frameworks, such asElementUIAntDesignVueLayUIThe use of selectors can solve some special cases.

Descendant selector [space] () and sub selector [right click header] (>)

All descendants of the current element are selected

<ul>
    <li>#f99</li>
    <li>#f99</li>
    <ol>
        <li>#333</li>
    </ol>
</ul>

UL Li {background: ා 333;} // the background color of all children Li in UL
UL > Li {background: # F99;} // the background color of Li of the first child in UL # F99

Tips:
Sub selectors are suitable for scenes with fixed structure. For familiarity, we should try to use descendant selectors.

Adjacent sibling selector [plus sign] (+) and sibling selector [tilde] (~)

The adjacent sibling selector matches only the first sibling element after the current element, while the sibling selector matches all sibling elements that follow
For the common radio / check box changes in the front-end project or UI framework, the “+” is mostly used and convenient.
Actual code reference:

.el-checkbox.is-bordered+.el-checkbox.is-bordered {
    margin-left: 10px
}

.radio {margin-top:15px; position:relative;}
.radio input[type="radio"] {position:absolute; opacity:0;}
.radio input[type="radio"] + .radio-label {cursor: pointer;}
.radio input[type="radio"] + .radio-label:before {content: '';background: #ffffff;border-radius: 100%;border: 1px solid #bac4d0;display: inline-block;width: 14px;height: 14px;position: relative;top: 1px;margin-right: 4px;vertical-align: top;cursor: pointer;text-align: center;-webkit-transition: all 250ms ease;transition: all 250ms ease;}
.radio input[type="radio"]:checked + .radio-label:before {background-color: #4399ff!important;box-shadow: inset 0 0 0 2px #ffffff;}
.radio input[type="radio"]:focus + .radio-label:before {outline: none;border-color: #bac4d0;}
.radio input[type="radio"]:disabled + .radio-label:before {box-shadow: inset 0 0 0 2px #ffffff;border-color: #b4b4b4;background: #b4b4b4;}
.radio input[type="radio"] + .radio-label:empty:before {margin-right: 0;}

Tips:
The parsing order of CSS style files is from top to bottom. Therefore, we can reset and rewrite them in the actual project. At the same time, the CSS selector is the selector without forward selection, which can avoid the interface from changing greatly after the browser rendering
The style rewriting of body and HTML should also be at the top of the whole CSS file, and should not be mixed in the middle. It will be very nonstandard and may cause flash screen problems


element selector

  • The element selector itself cannot be repeated like a class selector
  • When used with attribute selectors, element selectors must be pre written

Tips:

  • Element selectors are not case sensitive. Although we may warn after the eslint code that it is not standardized, we try to use lowercase letters in our style files as far as possible, including reasonable use of lowercase letters in element class naming and style attribute values. For example, in a style file, color values should be unified as much as possible, such as lowercase ා FFF, etc
  • User defined elements < x-ele > < x-ele >, which are supported by modern browsers, are semantic tags in HTML5. Custom tags may be more suitable for application scenarios. However, as the project needs to be compatible with ie, there has been no practice opportunity.

It is learned in the book that user-defined elements are compatible with IE8, and it is necessary to add a JavaScript code in < head >,
<script>document.createElement('x-ele');</script>
Personal understanding: now many projects use the front-end framework, Vue / react, etc., which are not compatible with the lower version of IE, and create too many custom elements also need to add a lot of JavaScript code, some are not realistic.

  • The wildcard (*), which is only used in CSS Reset, is not recommended in the project, because it matches all elements, it can avoid problems.
* {margin:0; padding:0;box-sizing:border-box;}

CSS knowledge consolidation, learning and collation

Github — JasonSubMara

Jason submmra


Reference links | books

  • CSS selector world by Zhang Xinxu

Recommended Today

Explain module, import and export in JavaScript

Author: Tania rascia Crazy technology house Original text:https://www.taniarascia.com/j… In the era of the Internet, websites are mainly developed with HTML and CSS. If you load JavaScript into a page, it usually provides effects and interactions in the form of small fragments. Generally, all JavaScript code is written in a file and loaded into a filescriptTag. […]