1.4.2選擇器

1.4.2.1簡單選擇器

選擇器

h1{color: red;}
.m-nav{height: 70px;font-size: 14px;}
  • 簡單選擇器
  • 偽元素選擇器
  • 組合選擇器

標簽選擇器

<div>
    <p>段落一</p>
    <p class="special">段落二</p>
    <p class="special stress">段落三</p>
</div>

p{color: blue;}
.specisl{color: red;}
.stress{font-size: bold;}

類選擇器

.classname
-.
-字母，數字，-，_
-className必須以字母開頭
-區分大小寫
-出現多次

id選擇器

<div id="banner">
    banner
</div>
<div>
    content
</div>

div{color: gray;}
#banner{color: black;}
  • ＃id
    -#
    -字母，數字，-，_
    -id必須以字母開頭
    -區分大小寫
    -只出現一次

通配符選擇器

*{color:blue;}

屬性選擇器-[att]

form action="">
    <div>
        <input disabled type="text" value="張三">
    </div>
    <div>
        <inpt type="password" placeholder="密碼">
    </div>
</form>

[disabled]{bsdkground-color:#ee;}
灰色背景運用上去

屬性選擇器-[att=val]

<form action="">
    <input type="text" value="文本框">
    <input type="button" value="按鈕"
</form>

[type=button]{color:blue;}

屬性選擇器-[att~=val]

<h2 class="title sports"></h2>
<p class="sports">內容…</p>

[class~=sports]{color:blue;}

屬性選擇器-[att|=val]

<p lang="en">hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="enfr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

[ang|=en]{color:red;}

屬性選擇器-[att^=val]

<div>
    <a href="http:www.w3.org/">W3C</a>
    <a href="#html">HTML</a>
    <a href="#css">CSS</a>
</div>

[href^="#"]{color:red}注意包含符號時用引號引起來

屬性選擇器-[att$=val]

<a >word文檔.doc</a>
<a >pdf文件.pdf</a>

[href$=pdf]{color:red;}以什么結尾

屬性選擇器-[att*=val]

<a >女星奧斯卡…</a>
<a >范瑋琪產后…</a>
<a >曝李楠有望…</a>
<a >皇馬1億…</a>

[href*="lady.163.com"]{color:pink;}href里包含……

偽類選擇器

<a >網易首頁</a>

a:link{color:gray;}
以冒號開頭，link表示連接，選中頁面中所有的連接，使字體顏色變灰色。
href里有值的a標簽
a:visited{color:red;}
訪問過以后變紅
a:hover{color:green}
鼠標以上去顯示綠色
a:active{color:orange}
用戶鼠標點擊上去的表示
link visited只用于連接屬性，剩下兩個都可以
定義四種狀態的屬性，書寫方式如上，link visited hover active

偽類選擇器

  • :enabled
    -input:enabled{color:#ccc}
    元素可用的狀態
  • :disabled
    -input:disabled{color:#ddd}
    元素不可用狀態
  • :checdked
    -input:checked{#red}

偽類選擇器

<ul>
    <li>一</li>
    <li>二</li>
    <li>三</li>
    <li>四</li>
    <li>五</li>
    <li>六</li>
</ul>

li:frist-child{color:red}第一行變紅
li:last-child{color:red}最后一行變紅
li:nth-chid(even){color:red}偶數項變紅
li:nth-chid(3n+1){color:red}第一行，第四行變紅
li:nth-last-chid(3n+1){color:red}第三行，第六行變紅

<ul>
    <li>一</li>
</ul>
<ul>
    <li>一</li>
    <li>二</li>
</ul>

兩個列表，第一個有一個元素，，第二個有兩個元素
假設選中只有一個元素的第一個列表
:only-child{color:red;}

<dl>
    <dt>作者：</dt>
    <dd>Dave Shea</dd>
    <dd>Molly E.Holzschlag</dd>
    <dt>出版社：</dt>
    <dd>人民郵電出版社</dd>
</dl>

使第一個dd標簽的內容變為紅色
dd:first-of-type{color:red}
使最后一個dt標簽內容變為紅色
dt:last-of-type{color:red}
第偶數個dd元素為紅色
dd:nth-of-type(even){color:red}
倒數偶數項dt
dt:nth-last-of-type(2n){color:red}

<p><span>CSS</span>和<span>HTML</span>是頁面制作的基礎。</p>
<p><span>CSS</span>主要是用于定義<em>HTML</em>內容在瀏覽器內的顯示樣式</p>

選中只用某一種類型的元素，選中第二段里的CSS元素，改變他的樣式
span:only-of-type{color:red;}
不能用 only-of-child因為span元素不是p唯一的屬性，它還有em屬性

不常用的選擇器

  • :empty
    <p></p>選中頁面中沒有子元素的元素
  • :root
    選中html根標簽
  • :not()
  • :target
  • :lang()

簡單選擇器

  • tag{} 標簽選擇器
  • .className{} 類選擇器
  • ＃id{} id選擇器
  • *{} 通配符選擇器
  • [att]{} 屬性選擇器
  • :link{} 偽類選擇器
    簡單選擇器可以組合
    img[src$=jpg]{}
    也是簡單選擇器，img標簽src值是以jpg結尾的

banner:hover{}

選中id為banner元素的hover狀態

1.4.2.2其他選擇器

偽元素選擇器

  • 段落第一個字母變紅
    ::first-letter{color:red;}
    -兩個冒號，區別于偽類選擇器
  • 選中第一行變為紅色
    ::first-line{color:red;}
  • 給內容的前面和后面加一些輔助的內容
    ::before{content:"before"}
    ::after{content:"after;}
    與content屬性一起用。
  • 選中被用戶選中內容的樣式
::selection{
    color:red;
    background-color:#ccc;
}

當我們選中文字時，字體變為紅色，背景變為灰色

組合選擇器

  • 后代選擇器
  • 子選擇器
  • 兄弟選擇器
<div class="main">
    <h2>標題一</h2>
    <div>
        <h2>標題二</h2>
        <p>段落一</p>
    </div>
</div>

.main h2{color:red;}
兩個h2都為紅色
子選擇器
.main>h2{color:red;}
將中間的空格替換為大于號，第一個h2標題變紅

<div>
    <h2>標題</h2> 
    <p>段落一</p>
    <p>段落二</p>
</div>

兄弟選擇器
h2+p{color:red;}
p標簽直接的前面是h2，這樣選中的是段落一，不會選中段落二
h2~p{color:red;}
選中的是兩個p標簽，即段落一與二，表示p標簽前面有一個h2不用近鄰

選擇器分組

h1{color: gray;font-family: sans-serif;}
h2{color: gray;font-family: sans-serif;}
h3{color: gray;font-family: sans-serif;}

以上可以簡化為
h1,h2,h3,{color: gray;font-family: sans-serif;}
之間用逗號隔開，將統一的樣式寫下

1.4.2.3繼承，優先級，層疊

使頁面中所有的字體為微軟雅黑？

…
<body>
    <div>頁面頭部</div>
        <div>
            <h2>標題</h2>
            <p>內容</p>
            …
        </div>
    <div>頁面尾部</div>
</body>
…

body{font-family:"Microsoft Yahei";}

繼承

  • -color
  • -font
  • -text-align
  • -list-style
  • …
<div>
    <h2>標題一</h2>
    <p>段落一</p>
</div>

div{color:red;}
div 里所有屬性變為紅色

非繼承屬性

  • -background
  • -border
  • -position
  • …
    同樣上例中，給div一個border屬性，border屬性不會被自動繼承
    div{border:1px solid #ccc;}
    文檔上描述屬性詳情的時候，有inherited表示屬性是否可以繼承。

CSS優先級

  • 計算方法
    -a 行內樣式
    -b ID選擇器的數量
    -c 類，偽類和屬性選擇器的數量
    -d 標簽選擇器和偽元素選擇器的數量
    權重
    value=a1000+b100+c*10+d
    h1=1
    p>em=2
    style:""=1000
    .comment p=11
    div#content=101
    a:link=11
    優先級高的樣式，覆蓋優先級低的樣式

CSS層疊

  • 相同的屬性會覆蓋
    -優先級高覆蓋低
    -后面覆蓋前面
  • 不同的屬性會合并
<div>
    <p class="special">css層疊…</p>
</div>

p{
    color: blue;
    text-align: left ;
    font-weight: bold;
}
p.special{
    color: red;
    text-align: right;
}
p:first-child{color:green;}

最后字體為：綠色，有對齊，加粗

CSS改變優先級

  • 改變先后順序
  • 提升選擇器優先級
  • ! important

改變先后順序

改變位置，上下選擇器互換位置

提升選擇器的優先級

例如加一個標簽選擇器

! important

.tip{
    color: blue !important;
}
p.special{
    color: red;
}

!important是在前面兩種方法都不可行的情況下使用的。

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 選擇器 元素選擇符 關系選擇符 屬性選擇符 偽類選擇符 偽對象選擇符 一、元素選擇符 通配選擇符 (*):選擇所有...
    云外之境閱讀 1,892評論 0贊 0
  • 1.CSS簡介 Cascading Style Sheet 層疊樣式表 主要用來定義頁面中的表現，HTML 描述頁...
    hyt222閱讀 854評論 0贊 0
  • 1.CSS 元素選擇器 最常見的 CSS 選擇器是元素選擇器。換句話說，文檔的元素就是最基本的選擇器。如果設置 H...
    饑人谷_小侯閱讀 878評論 0贊 1
  • 作為前端和后臺最基礎可靠的神器工具JQuery，你真的對她有足夠了解么？ 亞非拉地區苦逼的前端er們，有時候不得不...
    扭了個妞閱讀 384評論 0贊 0
  • 插入樣式的三種方法 內聯樣式表（行內） 內部樣式表（style中） 外部樣式表創建一個外部樣式表在head中使用l...
    Zd_silent閱讀 267評論 0贊 0