Foreword: This is the author’s own understanding and organization after studying. If there are any errors or questions, please correct them and I will continue update!
Selector weight
If the selector weight is represented by 4 digits, then:
The weight of the element selector is 1; the weight of
id selector is 100;
classThe weight of class selector is 10; the weight of
inline style (JS also operates inline style) is 1000;
Of course if a attribute value is set! important, it is still the most important, kill it directly;
Wildcard selector, *{...}, asterisk represents a wildcard selector, which can match any element;
Element selector, html{...}, body{...}, p{...}, the element of the document is the most basic selector, element selector ;
id selector, #value, set an id attribute to the element, the value is value;
class class selector, .value {...}, set a class attribute to the element, the value is value;
Attribute selector, the attribute selector is based on the attribute and attribute value of the element. There are many ways to select elements:
Simple attribute selector: img[title], get the img element with the alt attribute set; #wrapper[outter], Get the element whose id is wrapper and has the attribute wrapper;
Specific attribute selector: input[type="button"], get the input element of attribute value button; #wrapper[outter= "abc"], get the element whose id is wrapper and the value of attribute outer is abc;
Partial attribute selector: p[class ^="a"], get The p element whose class attribute value starts with a; p[class $="b"], gets the p element whose class attribute value ends with b;
GroupSelector, separate the selectors to be grouped with commas; #wrapper, #content{...}, get the element with the id of wrapper and the element with the id of content, two Get all;
Descendant selector, separate the selectors to be grouped with spaces, #wrapper #content{...}, in the element with the id of wrapper Inside the object , get the element with the id of content, may be a child element or a descendant element;
child element Selector , separate the selectors to be grouped with a greater than sign, #wrapper > #content{...}, inside the element object with the id of wrapper, Get the ## with the id of content #Child element, only search one level down; The child element selector is different from the descendant selector. The descendant selector contains the child element selector, and the descendant selector will continue to search downwards;
- Sibling element selector:
- ##Adjacent sibling selector
(IE6 and the following are not supported), separate the selectors to be grouped with a plus sign, .wrapper + .content{...}, after obtaining the element with class wrapper, the next element with class content, and The difference between the universal sibling selector is that the adjacent sibling selector only obtains the element immediately following the current element . Even if there is the same element later, it cannot be selected;
Universal sibling selector (not supported by IE7 and below), separate the selectors to be grouped with tildes, .wrapper ~ .content{...}, get class After the element that is wrapper, - all
elements with class content are different from the adjacent sibling selectors;
Pseudo class Selector (not supported by IE8 and below):
- # #:root selects the root element of the document, that is, the html element;
- input
- element
- p:nth-of-type(n), The selection is the nth
p element of its parent element. This is calculated n in the order of the p elements inside the parent element. Then get; n is an integer, and starts from 1, it can also be a formula, or it can be the keywords even (even number), odd (odd number);
- p
:first-of-type, selects the first p element of its parent element, which has the same effect as p:nth-of-type(1);
- p
:last-of-type, the selection is the last p element of its parent element, note that there is no nth in front;
- p:nth-last -of-type(n), the selection is the nth p element of its parent element, but
is counting from the last child forward , note that there is nth in front;
- p:nth-child(n), the selection is the nth
child element of its parent element, and it must be a p element, this is according to the parent element Calculate the order of the sub-elements inside the element n, and then check whether the n-th sub-element is a p element; There is a situation where the n-th sub-element may not be p, and then cannot be obtained, so it would be better to use nth-of-type(n);
- p
:first-child, the selection is its parent element The 1st element of and is a p element, the same as p:nth-child(1);
- p:last-child, selects the last element of its parent element, And it is a p element;
- p:nth-last-child(n), the selection is the nth child element of its parent element, and it must be a p element, but
is Count from the last sub-item forward, note that there is nth in front;
- There are many others...
- Pseudo element selector:
:first-letter, specifies the style of the first letter of an element, all Leading punctuation should be applied with this style along with the first letter, and can only be associated with block-level elements ;
- ## :first-line
, sets the style of the first line of text in the element, can only be associated with block-level elements;
- :after
, IE7 and below does not support it, insert the generated content at the beginning of the element content;
- :before
, IE7 and below does not support it, insert it at the beginning of the element content Finally, insert the generated content;
::selection, matching the part selected by the user; - only supports double colon writing
, only supports both color and background color Style;
The above is the detailed content of A brief introduction to CSS selectors. For more information, please follow other related articles on the PHP Chinese website!

The fact that anchor positioning eschews HTML source order is so CSS-y because it's another separation of concerns between content and presentation.

Article discusses CSS margin property, specifically "margin: 40px 100px 120px 80px", its application, and effects on webpage layout.

The article discusses CSS border properties, focusing on customization, best practices, and responsiveness. Main argument: border-radius is most effective for responsive designs.

The article discusses CSS background properties, their uses in enhancing website design, and common mistakes to avoid. Key focus is on responsive design using background-size.

Article discusses CSS HSL colors, their use in web design, and advantages over RGB. Main focus is on enhancing design and accessibility through intuitive color manipulation.

The article discusses the use of comments in CSS, detailing single-line and multi-line comment syntaxes. It argues that comments enhance code readability, maintainability, and collaboration, but may impact website performance if not managed properly.

The article discusses CSS Selectors, their types, and usage for styling HTML elements. It compares ID and class selectors and addresses performance issues with complex selectors.

The article discusses CSS priority, focusing on inline styles having the highest specificity. It explains specificity levels, overriding methods, and debugging tools for managing CSS conflicts.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Atom editor mac version download
The most popular open source editor

DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

Zend Studio 13.0.1
Powerful PHP integrated development environment
