preface

Main purpose to write this blog idea is very simple, are learning CSS selectors, some partial door selector is not speaking, their Internet after a lot of some commonly used but again afraid will forget, some reference on the nuggets selector’s blog, found some selector only describe only the description of weak foundation and don’t understand, make a conclusion after thinking about the reference, All the selector case set of daquan, later need to refer to at any time, insufficient place please point out, a lot of tolerance.

Selector priority: this is written first, I hope that every time you read this blog friends come in the first see this, important things three times, remember, remember, remember.

! Important > Inline Style > ID selector > Class, pseudo class, Property > Element, Pseudo element > Inheritance > Wildcard

CSS selector classification

Simple selector

Wildcard selector

Example: *

* represents all elements.

* {padding: 0;
    margin: 0;
}
div{
    width: 200px;
    height: 200px;
    background-color: red;
}
<body>
    <div>Ha ha</div>
</body>
Copy the code

The ID selector

Example: id = “demo”

Match elements with id= “demo” (unique ID)

Note: 1. The id value must be unique and can only appear once on a page. Duplicate ID values are not in compliance with the specification. 2. All labels have the ID attribute. The id name must contain letters, underscores (_), hyphens (-), and digits, and cannot start with a digit. The name should take its meaning, do not randomly name. 5, Underline: Search_button, multiple words, starting with the second word, add an underline to each word. 6. Selectors should not be used in CSS, but with JS.Copy the code

#demo{
    color:red;
}
<body>
    <div id="demo"></div>
</body>
Copy the code

Class selectors

Example: the demo

Matches the class attribute value for the element that contains demo.

Note: 1. The class value may not be unique. The class selector selects tag elements that have the same class value. 2. A tag can have multiple class values. 3. The naming rules are the same as those for ID. 4, class write style, ID write behavior.Copy the code

.demo{
    color:red;
}
<body>
    <div class="demo"></div>
</body>
Copy the code

Element selector

Example: h1

Matches all h1 elements.

h1{
    color:red;
}
<body>
    <h1>Ha ha</h1>
</body>
Copy the code

Include/descendant selectors

Example: div span

Matches all span elements contained in div

div span{
    width: 100px;
    height: 100px;
    background: skyblue;
}
<div>
    <span>1</span>
    <span>2</span>
    <p><span>3</span></p>
</div>
Copy the code

Child selector

Example: the div > span

Matches all the first level children of the div element, span.

div > span {
    color: pink;
}
<div>
    <span>1</span>
    <span>2</span>
    <p><span>3</span></p>
</div>
Copy the code

Adjacent sibling selectors

Example: div + p

Matches the first p element immediately after the sibling element of div.

div+p {
    color:red;
}
<body>
    <div>h1</div>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</body>
Copy the code

General sibling selector

Example: div ~ p

Matches all sibling elements p after the div element.

div~p{
    color:red;
}
<body>
    <div>1</div>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <span><p>5</p></span>
</body>
Copy the code

Combinatorial selector

Example: the div, p

Matches all div elements and p elements.

div,p {
    color: red;
}
<div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <p>4</p>
    <div><span>5</span>6</div>
</div>
Copy the code

Dynamic pseudo-class selector
- :link
Example: a: the link

Matches link A that has not been visited.
- :visited
Example: a: visited

Matches the visited link A
- :hover
Example: a: hover

Sets the style of the element over the mouse.
- :active
Example: a: active

Matches the active element
- :focus
Example: a: focus

Matches the specified element that gets focus
- :focus-within
Example: a: focus – the within

Matches the element currently in focus or its parent element (similar to JavaScript event bubbling). This selector extends the effective range of the get focus
UI element pseudo-class selector
- :default
Matches form elements that are selected by default, such as checkboxes, radio buttons, or select drop-down menus.
- :checked
Matches elements that are checked.
- :enabled
Matches elements in the available state.
- :disabled
Matches elements in the disabled state.

Structural pseudo-class selector

:root

Example: : root

:root matches the root element of the document, which is HTML in general. For HTML, :root represents the < HTML > element and is the same as the HTML selector, except that it has a higher priority.

    :root{
        background-color:yellow;
    }
Copy the code

:not()

Example: li: not. (demo)

Match all li elements, then filter out elements with class attribute value “demo” with :not.

li{
    font-size: 30px;
}
li:not(.demo) {
    color: #ff0000;
}
<ul>
    <li>1</li>
    <li class="demo">2</li>
    <li>3</li>
</ul>
Copy the code

:nth-child(n)

Example: ul > li:nth-child(n)

Matches the NTH positive child element of type Li in the parent element.

 li{
    width: 50px;
    height: 50px;
    background-color: yellow;
    margin-left: 10px;
    list-style: none;
    float: left;
}
ul > li:nth-child(1){
    background-color: red;
}
 <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
Copy the code

:nth-of-type(n)

Example: ul > Li :nth-of-type

Matches the NTH element in the set of elements of the type tag of the same class.

li{
    width: 50px;
    height: 50px;
    background-color: yellow;
    margin-left: 10px;
    list-style: none;
    float: left;
}
ul > li:nth-of-type(1){
    background-color: red;
}
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
Copy the code

:first-child

Example: ul > li:first-child

Matches the first child element of type li in the parent element.

li{
    width: 50px;
    height: 50px;
    background-color: yellow;
    margin-left: 10px;
    list-style: none;
    float: left;
}
ul > li:first-child{
    background-color: red;
}
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
Copy the code

:last-child

Example: ul > li:last-child

Matches the child element whose last digit of the parent element is of type li.

li{
    width: 50px;
    height: 50px;
    background-color: yellow;
    margin-left: 10px;
    list-style: none;
    float: left;
}
ul > li:last-child{
    background-color: red;
}
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
Copy the code

:first-of-type

Example: ul > Li :first-of-type

Matches the first element of the same label type in the set of li child elements under the parent element.

li{
    width: 50px;
    height: 50px;
    background-color: yellow;
    margin-left: 10px;
    list-style: none;
    float: left;
}
ul > li:first-of-type{
    background-color: red;
}
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
Copy the code

:last-of-type

Example: ul > li:last-of-type

Matches the last element of the same label type in the set of li child elements under the parent element.

li{
    width: 50px;
    height: 50px;
    background-color: yellow;
    margin-left: 10px;
    list-style: none;
    float: left;
}
ul > li:last-of-type{
    background-color: red;
}
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
Copy the code

:only-child

Example: ul > li:only-child

Matches the only child element of type li in the parent element.

ul{
    overflow: hidden;
}
li{
    width: 50px;
    height: 50px;
    background-color: yellow;
    margin-left: 10px;
    list-style: none;
    float: left;
}
ul > li:only-child{
    background-color: red;
}
<ul>
    <li>ul1-1</li>
    <li>ul1-2</li>
    <li>ul1-3</li>
    <li>ul1-4</li>
</ul>
<ul>
    <li>ul2-1</li>
</ul>
Copy the code

:only-of-type

Example: ul > li:only of type

Ul > li:only of type Matches the only child element of type Li under the parent element.

 ul{
     overflow: hidden;
 }
 li{
     width: 50px;
     height: 50px;
     background-color: yellow;
     margin-left: 10px;
     list-style: none;
     float: left;
 }
 ul > li:only-of-type{
     background-color: red;
 }
 <ul>
     <li>ul1-1</li>
     <li>ul1-2</li>
     <li>ul1-3</li>
     <li>ul1-4</li>
 </ul>
 <ul>
     <li>ul2-1</li>
 </ul>
Copy the code

:empty

Example: li: empty

Matches the li element whose content is empty

li{
    width: 50px;
    height: 50px;
    background-color: yellow;
    margin-left: 10px;
    list-style: none;
    float: left;
}
li:empty{
    background-color: red;
}
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li></li>
</ul>
Copy the code

:nth-last-child(n)

Example: ul > li:nth-last-child

Matches the NTH child element of type Li from the parent element.

li{
    width: 50px;
    height: 50px;
    background-color: yellow;
    margin-left: 10px;
    list-style: none;
    float: left;
}
ul > li:nth-last-child(2){
    background-color: red;
}
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
Copy the code

:nth-last-of-type(n)

Example: ul > li: nTH-last-of-type

Matches the NTH to last element in the set of elements of the type tag of the same class.

li{
    width: 50px;
    height: 50px;
    background-color: yellow;
    margin-left: 10px;
    list-style: none;
    float: left;
}
ul > li:nth-last-of-type(2){
    background-color: red;
}
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
Copy the code

Property picker

[key]

Example: the div [class]

Matches a div element with a class attribute.

Set the background color of all divs to red, and then set the background color of all divs containing the class attribute name to Gold, depending on the code and browser display results.

div{
    width: 50px;
    height: 50px;
    display: inline-block;
    background-color: red;
}
div[class]{
    background-color: gold;
}
<body>
    <div class>0</div>
    <div class="text1">1</div>
    <div class="text2" id="text">2</div>
    <div id="text3">3</div>
</body>
Copy the code

[key = value]

Example: div class = “text”]

Matches div elements with a class attribute whose value is text.

First set the background color of all divs to red, then select the background color of all divs containing class = “text” and set it to gold.

div{
    width: 50px;
    height: 50px;
    display: inline-block;
    background-color: red;
}
div[class="text"]{
    background-color: gold;
}
<body>
    <div class>0</div>
    <div class="text">1</div>
    <div class="text2" id="text">2</div>
    <div id="text3">3</div>
</body>
Copy the code

[key ~= value]

Example: the div [class ~ = “text”]

Matches a div element that has a class attribute with a whitespace delimited list of words and one of the words in the list is equal to text.

Set the background color of all divs to red, then select the background color of all divs containing class ~= “text” and set it to gold.

div{
    width: 50px;
    height: 50px;
    display: inline-block;
    background-color: red;
}
div[class~="text"]{
    background-color: gold;
}
<body>
    <div class="text">1</div>
    <div class="text text2">2</div>
    <div class="text3">3</div>
    <div id="text4">4</div>
</body>
Copy the code

[key $= value]

Example: the div [class $= “text”]

Matches div elements with a class attribute whose value begins with text.

Set the background color for all divs to red, and then set the background color to Gold for all divs including class $= “text”.

div{
    width: 50px;
    height: 50px;
    display: inline-block;
    background-color: red;
}
div[class$="text"]{
    background-color: gold;
}
<body>
    <div class="text1">1</div>
    <div class="text2">2</div>
    <div class="red-text3">3</div>
    <div class="4text">4</div>
</body>
Copy the code

[key *= value]

Example: the div [class * = “text”]

Matches a div element with a class attribute whose value ends in text.

Set the background color for all divs to red, and then set the background color to Gold for all divs including class *= “text”.

div{
    width: 50px;
    height: 50px;
    display: inline-block;
    background-color: red;
}
div[class*="text"]{
    background-color: gold;
}
<body>
    <div class="text">1</div>
    <div class="text colorRed">2</div>
    <div class="textRed">3</div>
    <div class="red_text">4</div>
    <div id="text">5</div>
</body>
Copy the code

[key |= value]

Example: the div [class * = “text”]

Matches div elements with a class attribute whose value starts with “text” and is delimited with “-“.

div{
    width: 50px;
    height: 50px;
    display: inline-block;
    background-color: red;
}
div[class|="text"]{
    background-color: gold;
}
<body>
    <div class="text">1</div>
    <div class="text colorRed">2</div>
    <div class="textRed">3</div>
    <div class="red_text">4</div>
    <div class="text-red">4</div>
</body>
Copy the code

Pseudo element selector

::selection

Example: : : selection

Matches the selected text portion.

::selection {
    color:#ff0000;
}
<div>
    <p>Try selecting some text from this page</p>
    <span>Here are some texts</span>
    <div>This is some text in the div element.</div>
    <a href="//www.baidu.com/" target="_blank">Link to baidu!</a>
</div>
Copy the code

::after

Example: p: : after

Sets the content generated after the object according to the logical structure of the object tree.

p::after {
    content:"Line:";
    background-color:yellow;
    color:red;
    font-weight:bold;
}
<body>
    <p>I'm a handsome guy.</p>
    <p>I live at home.</p>
    <p><b>Note:</b>For :after working in IE8, you must declare a DOCTYPE.</p>
</body>
Copy the code

::before

Example: p: : before

Sets the content generated in front of the element (according to the logical structure of the object tree).

p::before {
    content:"Line:";
    background-color:yellow;
    color:red;
    font-weight:bold;
}
<body>
    <p>I'm a handsome guy.</p>
    <p>I live at home.</p>
    <p><b>Note:</b>For :after working in IE8, you must declare a DOCTYPE.</p>
</body>
Copy the code

::first-line

Example: p: first – line

Matches the first row in the element

p:first-line{
    background-color:yellow;
}
<body>
    <h1>WWF's Mission Statement</h1>
    <p>To stop the degradation of the planet's natural environment and to build a future in which humans live in harmony with nature, by; conserving the world's biological diversity, ensuring that the use of renewable natural resources is sustainable, and promoting the reduction of pollution and wasteful consumption.</p>
</body>
Copy the code

::first-letter

Example: h1: first – letter

Matches the first character in the specified element.

h1:first-letter{
    color:yellow;
}
<body>
    <h1>WWF's Mission Statement</h1>
</body>
Copy the code

CSS selectors are examples

preface

CSS selector classification

Simple selector

Wildcard selector

The ID selector

Class selectors

Element selector

Include/descendant selectors

Child selector

Adjacent sibling selectors

General sibling selector

Combinatorial selector

Dynamic pseudo-class selector

:link

:visited

:hover

:active

:focus

:focus-within

UI element pseudo-class selector

:default

:checked

:enabled

:disabled

Structural pseudo-class selector

:root

:not()

:nth-child(n)

:nth-of-type(n)

:first-child

:last-child

:first-of-type

:last-of-type

:only-child

:only-of-type

:empty

:nth-last-child(n)

:nth-last-of-type(n)

Property picker

[key]

[key = value]

[key ~= value]

[key $= value]

[key *= value]

[key |= value]

Pseudo element selector

::selection

::after

::before

::first-line

::first-letter

Related Posts

How to create random star renderings in Javascript

How to understand the Redux principle

WebGL Lesson 30: Adjusting parameters for multiple draw objects – colors