在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 樣式的使用方式、選擇器 ,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
