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

  發布時間:2019-08-12 09:17:08   作者:佚名   我要評論

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

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

1、行內樣式:同過元素的style屬性來設置

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

屬性之間分號隔開。

2、內部樣式:在<head>的<style>元素中定義css樣式

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

3、外部樣式:在css文件中定義css樣式,然后在html的<head>中通過<style>引入外部樣式表

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

css文件中不加<style>標簽,直接寫css樣式就ok。

內部|外部樣式的語法: 選擇器 {屬性名1:屬性值1; 屬性名2:屬性值2}

三種方式,屬性之間都是分號隔開。

css注釋:

/*  注釋  */

css選擇器

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

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

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

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

3、后代選擇器、子選擇器、相鄰兄弟選擇器、后續兄弟選擇器

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

4、屬性選擇器

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

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

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

屬性選擇器中,attr不能加引號,value可引可不引。

5、<a>鏈接

a:link   /*所有未訪問過的<a>*元素/
a:hover  /*鼠標移到<a>元素上*/
a:active  /*點擊<a>時*/
a:visited  /*所有訪問過的<a>*/

這4個設置的是<a>元素不同時期的樣式。

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

6、表單元素

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

可單獨使用,也可配合表單元素使用:

:focus{  }
input:focus{  }

7、空元素

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

空元素指的是沒有任何屬性、沒有內容的元素,示例:<p></p>。

8、非

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

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

9、type系列

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

示例:

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

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

只要是同級別的<p>中的第一個即可。

10、child系列

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

示例:

p:first-child{color:red}

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

 

11、首字、首行

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

12、:before    :after

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

添加的內容默認是行內元素,但會和<p>在同一行顯示(相當于把添加的內容放到<p>元素內的最前|后面),添加的并不是一個真正的元素,所以叫做偽元素。

可以設置為塊級,添加的內容會作為塊級元素顯示:

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

可以給添加的元素設置樣式:

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

添加圖片:

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

清除浮動:

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

偽元素可以使用單冒號,也可以使用雙冒號。

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

帶冒號的選擇器中,有4個偽元素:first-letter、:first-line、:before、:after,其余都是偽類。

選擇器可以搭配使用。

在同種方式中(都是內部|外部樣式),優先級id選擇器最高,類選擇器次之,屬性選擇器最低。(定位越具體、詳細的,優先級越高)
 

如果使用了相同的css屬性,優先級行內最高,內部、外部優先級相同,看<head>中<link />、<style>的順序,后面的優先級更高(后渲染的樣式會覆蓋之前的樣式)。
 

總結

以上所述是小編給大家介紹的CSS 樣式的使用方式、選擇器 ,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!

相關文章

最新評論

2019开奖结果