Attribute selector in CSS3
1.E[attr] means to select the attribute in the label and label
2.E[attr="value"] means to select the attribute attribute value of the label and the label
3.E[attr^="value"] Indicates the selection of the label and its attribute attribute value, and starts with xx
4.E[attr$="value"] indicates the selection of the label and the attribute attribute value of the label, and ends with xx
Structural pseudo-class selector in CSS3 : it means to put many tags together and modify it by selecting the number one
: when all the tag names are the same: form a set of all the same tags, and then proceed from the bottom of the set Which number to choose
1. Collection name: first-child means to select the first one below the collection
2. Collection name: last-child means to select the last one below the collection
3. Collection name: nth-child(n) means to select the collection The following number (from front to back)
4. Set name: nth-last-child (n) indicates the number below the set selected (from back to front)
- n in parentheses indicates a number, and the default is n When it means to select all
- 2n, 3n, 2n-1
- odd, even odd, even
Two: When all the label names are different : filter the same label with label = to form a set, and then select the number 1 from the set. Set name: first-of-type means select the first 2
under the set
.Collection name: last-of-type means to select the last one under the set
3. Set name: nth-of-type(n) means to select the number below the set (from front to back)
4. Set name: nth- last-of-type(n) means to select the number below the set (from back to front)
- n in parentheses means a number, and when it is n by default, it means to select all
- 2n, 3n, 2n-1
- odd, even odd, even
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
input:enabled{
background: pink
}
input:disabled{
background: #ccc
}
input:checked{
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<input type="text">
<input type="text" disabled>
<input type="checkbox" checked>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div:not(.box){
color: red
}
</style>
</head>
<body>
<div>靓仔</div>
<div>靓仔</div>
<div>靓仔</div>
<div>靓仔</div>
<div>靓仔</div>
<div>靓仔</div>
<div>靓仔</div>
<div>靓仔</div>
<div>靓仔</div>
<div class="box">D毛</div>
</body>
</html>
Target selector : Indicates that the current active target element can be selected through the event (the target selector is set for which element changes state)
1. Use: selector: target
2. Note: use in conjunction with a tag, anchor point
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box:target{
font-size: 50px;
}
</style>
</head>
<body>
<!-- 通过点击a标签 实现div标签变化 -->
<div id="box">灯</div>
<a href="#box">开关</a>
</body>
</html>
Case: Accordion Effect
Transition attribute: Indicates the change time of an element from one state to another state
1. Attribute: transition
2. Attribute value: time unit 0.8s
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width: 400px;
height: 500px;
border: 1px solid #000;
margin: 100px auto;
}
a{
display: block;
height: 50px;
text-align: center;
line-height: 50px;
background: #000;
color: #fff;
text-decoration: none
}
#box1:target{
height: 350px;
background: url(https://pic3.zhimg.com/v2-306113e9b68f7bba6a3e5cc51809c37a_r.jpg?source=1940ef5c);
background-size: 100% 100%;
}
#box2:target{
height: 350px;
background: url(https://ts1.cn.mm.bing.net/th/id/R-C.ab58762fdf57bc8d046b91eef6699954?rik=mzupRT%2fSqrpEFQ&riu=http%3a%2f%2fhao5.qhimg.com%2ft01c9b5a94575bf22d0.jpg&ehk=YF5vGEhP3680mGTTJu9nnhgrkW6l8DoY1orvGoUtVt0%3d&risl=&pid=ImgRaw&r=0);
background-size: 100% 100%;
}
#box3:target{
height: 350px;
background: url(https://uploadfile.bizhizu.cn/up/b1/10/bc/b110bc0a7bf6ee86536655485fb577ef.jpg);
background-size: 100% 100%;
}
.box div{
transition: 0.8s;
height: 0;
}
</style>
</head>
<body>
<div class="box">
<!-- (a[href="#box$"]{开关$}+div[id="box$"]{灯$})*3 -->
<a href="#box1">开关1</a>
<div id="box1"></div>
<a href="#box2">开关2</a>
<div id="box2"></div>
<a href="#box3">开关3</a>
<div id="box3"></div>
</div>
</body>
</html>
The development idea of the project : progressive enhancement, graceful degradation
1. Progressive enhancement: first ensure the normal use of the lower version and then make the effect in the higher version
2. Elegant degradation: first realize the effect of the higher version, and then consider the adaptation of the lower version browser
The five major browsers on the market: Google, Firefox, IE, Openg, and Safari The
common younger browsers on the market: UC, Baidu, 360, Sohu, qq, Ace 2345, and Quark
Why should there be a browser prefix?
Due to different manufacturers of browsers, the source code is different (the browser kernel parses html and css).
Since CSS3 is a new version, new attributes have been added, and problems will occur when parsing on some browsers. In order to support these attributes, each Browsers have their own prefixes
1.-webkit- safari Google Chrome
2.-ms- IE browser
3.-moz- Firefox browser
4.-o- Oupeng browser abandoned
5.-blink- Oupeng browser browser and Google Chrome