Jiangcheng Cheerful Pea: Personal homepage
Personal column :《VUE》《javaScript》
Personal website : “Jiangcheng Cheerful Pea”
The ideal of life is for an ideal life!
Table of Contents
? Column introduction
Article introduction
1. Selector
2. Priority
3. Inherited attributes
No inherited properties
?Write at the end
? Column Introduction
Welcome to the front-end entry journey! This column is created for readers who are interested in web development and have just started learning front-end. Whether you are a beginner or a developer with some basic knowledge, we will provide you with a systematic and friendly learning platform here. We update it in the form of questions and answers to present you with selected front-end knowledge points and best practices. By explaining concepts in simple and easy-to-understand terms and providing practical examples and exercises, you can gradually build a solid foundation. Whether it is HTML, CSS, JavaScript or the latest front-end frameworks and tools, we will provide you with rich content and practical skills to help you better understand and apply various technologies in front-end development.
At the same time, we will also pay attention to the latest front-end trends and developments. As Web technology continues to evolve, front-end development is also constantly innovating. We will introduce the latest front-end frameworks, tools and technologies in a timely manner so that you can stay at the forefront and keep pace with the times. By mastering the latest front-end technologies, you will be able to become more competitive in the highly competitive field of web development.
Article introduction
1. Selector
CSS selectors are the first part of CSS rules
It is the way elements and other parts are combined to tell the browser which HTML element should be selected as the value of the CSS property in the applied rule.
The element selected by the selector is called the “selector object”
We start with a Html structure
<div id="box">
<div class="one">
<p class="one_1">
</p>
<p class="one_1">
</p>
</div>
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
</div>
Commonly used css attribute selectors include:
id selector (#box), selects the element with id box
Class selector (.one), selects all elements with the class name one
Tag selector (div), selects all elements with the tag div
Descendant selector (#box div), selects all div elements with IDs inside the box element
Child selector (.one>one_1), selects all .one_1 elements whose parent element is .one
Adjacent sibling selector (.one + .two), selects all .two elements immediately following .one
Group selector (div, p), selects all elements of div and p
There are also some selectors that are used less frequently:
- Pseudo class selector
:link: select unvisited links :visited: Select a link that has been visited :active: Select an active link :hover: The element the mouse pointer is floating on :focus: Select the focus :first-child: The first child element of the parent element
- Pseudo element selector
:first-letter: used to select the first letter of the specified selector :first-line: Select the first line of the specified selector :before : The selector inserts content before the content of the selected element. :after : The selector inserts content after the content of the selected element
- attribute selector
[attribute] selects elements with attribute attributes [attribute=value] selects all elements using attribute=value [attribute~=value] Select elements whose attribute attribute contains value [attribute|=value]: Select elements whose attribute attribute starts with value
The new selectors in CSS3 are as follows:
- Hierarchical selector (p~ul), selects each ul element preceded by a p element
- Pseudo class selector
:first-of-type the first element of the parent element :last-of-type The last element of the parent element :only-of-type The only child element of a specific type of the parent element :only-child The only child element in the parent element :nth-child(n) selects the Nth child element in the parent element :nth-last-of-type(n) selects the Nth child element in the parent element, from back to front :last-child The last element of the parent element :root sets HTML document :empty specifies empty elements :enabled selects disabled elements :disabled selects disabled elements :checked selects the selected element :not(selector) selects all elements that are not <selector> elements
- attribute selector
[attribute*=value]: Select all elements whose attribute attribute value contains value [attribute^=value]: Select all elements whose attribute attribute starts with value [attribute$=value]: Select all elements whose attribute attribute ends with value
2. Priority
I believe everyone is familiar with the priority of CSS selector:
Inline > ID selectors > Class selectors > Tag selectors
When it comes to the specific computing layer, the priority is determined by the values of A, B, C, and D. Their value calculation rules are as follows:
If an inline style exists, then A = 1, otherwise A = 0
The value of B is equal to the number of occurrences of the ID selector
The value of C is equal to the total number of occurrences of class selector, attribute selector and pseudo class.
The value of D is equal to the total number of occurrences of tag selector and pseudo-element
Here is an example:
#nav-global > ul > li > a.nav-link
Apply the above algorithm to find the value of A B C D:
Because there are no inline styles, A = 0
The ID selector appears 1 time in total, B = 1
The class selector appears 1 time, the attribute selector appears 0 times, and the pseudo-class selector appears 0 times, so C = (1 + 0 + 0) = 1
The tag selector appears 3 times and the pseudo-element appears 0 times, so D = (3 + 0) = 3
The A, B, C, and D calculated above can be abbreviated as: (0, 1 , 1, 3)
Now that we know how priorities are calculated, let’s take a look at the comparison rules:
- Compare from left to right, the larger one has higher priority
- If they are equal, continue to move one bit to the right for comparison.
- If all 4 bits are equal, the latter one will overwrite the previous one.
After the above priority calculation rules, we know that inline styles have the highest priority. If external styles need to override inline styles, you need to use !important
3. Inherited attributes
In css, inheritance refers to setting some attributes to the parent element, and the descendant elements will automatically have these attributes.
Regarding inherited properties, they can be divided into:
- Font family properties
font: combination font font-family: Specifies the font family of the element font-weight: Set the thickness of the font font-size: Set the font size font-style: Define the style of the font font-variant: Larger or smaller font
- Text series properties
text-indent: text indent text-align: Text horizontal alignment line-height: line height word-spacing: increasing or decreasing the space between words letter-spacing: increasing or decreasing the space between characters text-transform: Control text case direction: specifies the writing direction of text color: text color
- element visibility
visibility
- Table layout properties
caption-side: Position the table title position border-collapse: merge table borders border-spacing: Set the distance between the borders of adjacent cells empty-cells: the appearance and disappearance of cell borders table-layout: What determines the width of the table
- list properties
list-style-type: small dot style in front of text list-style-position: small dot position list-style: The above attributes can be collected through this attribute
- Quote
quotes: Set the quotation mark type of nested quotations
- Cursor properties
cursor: the arrow can be changed into the desired shape
Some special points in inheritance:
-
The font color of a tag cannot be inherited
-
The font size of h1-h6 tags cannot be inherited.
No inherited properties
display
Text attributes: vertical-align, text-decoration
Properties of the box model: width, height, inner and outer margins, borders, etc.
Background attributes: background image, color, location, etc.
Positioning attributes: float, clear float, position, etc.
Generate content attributes: content, counter-reset, counter-increment
Outline style attributes: outline-style, outline-width, outline-color, outline
Page style attributes: size, page-break-before, page-break-after
? Write at the end
Please feel free to give me some advice, comment below or send me a private message. Thank you very much.
? I think a certain part of my design is too cumbersome. Is there a simpler or higher-quality packaging method?
? Think some of my code is too old and can provide new API or the latest syntax?
? Don’t understand some of the content in the article
?Answer some questions in my article
? Think that some interactions and functions need to be optimized, and find bugs
? Want to add new features and have better suggestions for the overall design and appearance?
Finally, thank you for your patience in watching. Now that we are here, click Like and go!
