CSS 樣式的使用方式、選擇器

發(fā)布時(shí)間：2019-08-12 09:17:08 作者：佚名

這篇文章主要介紹了CSS 樣式的使用方式、選擇器的相關(guān)資料,需要的朋友可以參考下

在html中使用css的三種方式：

1、行內(nèi)樣式：同過(guò)元素的style屬性來(lái)設(shè)置

<p style="font-size:20px; color:red">hello</p>

屬性之間分號(hào)隔開(kāi)。

2、內(nèi)部樣式：在<head>的<style>元素中定義css樣式

<style>
    p{font-size: 20px;color: red}    
</style>

3、外部樣式：在css文件中定義css樣式，然后在html的<head>中通過(guò)<style>引入外部樣式表

p{font-size: 20px;color: red}
<link href="xxx.css" type="text/css" rel="stylesheet" />

css文件中不加<style>標(biāo)簽，直接寫(xiě)css樣式就ok。

內(nèi)部|外部樣式的語(yǔ)法：選擇器 {屬性名1：屬性值1; 屬性名2：屬性值2}

三種方式，屬性之間都是分號(hào)隔開(kāi)。

css注釋：

/* 注釋 */

css選擇器

1、元素選擇器、類選擇器、id選擇器

p{color: red}  /* 元素選擇器，給所有p元素設(shè)置樣式*/
.red{color: red}  /* 類選擇器，在元素中通過(guò)class="red"引用 */
#user{color: red}  /* id選擇器，在元素中通過(guò)id="user"引用，最多只能使用1次 */

2、通用選擇器、分組選擇器

*{color: red}  /*通用選擇器，給所有元素設(shè)置樣式 */
h1,.red{color: red}  /*分組選擇器，同時(shí)給多個(gè)選擇器設(shè)置相同的樣式 */

3、后代選擇器、子選擇器、相鄰兄弟選擇器、后續(xù)兄弟選擇器

div p{color: red}  /*后代選擇器，選擇<div>中所有的<p>元素，不管<p>是<div>的兒子、孫子、重孫......只要<p>是<div>的后代就行*/
div>p{color:red}  /*子選擇器，選擇的是<p>，<p>必須是<div>的兒子*/
div+p{color:red}  /*相鄰兄弟選擇器，選擇的是<p>，<p>必須是<div>后面的第一個(gè)兄弟元素 */
div~p{color:red}  /*后續(xù)兄弟選擇器，選擇<div>后面所有的<p>，<p>必須是<div>的兄弟元素 */

4、屬性選擇器

[attr]  /*含有attr屬性*/
[attr=value]  /*有attr屬性，且屬性值為value*/
[attr^=value]  /*有attr屬性，且屬性值以value開(kāi)頭(只要value是開(kāi)頭就ok*/
[attr|=value]  /*有attr屬性，且屬性值以value開(kāi)頭、value和后面部分以-連接 */
[attr$=value]  /*有attr屬性，且屬性值以value結(jié)尾*/
[attr*=value]  /*有attr屬性，且屬性值中含有value（含有就ok）*/
[attr~=value]  /*有attr屬性，且屬性值中含有單詞value，value要是一個(gè)完整的單詞（和其它單詞以空格隔開(kāi)）*/

屬性選擇器常和其它選擇器一起使用，比如:

button[type="button"]  /*選擇所有type="button"的<button> */

屬性選擇器中，attr不能加引號(hào)，value可引可不引。

5、<a>鏈接

a:link   /*所有未訪問(wèn)過(guò)的<a>*元素/
a:hover  /*鼠標(biāo)移到<a>元素上*/
a:active  /*點(diǎn)擊<a>時(shí)*/
a:visited  /*所有訪問(wèn)過(guò)的<a>*/

這4個(gè)設(shè)置的是<a>元素不同時(shí)期的樣式。

:hover這個(gè)偽類所有元素都可以使用。

6、表單元素

:focus   /*聚焦時(shí)*/
:checked   /*選中時(shí)*/
:enabled   /*可用的*/
:disabled  /*禁用的*/
:read-only  /*只讀*/

可單獨(dú)使用，也可配合表單元素使用：

:focus{  }
input:focus{  }

7、空元素

:empty{  }   /*所有的空元素*/
p:empty{  }  /*所有空的<p>元素*/

空元素指的是沒(méi)有任何屬性、沒(méi)有內(nèi)容的元素，示例：<p></p>。

8、非

:not(p) /*選擇不是<p>的所有元素*/

()中盡量只使用元素選擇器，使用其他選擇器容易出錯(cuò)。

9、type系列

p:first-of-type  /*同級(jí)別中的第一個(gè)<p>*/
p:nth-of-type(n)   /*同級(jí)別中的第n個(gè)<p>*/
p:nth-last-of-type(n)   /*同級(jí)別中的倒數(shù)第n個(gè)<p>*/
p:last-of-type   /*同級(jí)別中的最后一個(gè)<p>*/
p:only-of-type   /*同級(jí)別中唯一的一個(gè)<p>*/

示例：

p:first-of-type{color:red}

<body>
    <h1></h1>
    <p></p>   <!--選中-->
    <p></p>
    <div>
        <h2></h2>
        <p></p>  <!--選中-->
        <p></p>
    </div>
</body>

只要是同級(jí)別的<p>中的第一個(gè)即可。

10、child系列

p:first-child   /*匹配的是<p>，<p>要是其父元素的第一個(gè)子元素*/
p:nth-child(n)  /*匹配的是<p>，<p>要是其父元素的第n個(gè)子元素*/
p:nth-last-child(n)  /*匹配的是<p>，<p>要是其父元素的倒數(shù)第n個(gè)子元素*/
p:last-child  /*匹配的是<p>，<p>要是其父元素的最后一個(gè)子元素*/
p:only-child  /*匹配的是<p>，<p>要是其父元素的唯一一個(gè)子元素*/

示例：

p:first-child{color:red}

<body>
    <h1></h1>
    <p></p>   
    <p></p>
    <div>
        <p></p>  <!--選中-->
        <p></p>
    </div>
</body>

11、首字、首行

p:first-letter /*<p>元素的第一個(gè)字符*/
p:first-line /*<p>元素的第一行*/

12、:before :after

p:before{   /*在<p>的前面添加內(nèi)容*/
    content:"hello "
}
p:after{   /*在<p>的后面添加內(nèi)容*/
    content:" byebye"
}

添加的內(nèi)容默認(rèn)是行內(nèi)元素，但會(huì)和<p>在同一行顯示（相當(dāng)于把添加的內(nèi)容放到<p>元素內(nèi)的最前|后面），添加的并不是一個(gè)真正的元素，所以叫做偽元素。

可以設(shè)置為塊級(jí)，添加的內(nèi)容會(huì)作為塊級(jí)元素顯示：

p:before{   /*在<p>的前面添加內(nèi)容*/
    content:"hello ";
    display: block
}
p:after{   /*在<p>的后面添加內(nèi)容*/
    content:" byebye";
    display: block
}

可以給添加的元素設(shè)置樣式：

p:before{   
    content:"hello ";   /* 屬性之間分號(hào)分隔 */
    display: block;   /*給添加的內(nèi)容設(shè)置樣式*/
    font-size: 20px;
    color:red
}

添加圖片：

p:before{   
    content:"";   /* content屬性是必需的，不添加文本時(shí)可以設(shè)置為空串 */
    display: block;  /*必須要設(shè)置為塊級(jí)，要設(shè)置寬、高，添加的背景圖片才能顯示出來(lái)*/
    width: 100px;
    height: 100px
    background-image: url("1.png");
}

清除浮動(dòng)：

p:before{   
    content:"";   
    clear: both
}

偽元素可以使用單冒號(hào)，也可以使用雙冒號(hào)。

:before   <=>   ::before
:after  <=>  ::after

帶冒號(hào)的選擇器中，有4個(gè)偽元素:first-letter、:first-line、:before、:after，其余都是偽類。

選擇器可以搭配使用。

在同種方式中（都是內(nèi)部|外部樣式），優(yōu)先級(jí)id選擇器最高，類選擇器次之，屬性選擇器最低。（定位越具體、詳細(xì)的，優(yōu)先級(jí)越高）

如果使用了相同的css屬性，優(yōu)先級(jí)行內(nèi)最高，內(nèi)部、外部?jī)?yōu)先級(jí)相同，看<head>中<link />、<style>的順序，后面的優(yōu)先級(jí)更高（后渲染的樣式會(huì)覆蓋之前的樣式）。

總結(jié)

以上所述是小編給大家介紹的CSS 樣式的使用方式、選擇器 ,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！