CSS3學習筆記（三）

CSS3選擇器

  • 屬性選擇器：通過id屬性可將不同div元素進行區(qū)分。
  • 在CSS2中引入了一些屬性選擇器五垮，而CSS3在CSS2的基礎(chǔ)上對屬性選擇器進行了擴展，新增了3個屬性選擇器挠铲，使得屬性選擇器有了通配符的概念甜橱，這三個屬性選擇器與CSS2的屬性選擇器共同構(gòu)成了CSS功能強大的屬性選擇器。如下表所示：
屬性選擇器 功能描述
E[att^="val"] 選擇匹配元素E癣缅，且E元素定義了屬性att纫事，其屬性值以val開頭的任何字符串。
E[att$="val"] 選擇匹配元素E所灸，且E元素定義了屬性att丽惶，其屬性值以val結(jié)尾的任何字符串，剛好與E[att^="val"]相反爬立。
E[att*="val"] 選擇匹配元素E钾唬，且E元素定義了屬性att，其屬性值任意位置包含了"val"。換句話說抡秆，字符串與屬性值中的任意位置相匹配奕巍。 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>屬性選擇器</title>
    <style>
    /*通配符選擇器*/
    a[class^="column"] {
        background: red;
    }
    a[href$="doc"] {
        background: green;
    }
    a[title*="box"] {
        background: yellow;
    }
    </style>
</head>
<body>
    <a href="##" class="columnNews">我的背景想變成紅色</a>
    <a href="##" class="columnVideo">我的背景想變成紅色</a>
    <a href="##" class="columnAboutUs">我的背景想變成紅色</a><br />
    <a href="1.doc">我的背景想變成綠色</a>
    <a href="2.doc">我的背景想變成綠色</a><br />
    <a href="##" title="this is a box">我的背景想變成黃色</a>
    <a href="##" title="box1">我的背景想變成黃色</a>
    <a href="##" title="there is two boxs">我的背景想變成黃色</a>
</body>
</html>
通配符選擇器自定義樣式

結(jié)構(gòu)性偽類選擇器

  • :root選擇器：根選擇器，其含義為匹配元素E所在文檔的根元素儒士。在HTML文檔中的止，根元素始終是<html>。
  • 通過:root選擇器設置背景顏色：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>結(jié)構(gòu)性偽類選擇器—root</title>
    <style type="text/css">
/*    :root {
        background-color: pink;
    }*/
    /*:root等同于html標簽樣式*/
    html {
        background: pink;
    }
    </style>
</head>
<body>
    <div>Root選擇器修改HTML元素的背景顏色</div>
</body>
</html>
設置全局背景顏色
  • :not選擇器：否定選擇器着撩，和jQuery中的:not選擇器一模一樣诅福，可以選擇除某個元素之外的所有元素。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>結(jié)構(gòu)性偽類選擇器—not</title>
    <style type="text/css">
    div {
        padding: 10px 20px;
        /* min-height屬性設置元素的最小高度拖叙，
        保證沒有內(nèi)容時能撐高對象盒子*/
        min-height: 40px;
    }
    /*自定義否定選擇器樣式*/
    .test div:not([id="footer"]) {
        background: orange;
    }
    form {
        width: 200px;
        margin: 20px auto;
    }
    form div {
        margin-bottom: 20px;
    }
    /*給表單中除submit按鈕之外的input元素添加紅色邊框*/
    form input:not([type="submit"]) {
        border: 1px solid red;
    }
    </style>
</head>
<body>
    <form action="#">
        <div>
            <label for="name">Account Input:</label>
            <input type="text" name="name" id="name" placeholder="請輸入用戶名" />
        </div>
        <div>
            <label for="pwd">Password Input:</label>
            <input type="password" name="pwd" id="pwd" placeholder="請輸入密碼" />
        </div>
        <div>
            <input type="submit" value="Submit" />
        </div>
    </form> ?
    <div class="test">
        <div id="header">頁頭</div>
        <div id="page">頁體</div>
        <div id="footer">頁腳</div>
    </div>
</body>
</html>
設置否定選擇器
  • :empty選擇器：表示空氓润，用來選擇沒有任何內(nèi)容的元素，這里沒有內(nèi)容指的是一點內(nèi)容都沒有薯鳍，哪怕是一個空格咖气。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>結(jié)構(gòu)性偽類選擇器—empty</title>
    <style type="text/css">
    div {
        min-height: 30px;
    }
    div:empty {
        border: 1px solid green;
    }
    p {
        background: orange;
        min-height: 30px;
    }
    p:empty {
        /*空標簽不顯示樣式*/
        display: none;
    }
    </style>
</head>
<body>
    <div>我這里有內(nèi)容</div>
    <div> </div><!-- 這里有一個空格 -->
    <div></div><!-- 這里任何內(nèi)容都沒有 -->
    <p>我是一個段落</p>
    <p> </p> <!-- 這里有一個空格 -->
    <p></p>?<!-- 這里任何內(nèi)容都沒有 -->
</body>
</html>
設置
  • :target選擇器：目標選擇器，用來匹配文檔(頁面)的url的某個標志符的目標元素挖滤。＃ 錨的名稱是在一個文件中鏈接到某個元素的URL崩溪，元素被鏈接到目標元素。這個有點像markdown中[toc]生成目錄后有鏈接到當前文章中某個小標題一樣斩松！
    1伶唯、具體來說，觸發(fā)元素的URL中的標志符通常會包含一個#號砸民，后面帶有一個標志符名稱抵怎，例如下面代碼中是：#brand1等；
    2岭参、:target就是用來匹配id為brand1的元素（id="brand`"的元素）反惕，即下面代碼中的那個div元素！
    3演侯、多個url（多個target）處理：只要#號后的名稱與id=""中的名稱對應即可實現(xiàn)目標跳轉(zhuǎn)姿染。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>結(jié)構(gòu)性偽類選擇器—target</title>
    <style type="text/css">
    /*這里的:target就是指id="brand"的div對象，
    當有多個target時秒际，隨著鼠標的點擊會自動跳轉(zhuǎn)并顯示對應的元素*/
    #brand:target p {
        background: orange;
        color: #fff;
    }
    #jake:target {
        background: blue;
        color: #fff;
    }
    #aron:target {
        background: red;
        color: #fff;
    }
    a {
        /*去掉鏈接下劃線*/
        text-decoration: none;
    }
    </style>
</head>
<body>
    <div class="menuSection" id="brand">
        <h2><a href="#brand">Brand1</a></h2>
        <p>content for Brand</p>
    </div>
    <h2><a href="#jake">Brand2</a></h2>
    <div class="menuSection" id="jake">
        content for jake
    </div>
    <h2><a href="#aron">Brand3</a></h2>
    <div class="menuSection" id="aron">
        content for aron
    </div>
</body>
</html>
設置目標選擇器
  • :first-child選擇器：表示選擇父元素的第一個子元素的元素E悬赏。注意：是子元素，而不是后代元素娄徊。
  • >：表示子代選擇器闽颇。空格：表示后代選擇器。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>結(jié)構(gòu)性偽類選擇器—first-child</title>
    <style type="text/css">
    /*通過:first-child選擇器定位列表中的第一個列表項寄锐，并將序列號顏色變?yōu)榧t色兵多。*/
    .test1>li:first-child {
        color: red;
    }
    /*
    '>'：表示子代選擇器
    將ul標簽中所有l(wèi)i標簽的項目號顏色改為黃色*/
    .test2>li {
        color: yellow;
    }
    </style>
</head>
<body>
    <!-- 無序列表 -->
    <ul class="test1">
        <li><a href="##">Link1</a></li>
        <li><a href="##">Link2</a></li>
        <li><a href="##">Link3</a></li>
        <li><a href="##">Link4</a></li>
        <li><a href="##">Link5</a></li>
    </ul >
        <ul class="test2">
        <li><a href="##">Linka</a></li>
        <li><a href="##">Linkb</a></li>
        <li><a href="##">Linkc</a></li>
        <li><a href="##">Linkd</a></li>
        <li><a href="##">Linke</a></li>
    </ul>
</body>
</html>
設置父元素ul的第一個子元素的元素樣式
  • :last-child選擇器：表示的是選擇父元素的最后一個子元素的元素E尖啡。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>結(jié)構(gòu)偽類選擇器——last-child</title>
    <style type="text/css">
    ul {
        border: 1px solid #ffc107;
        /*去除項目列表樣式*/
        list-style: none outside none;
        width: 220px;
        margin: 20px auto;
        padding: 0;
    }
    ul>li {
        list-style: none outside none;
        margin: 0;
        padding: 10px;
        border-bottom: 3px solid #f44336;
    }
    /*刪除列表中最后一個列表項的底部邊框*/
    ul>li:last-child {
        border-bottom: none;
    }
    </style>
</head>
<body>
    <ul>
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
        <li>Item5</li>
        <li>Item6</li>
    </ul>
</body>
</html>
刪除列表中最后一個列表項的底部邊框
  • :nth-child(n)選擇器：用來定位某個父元素的一個或多個特定的子元素。其中n是其參數(shù)剩膘，而且可以是整數(shù)值(1,2,3,4)衅斩、表達式(2n+1、-n+5)或關(guān)鍵詞(odd怠褐、even)畏梆，但參數(shù)n的起始值始終是1，而不是0奈懒。當參數(shù)n=0時奠涌，選擇器將選擇不到任何匹配的元素！當n為一個表達式時筐赔，其中n是從0開始計算铣猩，當表達式的值為0或小于0的時候揖铜，不選擇任何匹配的元素茴丰。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>結(jié)構(gòu)性偽類選擇器—nth-child(n)</title>
    <style type="text/css">
    ol>li:nth-child(2n+1) {
        background: orange;
    }
    </style>
</head>
<body>
    <!-- 有序列表 -->
    <ol>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
        <li>item9</li>
        <li>item10</li>
    </ol>
</body>
</html>
設置父元素的多個子元素樣式
  • :nth-last-child(n)選擇器：從某父元素的最后一個子元素開始計算，來選擇特定的元素天吓。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>結(jié)構(gòu)性偽類選擇器—nth-last-child(n)</title>
    <style type="text/css">
    /*選擇列表中倒數(shù)第五個列表項贿肩，將其背景設置為橙色。*/
    ol>li:nth-last-child(5) {
        background: orange;
    }
    </style>
</head>
<body>
    <ol>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
        <li>item9</li>
        <li>item10</li>
    </ol>
</body>
</html>
設置父元素倒數(shù)第5個子元素的樣式
  • :first-of-type選擇器：用來定位一個父元素下的某個相同類型的第一個子元素龄寞。其與:first-child的不同之處在于后者匹配的是某個父元素的第一個子元素汰规，是結(jié)構(gòu)上的第一個子元素！
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>練習:first-of-type</title>
    <style type="text/css">
    .wrapper {
        width: 500px;
        margin: 20px auto;
        padding: 10px;
        border: 1px solid #ccc;
        color: #fff;
    }
    .wrapper>div {
        background: green;
    }
    .wrapper>p {
        background: blue;
    }
    /*改變第一個段落p標簽的背景顏色為橙色*/
    .wrapper>p:first-of-type {
        background: orange;
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <div>我是一個塊元素物邑，我是.wrapper的第一個子元素</div>
        <p>我是一個段落元素溜哮，我是不是.wrapper的第一個子元素，但是他的第一個段落元素</p>
        <p>我是一個段落元素</p>
        <div>我是一個塊元素</div>
    </div>
</body>
</html>
設置父元素div下的p標簽元素的第一個子元素的樣式
  • :nth-of-type(n)選擇器：只計算父元素中指定的某種類型的子元素色解。在:nth-of-type(n)選擇器中的n與:nth-child(n)選擇器中的n參數(shù)一樣茂嗓，可以是整數(shù)、表達式科阎、關(guān)鍵詞述吸。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>練習:nth-of-type()</title>
    <style type="text/css">
    /*通過:nth-of-type(2n)選擇器，將容器"div.wrapper"中偶數(shù)段數(shù)p標簽的背景顏色設置為橙色锣笨。*/
    .wrapper>p:nth-of-type(2n) {
        background: orange;
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <div>我是一個Div元素</div>
        <p>我是一個段落元素</p>
        <div>我是一個Div元素</div>
        <p>我是一個段落</p>
        <div>我是一個Div元素</div>
        <p>我是一個段落</p>
        <div>我是一個Div元素</div>
        <p>我是一個段落</p>
        <div>我是一個Div元素</div>
        <p>我是一個段落</p>
        <div>我是一個Div元素</div>
        <p>我是一個段落</p>
        <div>我是一個Div元素</div>
        <p>我是一個段落</p>
        <div>我是一個Div元素</div>
        <p>我是一個段落</p>
    </div>
</body>
</html>
設置父元素.wrapper下偶次序p標簽的樣式
  • :last-of-type選擇器：選擇父元素下的某個相同類型的最后一個子元素蝌矛。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>屬性選擇器</title>
    <style type="text/css">
    .wrapper>p:last-of-type {
        background: orange;
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <p>我是第一個段落</p>
        <p>我是第二個段落</p>
        <p>我是第三個段落</p>
        <div>我是第一個Div元素</div>
        <div>我是第二個Div元素</div>
        <div>我是第三個Div元素</div>
    </div>
</body>
</html>
設置父元素.wrapper下p標簽的最后一個子元素的樣式
  • :nth-last-of-type(n)選擇器：從最后一個子元素開始選擇父元素中指定某個相同類型的子元素。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>nth-last-of-type(n)</title>
    <style type="text/css">
    .wrapper>p:nth-last-of-type(3) {
        background: orange;
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <p>我是第一個段落</p>
        <p>我是第二個段落</p>
        <p>我是第三個段落</p>
        <p>我是第四個段落</p>
        <p>我是第五個段落</p>
        <div>我是一個Div元素</div>
        <p>我是第六個段落</p>
        <p>我是第七個段落</p>
    </div>
</body>
</html>
設置父元素下倒數(shù)第三個p標簽的樣式
  • :only-child選擇器：表示選擇匹配元素的父元素中僅有一個子元素错英，且是一個唯一的子元素入撒。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>屬性選擇器</title>
    <style type="text/css">
    li {
        background: green;
        padding: 10px;
        margin-bottom: 5px;
    }
    li:only-child {
        background: orange;
    }
    </style>
</head>
<body>
    <ul>
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
    </ul>
    <ul>
        <li>Item1</li>
    </ul>
    <ol>
        <li>Item1</li>
    </ol>
    <ol>
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
    </ol>
</body>
</html>
選擇僅有一個子元素的父元素下的子元素
  • :only-of-type選擇器：選擇父元素下唯一一個相同類型的子元素。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>屬性選擇器</title>
    <style type="text/css">
    .wrapper {
        border: 1px solid #ccc;
        padding: 10px;
        width: 500px;
        margin: 10px auto;
    }
    .wrapper p:only-of-type {
        background: orange;
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <p>我是一個段落</p>
        <p>我是一個段落</p>
        <p>我是一個段落</p>
    </div>
    <div class="wrapper">
        <p>我是一個段落</p>
    </div>
    <div class="wrapper">
        <div>我是一個Div元素</div>
        <p>我是一個段落</p>
        <div>我是一個Div元素</div>
    </div>
</body>
</html>
設置父元素.wrapper下僅有一個p標簽的元素樣式
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末椭岩，一起剝皮案震驚了整個濱河市茅逮，隨后出現(xiàn)的幾起案子噪伊，更是在濱河造成了極大的恐慌，老刑警劉巖氮唯，帶你破解...
    沈念sama閱讀 212,718評論 6贊 492
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件鉴吹，死亡現(xiàn)場離奇詭異，居然都是意外死亡惩琉，警方通過查閱死者的電腦和手機豆励，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,683評論 3贊 385
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來瞒渠，“玉大人良蒸，你說我怎么就攤上這事∥榫粒” “怎么了嫩痰？”我有些...
    開封第一講書人閱讀 158,207評論 0贊 348
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長窍箍。 經(jīng)常有香客問我串纺，道長，這世上最難降的妖魔是什么椰棘？ 我笑而不...
    開封第一講書人閱讀 56,755評論 1贊 284
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任纺棺，我火速辦了婚禮，結(jié)果婚禮上邪狞，老公的妹妹穿的比我還像新娘祷蝌。我一直安慰自己，他們只是感情好帆卓，可當我...
    茶點故事閱讀 65,862評論 6贊 386
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布巨朦。 她就那樣靜靜地躺著，像睡著了一般剑令。 火紅的嫁衣襯著肌膚如雪糊啡。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 50,050評論 1贊 291
  • 城市分裂傳說
    那天尚洽，我揣著相機與錄音悔橄，去河邊找鬼。 笑死腺毫，一個胖子當著我的面吹牛癣疟，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播潮酒，決...
    沈念sama閱讀 39,136評論 3贊 410
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼睛挚，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了急黎？” 一聲冷哼從身側(cè)響起扎狱，我...
    開封第一講書人閱讀 37,882評論 0贊 268
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤侧到，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后淤击，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體匠抗，經(jīng)...
    沈念sama閱讀 44,330評論 1贊 303
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,651評論 2贊 327
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年污抬，在試婚紗的時候發(fā)現(xiàn)自己被綠了汞贸。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,789評論 1贊 341
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡印机，死狀恐怖矢腻，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情射赛，我是刑警寧澤多柑，帶...
    沈念sama閱讀 34,477評論 4贊 333
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站楣责，受9級特大地震影響竣灌，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜腐魂，卻給世界環(huán)境...
    茶點故事閱讀 40,135評論 3贊 317
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一帐偎、第九天 我趴在偏房一處隱蔽的房頂上張望逐纬。 院中可真熱鬧蛔屹，春花似錦、人聲如沸豁生。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,864評論 0贊 21
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽甸箱。三九已至育叁，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間芍殖，已是汗流浹背豪嗽。 一陣腳步聲響...
    開封第一講書人閱讀 32,099評論 1贊 267
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留豌骏，地道東北人龟梦。 一個月前我還...
    沈念sama閱讀 46,598評論 2贊 362
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像窃躲，于是被迫代替她去往敵國和親计贰。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 43,697評論 2贊 351

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

  • CSS參考手冊 一蒂窒、初識CSS3 1.1 CSS是什么 CSS3在CSS2.1的基礎(chǔ)上增加了很多強大的新功能躁倒。目前...
    沒汁帥閱讀 3,564評論 1贊 13
  • 初始CSS3 什么是CSS3荞怒？ CSS3是CSS2的升級版本，3只是版本號秧秉，它在CSS2.1的基礎(chǔ)上增加了很多強大...
    llt00閱讀 428評論 0贊 0
  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁的形式展示給用戶的褐桌，因此網(wǎng)頁是網(wǎng)絡信息傳遞的載體。網(wǎng)頁文件是用...
    阿啊阿吖丁閱讀 3,875評論 0贊 0
  • （1）. 陰影模糊半徑與陰影擴展半徑的區(qū)別：陰影模糊半徑：此參數(shù)可選拇舀，其值只能是為正值逻族，如果其值為0時，表示陰影不...
    Leisure_blogs閱讀 1,481評論 0贊 6
  • 關(guān)注我的個人博客:https://pinbolei.cn骄崩，獲取更多內(nèi)容 1聘鳞、CSS3的概念和優(yōu)勢 A、CSS3的概...
    pinbolei閱讀 790評論 0贊 3