-
123456789查看全部
-
著重看
這一節內容查看全部 -
1、屬性選擇器：
例如：a[class^="val"]{}
匹配class的值是以val開頭的字符串
a[class$="val"]：匹配以val結尾的字符串
a[class*="val"]：匹配class任意位置包含val的字符串
2、結構偽類選擇器：:root
:root{background:orange}
等同于
html{background:orange}
3、否定選擇器：:not
例如：
input:not([type='submit']){
}//除type為submit剩下的所有的input框
4、表示為空：:empty
用來選擇沒有任何內容的的元素，這里的沒有內容指連空格也沒有，經常用于吧沒有任何內容的元素隱藏起來
:empty{
?????display:none;
}
5、目標選擇器：:target
主要用于點擊標題，跳轉到相對應的內容處，內容格式可以改變，比如加粗或添加背景色等，a標簽href中要寫#brand（這個名字隨意起，但是要和后面對應），div內容里面的id為brand
<h2>< a href="#brand">Brand</ a></h2>
<div class="menuSection" id="brand">
????content for Brand
</div>
注意：當有多個url時：
<h2>< a href="#brand">Brand</ a></h2>
<div class="menuSection" id="brand">
??content for Brand
</div>
<h2>< a href="#jake">Brand</ a></h2>
<div class="menuSection" id="jake">
?content for jake
</div>
<h2>< a href="#aron">Brand</ a></h2>
<div class="menuSection" id="aron">
????content for aron
</div>
#brand:target {
??background: orange;
??color: #fff;
}
#jake:target {
??background: blue;
??color: #fff;
}
#aron:target {
??background: red;
??color: #fff;
}
6、結構性偽類選擇器：:first-child
表示父元素的第一個子元素
ul>li:first-child{
?????color:red;
}
7、結構性偽類選擇器：:last-child
表示父元素的最后一個子元素
ul>li:last-child{
?????color:red;
}
8、結構性偽類選擇器：:nth-child(n)
用來定位某個父元素的一個或多個特定的子元素，n是參數，可以是整數（1,2,3,4），也可以是表達式(2n+1)、和關鍵詞(odd，even),注意，參數的起始值始終是1，不是0。
?
9、結構性偽類選擇器：:nth-last-child(n)
從其父元素的最后一個子元素開始計算，來選擇特定的元素
例如：ul>li:nth-last-child(5)選擇的就是倒數第5個元素
10、:first-of-type
類似于“:first-child”選擇器，不同之處是指定了元素的類型，主要用來定位一個父元素下的某個類型的第一個子元素
例如：
.wrapper > p:first-of-type{
Background:orange;
}
11、nth-of-type(n)
類似于“:nth-child(n)”選擇器，只計算父元素中指定的某種類型的子元素。
12、:last-of-type
類似于“first-of-type”,選擇的是父元素下某個類型的最后一個子元素
13、:nth-last-of-type(n)
類似于“:last-of-type”選擇器
父元素下指定某個子元素的類型，但是起始方向是從最后一個子元素開始
14、:only-child
父元素中只有一個子元素，而且只有唯一的一個子元素
15、:only-of-type
來選擇一個元素是它的父元素的唯一一個相同類型的子元素,另一種說法是
表示一個元素他有很多個子元素，而其中只有一種類型的子元素是唯一的，使用“:only-of-type”選擇器就可以選中這個元素中的唯一一個類型子元素.
查看全部 -
box-shadow:像素值1 像素值2 像素值3 像素值4 顏色值 陰影類型查看全部
-
3&4
.nav li:after{? ? ? ? ??
? ? position:absolute;? ?
? ? content:"|";? ? ??
? ? right:0;? ? ? ? ??
? ? color:#fff;? ?
}
.nav li:last-child:after{
? ? content:"";
}
查看全部 -
添加多個陰影，只需用逗號隔開
查看全部 -
css3瀏覽器兼容前綴
-webkit? chrome和safari
-moz? ?firefox
-ms IE
-o opera
查看全部 -
opacity 不透明級別
查看全部 -
<!DOCTYPE html>
<html>
<head>?
<meta charset="utf-8">
<title>結構性偽類選擇器—not</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>?
<body>
? ?<form action="#">
? <div>
? ? <label for="name">Text Input:</label>
? ? <input type="text" name="name" id="name" placeholder="John Smith" />
? </div>
? <div>
? ? <label for="name">Password Input:</label>
? ? <input type="text" name="name" id="name" placeholder="John Smith" />
? </div>
? <div>
? ? <input type="submit" value="Submit" />
? </div>
</form>?
</body>
</html>
查看全部 -
zoom：1? 放大一倍
clearfix 清除浮動
visibility? 可見度? ：hidden隱藏
border-radius:100px / 10px; 相當于?
border-radius: 1em/5em;
/* 等價于： */
border-top-left-radius: ? ? 1em 5em;
border-top-right-radius: ? ?1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: ?1em 5em;
查看全部 -
transform:rotate(10deg)? ?旋轉十度
transform:skew(10deg)? ?傾斜十度
transform:scale(1.5)????????擴大1.5倍? 縮小為負數
transform:translate(100px,0）????向右移動100px 上為0? 下左移用負數
?-webkit-transform:rotate(10deg);? webkit moz o ms 表示瀏覽器兼容代碼
查看全部 -
ol>li:nth-child(-n+2):nth-child(n+1){
? background: orange;
}
此運算結果為前兩項變色，先運算-n+2，得出結果為第二運算的n，再n+1.二次運算加上的數只能小于第一次運算所加的數。
如前面是-n+2,二次運算只能+-n+1.
查看全部 -
練習？
查看全部 -
使用偽類元素制作漸變分割線并刪除第一和最后一個分割線？
查看全部 -
background-clip同background-origin，一個是裁剪一個是全部展示，所用元素相同
查看全部
舉報