Summary of CSS knowledge points (4)

1. What is the difference between pseudo-classes and pseudo-elements?

Pseudo class: used to add styles to the element when it is in a certain state
Pseudo-elements: used to create some elements that are not in the DOM tree and add styles to them.

Second, CSS weight summary

Weights	Selector
0000	Inherited style, universal selector (*), descendant selector, descendant selector (>), sibling selector (~, +)
0001	Tag selector, pseudo element selector (::before, ::after)
0010	Class selector, pseudo-class selector (:hover, :nth-child()), attribute selector [title]
0100	id selector
1000	Inline style
∞	!important

Three, inheritable CSS properties

1. Font attribute family

font: combined font

font-family: Specifies the font family of the element

font-weight: Set the weight of the font

font-size: Set the size of the font

font-style: defines the style of the font

font-variant: Set the font of small capital letters to display text, which means that all lowercase letters will be converted to uppercase, but all letters using small capital fonts have a smaller font size compared to the rest of the text.

font-stretch: Stretch and transform the current font-family. All major browsers do not support it.

font-size-adjust: Specify an aspect value for an element so that the x-height of the preferred font can be maintained.

2. Text attribute series

text-indent: text indent

text-align: horizontal alignment of text

line-height: line height

word-spacing: increase or decrease the white space between words (ie word spacing)

letter-spacing: increase or decrease the space between characters (character spacing)

text-transform: control text case

direction: Specifies the writing direction of the text

color: text color

3. Element visibility: visibility

4. Table layout attributes: caption-side, border-collapse, border-spacing, empty-cells, table-layout

5. List layout attributes: list-style-type, list-style-image, list-style-position, list-style

6. Generate content attributes: quotes

7. Cursor attribute: cursor

8. Page style attributes: page, page-break-inside, windows, orphans

9、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

Fourth, draw a 0.5px line

.hr {
    
    
    margin-top: 50px;
    height: 1px;
    transform: scaleY(0.5);
    transform-origin: 50% 100%;
    background-color: black;
}

5. Do the margin and padding of inline elements take effect?

For inline elements, margin and padding can be set, but only the left and right directions will affect other elements.

Six, the efficiency of CSS selectors

We all know that CSS has three major characteristics: cascading, inheritance, and priority.
CSS selectors also have efficiency problems. The common sorts of selector efficiency are as follows:

ID selector
Class selector
Label selector
Brother selector (such as p + a, p ~ a)
Child selector (li> p)
Descendant selector (li a)
Wildcard selector (*)
Attribute selector ( a[rel="external"])
Pseudo-class selector ( a:hover,li:nth-child)

It can be seen that the ID selector and class selector are very efficient. Although the pseudo-class selector and attribute selector have the same weight as the class selector, their efficiency is very low.

7. After the hyperlink is clicked and visited, hover and active will no longer work. Which of the following CSS attributes can solve this problem

a:link{ }
a:visited{ }
a:hover{ }
a:active{ }
L-V-H-A

8. Abnormal in JS

throw throws exception information
throws declares possible exceptions

九、getElementsByName（）

Returns a reference
to the object with the specified name value Returns a set of objects

10. jQuery event-select() method

When the text in the textarea or text type input element is selected, the select event occurs.

11. Database ER diagram

The ER diagram is divided into three core parts: entity, attribute, and relationship.
Rectangle, ellipse, and diamond.

Twelve, the sequence containing 31 elements is sorted by the direct selection sorting algorithm. In the worst case, how many moves are needed to complete the sorting

3(n - 1) = 90