CSS3：基本、屬性时迫、偽類選擇器

一颅停、基本選擇器

回顧選擇器

通配符選擇器、元素選擇器掠拳、類選擇器癞揉、ID選擇器、后代選擇器

新增基本選擇器

子元素選擇器溺欧、相鄰兄弟元素選擇器喊熟、通用兄弟選擇器、群組選擇器

1.基本選擇器——子元素選擇器

【概念】：子元素選擇器只能選擇某元素的子元素（直接后代選擇器）

語(yǔ)法格式：父元素>子元素（father>children）

【兼容性】：IE8+姐刁、FireFox芥牌、chrome、Safari聂使、opera

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素選擇器</title>
<style type="text/css">
section > div {
    color: #f00;
}
</style>
</head>
<body>
<section>
    <article>
        <div>article里面的文字</div>
    </article>
    <div>article外面的文字</div>
</section>
</body>
</html>

效果

2.基本選擇器——相鄰兄弟元素選擇器

【概念】：相鄰兄弟選擇器可以選擇緊接在另一元素后的元素壁拉，而且他們具有一個(gè)相同的父元素。

語(yǔ)法格式：元素+兄弟相鄰元素（Element+Sibling）

【兼容性】：IE8+柏靶、FireFox弃理、chrome、Safari屎蜓、oper

<meta charset="UTF-8">
<title>兄弟元素選擇器</title>
<style type="text/css">
section > div + article {
    color: #f00;
}
</style>
</head>
<body>
<section>
    <div>article外面的文字</div>
    <article>
        <div>article里面的文字</div>
    </article>
    <article>
        <div>article里面的文字</div>
    </article>
</section>
</body>
</html>

效果

3.基本選擇器——通用兄弟選擇器

【概念】：選擇某元素后面的所有兄弟元素痘昌，而且他們具有一個(gè)相同的父元素

語(yǔ)法格式：元素_{后面所有兄弟相鄰元素（Element} Siblings）

【兼容性】IE8+、FireFox炬转、chrome辆苔、Safari、oper

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通用兄弟選擇器</title>
<style type="text/css">
section > div ~ article {
    color: #f00;
}
</style>
</head>
<body>
<section>
    <article>
        <div>article里面的文字</div>
    </article>
    <div>article外面的文字</div>
    <article>
        <div>article里面的文字</div>
    </article>
    <article>
        <div>article里面的文字</div>
    </article>
    <article>
        <div>article里面的文字</div>
    </article>
    <article>
        <div>article里面的文字</div>
    </article>
    <article>
        <div>article里面的文字</div>
    </article>
</section>
</body>
</html>

效果

4.基本選擇器——群組選擇器

【概念】：群組選擇器是將具有相同樣式的元素分組在一起扼劈，每個(gè)選擇器之間使用逗號(hào)“,”隔開(kāi)
【語(yǔ)法格式】：元素1,元素2, ..., 元素n（Eelement1, Element2, ..., Elementn）
【兼容性】：IE6+姑子、FireFox、chrome测僵、Safari街佑、oper

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>群組選擇器</title>
<style type="text/css">
section > article,
section > aside,
section > div {
    color: #f00;
    margin-top: 10px;
    background: #abcdef;
}
</style>
</head>
<body>
<section>
    <article>article</article>
    <aside>aside</aside>
    <div>div</div>
</section>
</body>
</html>

效果

二、屬性選擇器

對(duì)帶有指定屬性的HTML元素設(shè)置樣式
使用CSS3屬性選擇器捍靠，你可以只指定元素的某個(gè)屬性沐旨，或者你還可以同時(shí)指定元素的某個(gè)屬性和其對(duì)應(yīng)的屬性值。

Element[attribute]

【概念】：為帶有attribute屬性的Element元素設(shè)置樣式
【兼容性】：IE8+榨婆、FireFox磁携、chrome、Safari良风、opera

Element[attribute=“value”]

【概念】：為attribute=“value”屬性的Element元素設(shè)置樣式
【兼容性】：IE8+谊迄、FireFox闷供、chrome、Safari统诺、opera

Element[attribute~=“value”]

【概念】：選擇attribute屬性包含單詞“value”的元素歪脏，并設(shè)置其樣式
【兼容性】：IE8+、FireFox粮呢、chrome婿失、Safari、opera

習(xí)題：one啄寡，two豪硅，three，four挺物，five哪個(gè)變紅懒浮？

答案：one，two

Element[attribute^=“value”]

【概念】：設(shè)置attribute屬性值以“value”開(kāi)頭的所有Element元素的樣式
【兼容性】：IE8+识藤、FireFox砚著、chrome、Safari蹋岩、opera

Element[attribute$=“value”]

【概念】設(shè)置attribute屬性值以“value”結(jié)尾的所有**Element元素的樣式
【兼容性】：IE8+、FireFox学少、chrome剪个、Safari、opera

Element[attribute*=“value”]

【概念】：設(shè)置attribute屬性值包含“value”的所有Element元素的樣式
【兼容性】：IE8+版确、FireFox扣囊、chrome、Safari绒疗、opera

Element[attribute|=“value”]

【概念】：選擇attribute屬性值以“”value-”**開(kāi)頭的元素侵歇，并設(shè)置其樣式
【兼容性】：IE8+、FireFox吓蘑、chrome惕虑、Safari、opera

三磨镶、偽類選擇器

動(dòng)態(tài)偽類

錨點(diǎn)偽類溃蔫、用戶行為偽類

UI

元素狀態(tài)偽類

CSS3結(jié)構(gòu)類

否定選擇器

偽元素

·動(dòng)態(tài)偽類

動(dòng)態(tài)偽類

這些偽類并不存在于HTML中，只有當(dāng)用戶和網(wǎng)站交互的時(shí)候才能體現(xiàn)出來(lái)

1.錨點(diǎn)偽類

:link,    :visited

2.用戶行為偽類

:hover,    :active,    :focus

案例:focus案例

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>動(dòng)態(tài)偽類</title>
        <style type="text/css">
         input{
            width: 200px;
            height: 30px;
            border: 5px solid #f00;
         }
         input:focus{
            background: #abcdef;
         }
            
        </style>
    </head>
    <body>
        <input type="text">
    </body>
</html>

偽類選擇器.gif

·UI元素狀態(tài)偽類

【概念】：把":enabled",":disabled",":checked"偽類稱為UI元素狀態(tài)偽類

【兼容性】：
":enabled",":disabled"：IE9+琳猫、FireFox伟叛、Chrome、Safari脐嫂、Opera
":checked僅opera

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>UI元素狀態(tài)偽類</title>
    <style type="text/css">
    input{
        width: 200px;
        height: 30px;
    }
    input:enabled{
        width: 200px;
        height: 30px;
        border: 1px solid #f00;
    }
    input:disabled{
        background: #abcdef;
        border: 1px solid #ff0;
    }
    </style>
</head>
<body>
<input type="text" disabled="disabled">
<input type="text">
<input type="text"> 
</body>
</html>

UI元素偽類enabled统刮，disabled.gif

·CSS3結(jié)構(gòu)類

CSS3的:nth選擇器

【概念】：我們把CSS3的:nth選擇器也成為CSS3結(jié)構(gòu)類

選擇方法：

:first-child紊遵、:last-child、:nth-child()侥蒙、:nth-last-child()暗膜、:nth-of-type()、:nth-last-of-type()辉哥、:first-of-type桦山、:last-of-type、:only-child醋旦、:only-of-type恒水、:empty

1.Element:first-child

【概念】
選擇屬于其父元素的首個(gè)子元素的每個(gè)Element元素，并為其設(shè)置樣式
【兼容性】
IE8+饲齐、FireFox钉凌、Chrome、Safari捂人、Opera

2.Element:last-child

【概念】
選擇屬于其父元素的最后一個(gè)子元素的Element元素御雕，并為其設(shè)置樣式
【兼容性】
IE8+、FireFox滥搭、Chrome酸纲、Safari、Opera

Element:nth-child(N)

【概念】
nth-child(N)選擇器匹配屬于其父元素的第N個(gè)子元素瑟匆，不論元素的類型
【兼容性】
IE9+闽坡、FireFox4+、Chrome愁溜、Safari疾嗅、Opera

·關(guān)于參數(shù)（N）

1.Element:nth-child(number)

選擇某元素下的第number個(gè)Element元素關(guān)于參數(shù)(N)

2.Element:nth-child(n)

n是一個(gè)簡(jiǎn)單表達(dá)式，取值從“0”開(kāi)始計(jì)算冕象。這里只能是“n”代承，不能用其他字母代替。

3.Element:nth-child(odd)渐扮、Element:nth-child(even)

odd和even是可用于匹配下標(biāo)是奇數(shù)或偶數(shù)的Element元素的關(guān)鍵詞（第一個(gè)的下標(biāo)是1）

案例題：

列表UL背景顏色有沒(méi)有變化论悴？
列表項(xiàng)奇數(shù)項(xiàng)還是偶數(shù)項(xiàng)為綠色？

odd,even的練習(xí)題

答案：ul 沒(méi)有變化墓律；奇數(shù)項(xiàng)為綠色

4.Element:nth-last-child(N)

【概念】
匹配屬于其元素的第N個(gè)子元素的每個(gè)元素意荤，不論元素的類型，從最后一個(gè)子元素開(kāi)始計(jì)數(shù)只锻。（注意：直接從1開(kāi)始計(jì)數(shù)玖像，不是0，與JS有區(qū)別）
【兼容性】
IE9+、FireFox4+捐寥、Chrome笤昨、Safari、Opera

5.Element:nth-of-type(N)

【概念】
:nth-of-type(N)選擇器匹配屬于父元素的特定類型的第N個(gè)子元素的每個(gè)元素
【兼容性】
IE9+握恳、FireFox4+瞒窒、Chrome、Safari乡洼、Opera

案例div:nth-of-type(N)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nth-of-type</title>
<style type="text/css">
div:nth-of-type(2) {
    color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>
<section>
    <div>1-1</div>
    <div>1-2</div>
    <div>1-3</div>
</section>
<div>0-2</div>
<div>0-3</div>
<section>
    <div>2-1</div>
    <div>2-2</div>
    <div>2-3</div>
</section>
</body>
</html>

上述源碼的1-2;0-2;2-2會(huì)變紅

對(duì)比案例div:nth-child

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>noth-child</title>
<style type="text/css">
div:nth-child(2) {
    color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>
<section>
    <div>1-1</div>
    <div>1-2</div>
    <div>1-3</div>
</section>
<div>0-2</div>
<div>0-3</div>
<section>
    <div>2-1</div>
    <div>2-2</div>
    <div>2-3</div>
</section>
</body>
</html>

上述源碼：1-2和2-2會(huì)變紅

6.Element:nth-last-of-type(N)

【概念】
匹配屬于父元素的特定類型的第N個(gè)子元素的每個(gè)元素崇裁，從最后一個(gè)子元素開(kāi)始計(jì)數(shù)
【兼容性】
IE9+、FireFox4+束昵、Chrome拔稳、Safari、Opera
【注意對(duì)比】：

nth-last-of-type(n)指定元素類型
nth-last-child(n)不指定元素類型

案例：div:nth-last-0f-type(2)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nth-Last-of-type</title>
<style type="text/css">

div:nth-last-of-type(2) {
    color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>
<section>
    <div>1-1</div>
    <div>1-2</div>
    <div>1-3</div>
</section>
<div>0-2</div>
<div>0-3</div>
<section>
    <div>2-1</div>
    <div>2-2</div>
    <div>2-3</div>
</section>
</body>
</html>

1-2,0-2,2-2變紅

對(duì)比案例div:nth-last-child(2)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nth-Last-child</title>
<style type="text/css">
div:nth-last-child(2) {
    color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>
<section>
    <div>1-1</div>
    <div>1-2</div>
    <div>1-3</div>
</section>
<div>0-2</div>
<div>0-3</div>
<section>
    <div>2-1</div>
    <div>2-2</div>
    <div>2-3</div>
</section>
</body>
</html>

1-2,0-3,2-2變紅

7.Element:first-of-type

【概念】
:first-of-type選擇器匹配屬于其父元素的特定類型的首個(gè)子元素的每個(gè)元素
相當(dāng)于noth-of-type(1)
【兼容性】
IE9+锹雏、FireFox巴比、Chrome、Safari礁遵、Opera

案例first-of-type

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First-of-type</title>
<style type="text/css">
div:first-of-type {
    color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>
<section>
    <div>1-1</div>
    <div>1-2</div>
    <div>1-3</div>
</section>
<div>0-2</div>
<div>0-3</div>
<section>
    <div>2-1</div>
    <div>2-2</div>
    <div>2-3</div>
</section>
</body>
</html>

效果：0-1,1-1,2-1

8.Element:last-of-type

【概念】
:last-of-type選擇器匹配屬于其父元素的特定類型的最后一個(gè)子元素的每個(gè)元素
【兼容性】
IE9+轻绞、FireFox、Chrome佣耐、Safari政勃、Opera

案例last-of-type

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Last-of-type</title>
<style type="text/css">
div:last-of-type {
    color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>
<section>
    <div>1-1</div>
    <div>1-2</div>
    <div>1-3</div>
</section>
<div>0-2</div>
<div>0-3</div>
<section>
    <div>2-1</div>
    <div>2-2</div>
    <div>2-3</div>
</section>
</body>
</html>

案例效果：1-3,0-3,2-3紅色

9.Element:only-child

【概念】
:only-child選擇器匹配屬于其父元素的唯一子元素的每個(gè)元素
【兼容性】
IE9+、FireFox兼砖、Chrome奸远、Safari、Opera

案例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>only-child</title>
<style type="text/css">
article:only-child {
    background: #f00;
}
</style>
</head>
<body>
<section>
    <article>1</article>
    <article>2</article>
</section>
<section>
    <article>3</article>
</section>
<section>
    <div>4</div>
    <article>5</article>
    <div>6</div>
</section>
<section>
    <div>7</div>
    <article>8</article>
    <article>9</article>
    <div>10</div>
</section>
</body>
</html>

效果：僅第3個(gè)背景紅色

10.Element:only-of-type

【概念】
:only-of-type選擇器匹配屬于其父元素的特定類型的唯一子元素的每個(gè)元素
【兼容性】
IE9+掖鱼、FireFox4+然走、Chrome援制、Safari戏挡、Opera

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>only-of-type</title>
<style type="text/css">
article:only-of-type {
    background: #f00;
}
</style>
</head>
<body>
<section>
    <article>1</article>
    <article>2</article>
</section>
<section>
    <article>3</article>
</section>
<section>
    <div>4</div>
    <article>5</article>
    <div>6</div>
</section>
<section>
    <div>7</div>
    <article>8</article>
    <article>9</article>
    <div>10</div>
</section>
</body>
</html>

效果：3和5都是紅色。

11.Element:empty

【概念】
:empty選擇器匹配沒(méi)有子元素（包括文本節(jié)點(diǎn)）的每個(gè)元素
【兼容性】
IE9+晨仑、FireFox褐墅、Chrome、Safari洪己、Opera

12.否定選擇器（:not）

【概念】
:not(Element/selector)選擇器匹配非指定元素/選擇器的每個(gè)元素
【語(yǔ)法格式】
父元素:not(子元素/子選擇器) （Father:not(Children/selector)）
【兼容性】
IE9+妥凳、FireFox、Chrome答捕、Safari逝钥、Opera

not案例：最后一個(gè)豎線清除

最后一個(gè)豎線清除效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>not</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    border: none;
}
a {
    text-decoration: none;
    color: #333;
    font-size: 14px;
    display: block;
    float: left;
    width: 100px;
    height: 30px;
}
nav {
    width: 800px;
    margin: 0 auto;
}
nav > a:not(:last-of-type) {
    border-right: 1px solid red;
}
</style>
</head>
<body>
<nav>
    <a href="#">first</a>
    <a href="#">second</a>
    <a href="#">third</a>
    <a href="#">fourth</a>
    <a href="#">fifth</a>
</nav>
</body>
</html>

三、偽元素

CSS偽元素用于向某些選擇器設(shè)置特殊效果

【語(yǔ)法格式】
元素::偽元素（Element::pseudo-element）

【兼容性】
IE9+拱镐、FireFox艘款、Chrome持际、Safari、Opera
【備注】

對(duì)于新版本的瀏覽器哗咆，偽元素:或::都可以蜘欲，用兩個(gè):是為了和之前的選擇器進(jìn)行區(qū)分。
偽元素和偽類是不同的：

偽類：整體是個(gè)選擇器晌柬，它選中的只是針對(duì)一個(gè)元素
偽元素：在之前的元素中姥份，增加了一個(gè)在HTML并不存在的元素，即相當(dāng)于偽造的元素年碘。

1.偽元素——Element::first-line

【概念】
根據(jù)“first-line”偽元素中的樣式對(duì)Element元素的第一行文本進(jìn)行格式化
【說(shuō)明】
“first-line”偽元素只能用于塊級(jí)元素

2.偽元素——Element::first-letter

【概念】
用于向文本的首字母設(shè)置特殊樣式
【說(shuō)明】
“first-letter”偽元素只能用于塊級(jí)元素

3.偽元素——Element::before

【概念】
在元素的內(nèi)容前面插入新內(nèi)容
【說(shuō)明】
常用“content”配合使用

【注意】::before偽元素的特點(diǎn)：
1澈歉、第一個(gè)子元素
2、行級(jí)元素
3盛泡、內(nèi)容通過(guò)content寫(xiě)入
4闷祥、標(biāo)簽中找不到對(duì)應(yīng)的標(biāo)簽

案例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>before</title>
<style type="text/css">
div {
    width: 300px;
    height: 100px;
    border: 1px solid #000;
}
div::before {
    content: "我在內(nèi)容的前面";
}
</style>
</head>
<body>
<div>偽元素</div>
</body>
</html>

源碼效果：

4.偽元素——Element::after

【概念】
在元素的內(nèi)容后面插入新內(nèi)容
【說(shuō)明】
常用“content”配合使用，多用于清除浮動(dòng)

Element::after清除浮動(dòng)案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clear</title>
<style type="text/css">
header {
    background: #abcdef;
}
header::after {
    display: block;
    content: "";
    clear: both;
}
header > article {
    float: left;
    width: 40%;
    height: 30px;
    background: #f00;
}
header > aside {
    float: right;
    width: 40%;
    height: 50px;
    background: #ff0;
}
</style>
</head>
<body>
<header>
    <article></article>
    <aside></aside>
</header>
</body>
</html>

5.偽元素——Element::selection

【概念】
用于設(shè)置在瀏覽器中選中文本后的背景色與前景色
【兼容性】
::selection在IE家族中傲诵，只有IE9+版本支持凯砍，在Firefox中需要加上其前綴“-moz”

案例：

selection效果.gif

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Selection</title>
<style type="text/css">
div::selection {
    background: red;
    color: #ff0;
}
</style>
</head>
<body>
<div>SelectionSelectionSelectionSelectionSelectionSelectionSelection</div>
</body>
</html>

CSS權(quán)重

什么是權(quán)重

當(dāng)很多的規(guī)則被應(yīng)用到某一個(gè)元素上時(shí)，權(quán)重是一個(gè)決定哪種規(guī)則生效拴竹，或者是優(yōu)先級(jí)的過(guò)程

權(quán)重等級(jí)與權(quán)值

行內(nèi)樣式（1000）>ID選擇器（100）>類悟衩、屬性選擇器和偽類選擇器（10）>元素和偽類（1）>*(0)

權(quán)重計(jì)算口訣

從0開(kāi)始，一個(gè)行內(nèi)樣式+1000栓拜，一個(gè)id+100座泳，一個(gè)屬性選擇器、class或者偽類+10幕与，一個(gè)元素名或者偽元素+1

CSS權(quán)重規(guī)則

包含更高權(quán)重選擇器的一條規(guī)則擁有更高的權(quán)重
ID選擇器（idValue）的權(quán)重比屬性選擇器（[id="idValue"]）高帶有上下文關(guān)系的選擇器比單純的元素選擇器權(quán)重要高
帶有上下文關(guān)系的選擇器比單純的元素選擇器權(quán)重要高
與元素“挨得近”的規(guī)則生效
最后定義的這條規(guī)則會(huì)覆蓋上面與之沖突的規(guī)則
無(wú)論多少個(gè)元素組成的選擇器挑势，都沒(méi)有一個(gè)class選擇器權(quán)重高
通配符選擇器權(quán)重是0，被繼承的CSS屬性也帶有權(quán)重啦鸣，權(quán)重也是0

最后編輯于：2017.12.05 06:05:10

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末潮饱，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子诫给，更是在濱河造成了極大的恐慌香拉，老刑警劉巖，帶你破解...
沈念sama閱讀 221,576評(píng)論 6贊 515
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件中狂，死亡現(xiàn)場(chǎng)離奇詭異凫碌，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)胃榕，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 94,515評(píng)論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門盛险，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人，你說(shuō)我怎么就攤上這事苦掘∪郑” “怎么了？”我有些...
開(kāi)封第一講書(shū)人閱讀 168,017評(píng)論 0贊 360
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵鸟蜡，是天一觀的道長(zhǎng)膜赃。經(jīng)常有香客問(wèn)我，道長(zhǎng)揉忘，這世上最難降的妖魔是什么跳座？我笑而不...
開(kāi)封第一講書(shū)人閱讀 59,626評(píng)論 1贊 296
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮泣矛，結(jié)果婚禮上疲眷，老公的妹妹穿的比我還像新娘。我一直安慰自己您朽，他們只是感情好狂丝，可當(dāng)我...
茶點(diǎn)故事閱讀 68,625評(píng)論 6贊 397
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布。她就那樣靜靜地躺著哗总，像睡著了一般几颜。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上，一...
開(kāi)封第一講書(shū)人閱讀 52,255評(píng)論 1贊 308
城市分裂傳說(shuō)
那天，我揣著相機(jī)與錄音击孩，去河邊找鬼。笑死谆趾，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的叛本。我是一名探鬼主播沪蓬，決...
沈念sama閱讀 40,825評(píng)論 3贊 421
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼来候！你這毒婦竟也來(lái)了跷叉？” 一聲冷哼從身側(cè)響起，我...
開(kāi)封第一講書(shū)人閱讀 39,729評(píng)論 0贊 276
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤吠勘，失蹤者是張志新（化名）和其女友劉穎性芬，沒(méi)想到半個(gè)月后峡眶，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體剧防，經(jīng)...
沈念sama閱讀 46,271評(píng)論 1贊 320
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 38,363評(píng)論 3贊 340
?白月光啟示錄
正文我和宋清朗相戀三年辫樱，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了峭拘。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 40,498評(píng)論 1贊 352
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖鸡挠，靈堂內(nèi)的尸體忽然破棺而出辉饱，到底是詐尸還是另有隱情，我是刑警寧澤拣展，帶...
沈念sama閱讀 36,183評(píng)論 5贊 350
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布彭沼，位于F島的核電站，受9級(jí)特大地震影響备埃，放射性物質(zhì)發(fā)生泄漏姓惑。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,867評(píng)論 3贊 333
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一按脚、第九天我趴在偏房一處隱蔽的房頂上張望于毙。院中可真熱鬧，春花似錦辅搬、人聲如沸唯沮。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 32,338評(píng)論 0贊 24
一樁弒父案堪遂，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)介蛉。三九已至，卻和暖如春溶褪，著一層夾襖步出監(jiān)牢的瞬間甘耿，已是汗流浹背。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 33,458評(píng)論 1贊 272
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工竿滨，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留佳恬，地道東北人。一個(gè)月前我還...
沈念sama閱讀 48,906評(píng)論 3贊 376
代替公主和親
正文我出身青樓于游，卻偏偏與公主長(zhǎng)得像毁葱，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子贰剥，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,507評(píng)論 2贊 359

CSS3：基本、屬性时迫、偽類選擇器

一颅停、基本選擇器

回顧選擇器

新增基本選擇器

1.基本選擇器——子元素選擇器

2.基本選擇器——相鄰兄弟元素選擇器

3.基本選擇器——通用兄弟選擇器

4.基本選擇器——群組選擇器

二、屬性選擇器

Element[attribute]

Element[attribute=“value”]

Element[attribute~=“value”]

習(xí)題：one啄寡，two豪硅，three，four挺物，five哪個(gè)變紅懒浮？

Element[attribute^=“value”]

Element[attribute$=“value”]

Element[attribute*=“value”]

Element[attribute|=“value”]

三磨镶、偽類選擇器

動(dòng)態(tài)偽類

UI

元素狀態(tài)偽類

CSS3結(jié)構(gòu)類

否定選擇器

偽元素

·動(dòng)態(tài)偽類

動(dòng)態(tài)偽類

1.錨點(diǎn)偽類

2.用戶行為偽類

案例:focus案例

·UI元素狀態(tài)偽類

案例：

·CSS3結(jié)構(gòu)類

CSS3的:nth選擇器

選擇方法：

1.Element:first-child

2.Element:last-child

Element:nth-child(N)

·關(guān)于參數(shù)（N）

1.Element:nth-child(number)

2.Element:nth-child(n)

3.Element:nth-child(odd)渐扮、Element:nth-child(even)

案例題：

4.Element:nth-last-child(N)

5.Element:nth-of-type(N)

案例div:nth-of-type(N)

對(duì)比案例div:nth-child

6.Element:nth-last-of-type(N)

案例：div:nth-last-0f-type(2)

對(duì)比案例div:nth-last-child(2)

7.Element:first-of-type

案例first-of-type

8.Element:last-of-type

案例last-of-type

9.Element:only-child

案例：

10.Element:only-of-type

11.Element:empty

12.否定選擇器（:not）

not案例：最后一個(gè)豎線清除

三、偽元素

CSS偽元素用于向某些選擇器設(shè)置特殊效果

1.偽元素——Element::first-line

2.偽元素——Element::first-letter

3.偽元素——Element::before

案例：

4.偽元素——Element::after

Element::after清除浮動(dòng)案例

5.偽元素——Element::selection

案例：

CSS權(quán)重

什么是權(quán)重

權(quán)重等級(jí)與權(quán)值

權(quán)重計(jì)算口訣

CSS權(quán)重規(guī)則

推薦閱讀更多精彩內(nèi)容