Four categories of CSS selectors: basic, combination, attribute, pseudo-class
|
What is a selector? The role of the selector is to find elements through it and pass the CSS style to the elements! CSS selectors are mainly divided into four categories: basic selectors, attribute selectors, combined selectors and pseudo-class selectors! CSS basic selectors The basic selectors are divided into: * wildcard, tag selector, class selector, id selector. The programming idea that needs to be paid attention to here is that an element in the CSS cascading style sheet has only one id. Pay attention to the following points: 1. ID uniqueness 2. Element IDs are different, just like everyone has only one ID card, ID represents ID card 3. The class selector is not unique, it can be reused! In addition, the * wildcard represents the global
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Basic Selector</title>
<style type="text/css">
*{
color: skyblue;
}/**Wildcard*/
div{
color: red;
}/*Tag selector*/
.box{
color: steelblue;
}/*class selector*/.box{color: steelblue;} can also be written as *.box{color: steelblue;}, which means that the font color of all boxes is steelblue
#content{
color: tomato;
}/*id selector*/
</style>
</head>
<body>
<div class="box" id="content">
Dahuiniu Blog focuses on web front-end technology learning</div>
</body>
</html>CSS combination selector Some people string together basic selectors through special symbols and call them CSS combination selectors. Common CSS combination selectors include: group selectors, nested selectors, sub-selectors, adjacent same-level selectors
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css combination selector</title>
<style type="text/css">
/* div{
color: teal;
font-size: 24px;
}
p{
color: teal;
} */
div{
font-size: 24px;
}
div,p{
color: teal;
}/*Group selector*/
div p{
color: red;
}/*Nested selectors*/
ul>li{
font-size: 24px;
list-style: square;
}/*Child selector*/
div+p{
color: blue;
}/*Adjacent selectors of the same level*/
</style>
</head>
<body>
<div>
People only admire the bright and beautiful flowers of success! However, their buds were soaked in the tears of struggle and sprinkled with the blood of sacrifice.<p>I thought I knew a lot and experienced a lot, but in the end I realized that it was all so ridiculous</p>
</div>
<p>We should not only look at the moment of success, but also see the process of success, so as to motivate ourselves to continue to make efforts and move forward towards the goal of success.</p>
<p>People only admire the bright and beautiful flowers of success! However, their buds were soaked in the tears of struggle and sprinkled with the blood of sacrifice.<span>We should not only look at the moment of glory of the successful people, but also see the process of their efforts and struggles, so as to motivate ourselves to keep working hard and move towards the goal of success.</span></p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>CSS attribute selector Basic selector [attribute], basic selector [attribute=value], basic selector [attribute~=value] separated by spaces, what does basic selector [attribute^=value] start with, what does basic selector [attribute$=value] end with
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css attribute selector</title>
<style type="text/css">
div[title]/*Basic selector [attribute]*/
div[title=english]{
color: blue;
}/*Basic selector [attribute=value]*/
div[title~=en]{
color:#f90;
font-weight: bold;
}/*Basic selector [attribute~=value] contains any one of the attributes*/
p,div[title^=zh]{
font-size:24px;
color: brown;
}/*What does the basic selector [attribute^=value] start with*/
div[title$=china]{
letter-spacing: 10px;
text-decoration: line-through;
font-style: italic;
}/*What does the basic selector [attribute $=value] end with*/
</style>
</head>
<body>
<div title="english">
If you can NOT explain it simply, you do NOT understand it well enough
</div>
<div title="english en yingyu">
Didn’t you notice? 2013 I love you for my whole life, 2014 I love you for my whole life, 2015 I love you for my whole house, 2016 I love you all the way, 2017 I love you for everything, 2018 I love you half, 2019 I still love you, 2020 I love you, 2021 I just love you🌝
</div>
<p title="zh en">
Four categories of CSS selectors: basic, combination, attribute, pseudo-class</p>
<div title="zh en china">
http://www.cnblogs.com/dhnblog/p/12293463.html
</div>
</body>
</html>CSS pseudo-class selector Literally speaking, pseudo means fake, and elements are tags and the contents wrapped by tags. Simply put, pseudo-elements are fake elements, and the antonym of fake is real. In the page, these are written by ourselves, so they are real. In this HTML page, all elements will be secretly added with start and end tags. This is a pseudo-element. The pseudo-class selector refers to an operation state!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css pseudo-class selector</title>
<style type="text/css">
p{
color: brown;
border: 1px solid black;
height: 40px;
line-height: 40px;
}
p::before{
content: "before start";
}
p::after{
content: "after end";
}
/* For the first letter of a block element::first-letter
First line of text::first-line */
div::first-letter{
font-size: 24px;
color: blue;
}
div::first-line{
color:yellowgreen;
font-style: initial;
font-weight: bold;
}
</style>
</head>
<body>
<div class="box">http://www.dhnblog.com/ Dahuiniu Blog Technology is the king of the world, hard work makes dreams come true, and the height depends on attitude<!--before Start-->
<p>Valentine's Day greetings for your girlfriend, very sweet and seductive, instantly win her heart!</p>
<!--after end-->
</div>
</body>
</html>Summarize The above are the four major categories of CSS selectors introduced by the editor: basic, combination, attribute, and pseudo-class. I hope it will be helpful to everyone. Thank you very much for your support of the 123WORDPRESS.COM website! |
<<: Summary of practical experience of HTML knowledge points
>>: A good way to improve your design skills
Recommend
Summarize some general principles of web design and production
<br />Related articles: 9 practical suggesti...
Some problems that may be caused by inconsistent MySQL encoding
Stored procedures and coding In MySQL stored proc...
Detailed discussion of several methods for deduplicating JavaScript arrays
Table of contents 1. Set Deduplication 2. Double ...
Solution to the problem of Failed when configuring IDEA to connect to MYSQL database
This article mainly introduces the solution to th...
Vue realizes the function of uploading photos on PC
This article example shares the specific code of ...
How to use and limit props in react
The props of the component (props is an object) F...
How to use vue-cli to create a project and package it with webpack
1. Prepare the environment (download nodejs and s...
Detailed tutorial on migrating the home directory to a new partition under Ubuntu
When the user's home directory becomes larger...
Solution to invalid Nginx cross-domain setting Access-Control-Allow-Origin
nginx version 1.11.3 Using the following configur...
The docker container directly runs to obtain the public IP operation through ping
Get the local public IP address through the conta...
Detailed explanation of Docker data management (data volumes & data volume containers)
When using Docker in a production environment, da...
Sample code for implementing the history tag menu using vue+elementui+vuex+sessionStorage
Generally, after there is a menu on the left, the...
JS, CSS and HTML to implement the registration page
A registration page template implemented with HTM...
Detailed explanation of data types in JavaScript basics
Table of contents 1. Data Type 1.1 Why do we need...
CSS to achieve particle dynamic button effect
Original link https://github.com/XboxYan/no… A bu...