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