CSS 樣式的使用方式、選擇器
我要評論在html中使用css的三種方式：
1、行內(nèi)樣式：同過元素的style屬性來設置
<p style="font-size:20px; color:red">hello</p>
屬性之間分號隔開。
2、內(nèi)部樣式：在<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。
內(nèi)部|外部樣式的語法： 選擇器 {屬性名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、后代選擇器、子選擇器、相鄰兄弟選擇器、后續(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>后面的第一個兄弟元素 */
div~p{color:red} /*后續(xù)兄弟選擇器，選擇<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>元素*/
空元素指的是沒有任何屬性、沒有內(nèi)容的元素，示例：<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) /*同級別中的倒數(shù)第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>要是其父元素的倒數(shù)第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>的前面添加內(nèi)容*/
content:"hello "
}
p:after{ /*在<p>的后面添加內(nèi)容*/
content:" byebye"
}
添加的內(nèi)容默認是行內(nèi)元素，但會和<p>在同一行顯示（相當于把添加的內(nèi)容放到<p>元素內(nèi)的最前|后面），添加的并不是一個真正的元素，所以叫做偽元素。
可以設置為塊級，添加的內(nèi)容會作為塊級元素顯示：
p:before{ /*在<p>的前面添加內(nèi)容*/
content:"hello ";
display: block
}
p:after{ /*在<p>的后面添加內(nèi)容*/
content:" byebye";
display: block
}
可以給添加的元素設置樣式：
p:before{
content:"hello "; /* 屬性之間分號分隔 */
display: block; /*給添加的內(nèi)容設置樣式*/
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，其余都是偽類。
選擇器可以搭配使用。
在同種方式中（都是內(nèi)部|外部樣式），優(yōu)先級id選擇器最高，類選擇器次之，屬性選擇器最低。（定位越具體、詳細的，優(yōu)先級越高）
如果使用了相同的css屬性，優(yōu)先級行內(nèi)最高，內(nèi)部、外部優(yōu)先級相同，看<head>中<link />、<style>的順序，后面的優(yōu)先級更高（后渲染的樣式會覆蓋之前的樣式）。
總結
以上所述是小編給大家介紹的CSS 樣式的使用方式、選擇器 ,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
這篇文章主要介紹了css3的focus-within選擇器的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習2020-05-11
這篇文章主要介紹了CSS選擇器中的正則表達式使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學2020-03-11
這篇文章主要介紹了巧用CSS屬性值正則匹配選擇器,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習2020-03-11- 這篇文章主要介紹了css選擇器四大類：基本、組合、屬性、偽類的相關知識，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-14
- 這篇文章主要介紹了css復雜選擇器及css字體樣式、顏色屬性，復雜選擇有三種，每種方法通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2020-01-19
這篇文章主要介紹了詳解如何使用CSS3中的結構偽類選擇器和偽元素選擇器，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面2020-01-06- 這篇文章主要介紹了CSS3 新增選擇器的實例,需要的朋友可以參考下2019-11-13
如果說 css 作為前端開發(fā)的基本功, 那么 "選擇器" 就是基礎中的基礎，本文介紹了css3 偽類選擇器快速復習，文中通過示例代碼介紹的非常詳細，對大家的學習或者工2019-09-10
CSS 選擇器在實踐中是非常常用的，無論是在寫樣式上或是在 JS 中選擇 DOM 元素都需要用到。在 CSS Selectors Level 4 中，工作組繼續(xù)為選擇器標準添加了更豐富的選擇器。需2018-12-24
這篇文章主要介紹了CSS 中的六個重要選擇器(三秒就可以記住),本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-27
