h 5新規属性
25737 ワード
04 フォーム属性 を追加構造擬似クラスセレクタ 擬似要素セレクタ 遷移 H 5新規フォーム属性
属性セレクタ属性セレクタの重みは10 である.
ファブリック擬似クラスセレクタ構造の擬似クラスセレクタの重みは10 である.最初の 最後の 第数 奇数 偶数 式 -childおよび-of-typeを置き換えることができる 擬似要素セレクタ
ボックスモデルbox-sizing:border-boxはbox-sizing:border-boxの箱を設置し、paddingとborderはもう大きな箱 を支えない.
トランジション
自動計算
<form action="">
<input type="text" name="uname" required placeholder=" " autofocus autocomplete="off">
<input type="text" value=" " >
<input type="file" multiple>
<input type="email" multiple>
<input type="submit">
form>
属性セレクタ
<style>
/* id li */
li[id] {
color: pink;
}
/* class list6 li */
li[class="list6"] {
color: red;
}
/* class l li ^= */
li[class^="l"] {
background-color: green;
}
/* class 6 li $= */
li[class$="t6"] {
font-size: 30px;
}
/* class b li *= */
li[class*="li"] {
text-align: center;
}
/* 10 */
li.list6 {
color: blue;
}
style>
<ul>
<li id="" class="list1" style=""> 1 lili>
<li class="list2"> 2 lili>
<li class="li6"> 3 lili>
<li class="abcd6"> 4 lili>
<li id=""> 5 lili>
<li class="list6"> 6 lili>
<li class="bxy5"> 7 lili>
<li id=""> 8 lili>
<li style=""> 9 lili>
<li style=""> 10 lili>
ul>
ファブリック擬似クラスセレクタ
/* first-child */
li:first-child {
background-color: red;
}
/* last-child */
li:last-child {
background-color: pink;
}
/* n nth-child(n) */
li:nth-child(2){
background-color: green;
}
/* odd || 2n+1/2n-1 */
li:nth-child(2n-1) {
background-color: #000;
}
/* even || 2n */
li:nth-child(2n){
background-color: #f40;
}
/* () , , ,
, <=0 > , */
/* 5 */
li:nth-child(5n) {
background-color: red;
}
/* 10 */
li:nth-child(-n+10) {
background-color: pink;
}
/* 10 */
li:nth-last-child(-n+10) {
background-color: blue;
}
nth-child , , ,
nth-of-type ,
<style>
/* , before after */
div {
width: 300px;
height: 300px;
border: 1px solid #000;
color: red;
}
/* , display, , */
/* before after */
div::before {
/* content */
/* display: inline-block; */
float: left;
content: ' ';
width: 50px;
height: 50px;
background-color: pink;
}
div::after {
/* content */
/* display: inline-block; */
float: right;
content: ' ';
width: 50px;
height: 50px;
background-color: pink;
}
style>
<div> div>
ボックスモデルbox-sizing:border-box
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
トランジション
模糊
/* */
filter: blur(15px);
自動計算
<style>
.fa {
width: 600px;
height: 100px;
background-color: pink;
}
.son {
/* */
/* width: calc(100% * 6); */
/* width: calc(100% / 6); */
/* width: calc(100% + 60px); */
width: calc(100% - 60px);
height: 20px;
background-color: red;
}
style>
<div class="fa">
<div class="son">div>
div>