In order to make our web page more beautiful and necessary for learning the front-end, it is necessary to learn css selector. Let's learn from the following nonsense.
What is css?
Cascading style sheet: a technology born in HTML to decorate HTML web pages.
Three common ways to write css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Webpage</title>
<style >
div{
color: aqua;
}
</style>
<link rel="stylesheet" type="text/css" href="css/text.css"/>
</head>
<body>
<div style="color: #0000FF; "< / div > first writing method
<div >The second way to write</div>
<div class="color" >The third way to write</div>
</body>
</html>
The third method is the css part (this is a common way in development)
.color{
color: #FF0000;
}Phenomenon:
Common css attributes
| width | wide |
| height | high |
| font-size | font size |
| border (size of line, type of line, color of line) | side line |
Color representation in css
First kind
color: red; color: Color words;
Second:
color: (#ff,#ff,#ff) /* rgb Configure according to the proportion of three source colors and write in hexadecimal */
Third:
color: rgb(255,255,255) /* rgb According to the proportion of three source colors */
Fourth:
color: rgba(255,255,255,0.3) /* rgb According to the proportion of three source colors, a represents transparency, and the range is 0 ~ 1 */
css selector
What is a css selector?
Facilitate the development of ways to find and modify render labels
css selector
Basic selector
| id selector (unique in web pages, it is not recommended to start with a number) | #Label name |
| Class selector (meaning '., clsss selector) | . label name |
| tag chooser | Label name |
| Wildcard selector | *(for wildcards, for any) |
Descendant Selectors
| Descendant selector (e.g. p tag under div) | div>p |
| Descendant selector (e.g. all p tags under div, represented by spaces) | div p |
compound selector
| Separated by commas | Multiple selectors can share a label |
| range selector | Render the range selector |
Example of writing
#fixed-input{
color: red;
}
.color{
color: rgba(255,255,255,0.3)
/* rgb According to the proportion of three source colors, a represents transparency, and the range is 0 ~ 1 */
}
div{
width: auto;
}
*{
margin: 0px;
/* If the outer margin is set to 0, clear the outer margin, and there are labels in the row by default */
padding: 0px;
/* padding */
border: 1px solid red;
}
/* Progeny selector */
header>.top {
height: 37px;
width: 100%;
background-color: #1D011B;
}
/* Descendant Selectors */
header top{
height: 37px;
width: 100%;
background-color: #1D011B;
}
/* compound selector */
header .top{
height: 37px;
width: 100%;
background-color: #1D011B;
}css prioritization
! Important > inline style > ID selector > class selector > label > wildcard > inheritance > browser default attributes
attribute selectors
| div[text] | text tag in div |
| input[type$='i'] | End with i |
| input[type^='i'] | Start with i |
| input[type*='e'] | Through with e |
Examples
/* input Tag with text=haha value in tag */
input[text='haha']{
color: #0000FF;
}
/* input A label with the letter e in the label */
input[type*='e']{
color: #000000;
}
/* input There is a label beginning with the letter e in the label */
input[type^='i']{
color: #0000FF;
}
/* input A label that ends with the letter e in the label */
input[type$='i']{
color: #721170;
}New selector added in css3 (added in css3, small series is just a few)
(study address: CSS reference manual (w3school.com.cn))
| :root | Select the root element of the document. |
| element+element | Tag 1 next tag 2 at the same level |
| :first-child | Select each < p > element that belongs to the first child element of the parent element. |
/* No click effect */
a:link{
color: #000000;
/* The setting has no underline */
text-decoration: none;
}
/* Effect after being clicked */
a:visited{
color: #721170;
}
/* The effect of putting the mouse up */
a:hover{
color: #721170;
}
/* Clicked effect */
a:active{
color: #0000FF;
}