CSS選擇器、CSS屬性
未央ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！
style寫在head中間，type="text/css"可以不用寫，默認就是這個。
規(guī)定文字樣式、粗細、大小、字體的屬性
1、字體不存在用戶電腦上時：
不處理時，使用用戶電腦系統(tǒng)默認字體
處理：font-family:“不存在的字體”,"備選字體"；--設(shè)置備選字體，可設(shè)置多個備選字體
2、一串字符串既有中文，又有英文時，如何設(shè)置兩種字體
英文字體是中文字體的子集。【意思是：英文字體不能處理中文，中文字體可以處理英文】
文本裝飾、文本對齊，文本縮進的屬性
文本裝飾-文字的下劃線，中劃線等
文本對齊：
文本縮進：
格式：
p{
font:20px,"楷體"
}
標簽選擇器選中的是頁面中所有的該標簽
作用：根據(jù)指定的id名稱找到對應(yīng)的標簽，然后設(shè)置屬性。（標簽選擇器選中的是全部的同類標簽）
第一步：給需要設(shè)置的標簽設(shè)置id，
第二步：
注意：
1、id在同一頁面是唯一的
2、id名是有規(guī)范的，只能是字母，數(shù)字和下劃線，不能使用數(shù)字開頭，不能使用HTML的標簽名
3、如果僅僅是為了設(shè)置樣式，不需要使用id，而是使用類選擇器，id是留給js使用的。
根據(jù)指定的類名稱找到對應(yīng)的標簽，然后設(shè)置屬性
第一步：給需要設(shè)置的標簽設(shè)置className，
第二步：
注意：
1、className是可以重復(fù)的
2、className名是有規(guī)范的，只能是字母，數(shù)字和下劃線，不能使用數(shù)字開頭，不能使用標簽名
3、如果僅僅是為了設(shè)置樣式，不需要使用id，而是使用類選擇器，id是留給js使用的。
4、同一個HTML變遷可以有多個classname
1、id使用“,”class使用#
2、class相當于人名，所以同一個頁面上的HTML標簽可以有一樣的className；
id相當于身份證，所以同一個頁面上的HTML標簽不可以有一樣的id；
3、class相當于人名，所以，一個HTML標簽可以有多個Class
id相當于身份證，所以，一個HTML標簽只能有一個id
4、一般情況下設(shè)置樣式，使用class；如果需要js配合，使用id
格式：
先祖位置可以是HTML標簽，可以是class名，可以是id
后代位置可以是HTML標簽，可以是class名，可以是id
可以隨意組合
只會查找直接子元素
格式：
1、都可以使用HTML標簽、id名、class名
1、后代使用空格，子使用
2、后代可以選取指定標簽的所有特定標簽，包括子、孫；而子只能選取指定標簽的特定子標簽
定義：兩個選擇器相交的部分
格式：
選擇器1選擇器2{
}
選擇器1和選擇器2之間沒有任何符號，沒有空格，沒有
選擇器1和選擇器2之間有逗號。
相鄰：選擇器1+選擇器2，給緊跟著選擇器1后面的選擇器2設(shè)置樣式
通用：選擇器1~選擇器2，給選擇器1后面的所有選擇器2設(shè)置樣式
CSS3中新增的選擇器最具代表性的就是序選擇器
1.同級別的第幾個
:first-child 選中同級別中的第一個標簽
:last-child 選中同級別中的最后一個標簽
:nth-child(n) 選中同級別中的第n個標簽【n的值可以是數(shù)值，可以是“odd”、“even”,也可以是表達式，比如xn+y】
:nth-last-child(n) 選中同級別中的倒數(shù)第n個標簽
:only-child 選中父元素中唯一的標簽
注意點: 不區(qū)分類型
2.同類型的第幾個
:first-of-type 選中同級別中同類型的第一個標簽
:last-of-type 選中同級別中同類型的最后一個標簽
:nth-of-type(n) 選中同級別中同類型的第n個標簽
:nth-last-of-type(n) 選中同級別中同類型的倒數(shù)第n個標簽
:only-of-type 選中父元素中唯一類型的某個標簽
| [ attribute ] | [target] | 選擇帶有 target 屬性所有元素。 | 2 |
| [ attribute = value ] | [target=_blank] | 選擇 target="_blank" 的所有元素。 | 2 |
| [ attribute ~= value ] | [title~=flower] | 選擇 title 屬性包含單詞 "flower" 的所有元素。 | 2 |
| [ attribute |= value ] | [lang|=en] | 選擇 lang 屬性值以 "en" 開頭的所有元素。 | 2 |
| [ attribute ^= value ] | a[src^="https"] | 選擇其 src 屬性值以 "https" 開頭的每個 a 元素。 | 3 |
| [[ attribute =value] 選擇器") | a[src$=".pdf"] | 選擇其 src 屬性以 ".pdf" 結(jié)尾的所有 a 元素。 | 3 |
| [ attribute = value*] | a[src*="abc"] | 選擇其 src 屬性中包含 "abc" 子串的每個 a 元素。 | 3 |
1、屬性的取值是以什么開頭的
[ attribute |= value ]----------------CSS2
優(yōu)先使用CSS3的。
2、屬性的取值是以什么結(jié)尾的
3、屬性的取值是否包含某個特性的值的
[attribute~=value]
*{
}
CSS選擇器就是指定CSS要作用的標簽，那個標簽的名稱就是選擇器。意為：選擇哪個容器。
CSS選擇器分類：
標簽選擇器、類選擇器、ID選擇器、全局選擇器、群組選擇器、后代選擇器、偽類選擇器
1、html標簽選擇器：
定義：以html標簽作為選擇器
2、class類選擇器：
定義：為HTML標簽添加class屬性，通過類選擇器來為具有此class屬性的元素設(shè)置css樣式。
類選擇器也可以對不同類型元素的同一個名稱的類選擇器設(shè)置不同的樣式規(guī)則：
同一個元素可以設(shè)置多個類，之間用空格隔開：
3、ID選擇器
定義：為HTML標簽添加ID屬性，通過ID選擇器來為具有此ID的元素設(shè)置CSS規(guī)則
4、群組選擇器
定義：集體統(tǒng)一設(shè)置樣式
5、全局選擇器
定義：所有標簽設(shè)置樣式
HTML文檔結(jié)構(gòu)圖
6、后代選擇器
定義：使用后代選擇器設(shè)置，之間用空格隔開，后代選擇器可以多層。
7、偽類選擇器
鏈接的四種狀態(tài)：激活狀態(tài)，已訪問狀態(tài)，未訪問狀態(tài)，鼠標懸停狀態(tài)。
偽類
說明
:link
未訪問的鏈接
:visited
已訪問的鏈接
:hover
鼠標懸停狀態(tài)
:active
激活的鏈接
:hover 用于訪問的鼠標經(jīng)過某個元素時；
:active 用于一個元素被激活時（即按下鼠標之后放開鼠標之前的狀態(tài)）
偽類選擇器的屬性：link visited hover active
說明：
1)?a:hover 必須置于?a:link和a:visited之后，才有效
2) a:active 必須置于 a:hover之后才有效
3) 偽類名稱對大小寫不敏感
8、CSS其它選擇器
css繼承特性，從父元素那繼承部分css屬性
選擇器的優(yōu)先級
ID選擇優(yōu)先級最高（id選擇器定義具有唯一性）
class選擇器次之（class選擇器可以多個）
元素選擇器再次之
其它選擇器優(yōu)先級主要根據(jù)定義的先后順序，最后定義的優(yōu)先級高
!important 加重選擇器的優(yōu)先級，添加在樣式規(guī)則之后，中間用空格隔開。
CSS選擇器命名規(guī)則
1：采用英文字母，數(shù)字以及"-" 和 "_" 命名
2：以小寫字母開頭，不能以數(shù)字和"-"?和 "_" 開頭
3：使用有意義的命名規(guī)范
常用CSS命名
header
頁頭
main
主體
footer
頁尾
nav
導航
sidebar
側(cè)欄
container
容器
column
欄目
title
標簽
menu
菜單
submenu
子菜單
*列舉常用命名，大家根據(jù)自身項目及團隊的規(guī)則命名
耐心學習基礎(chǔ)知識，基礎(chǔ)是蓋房的根基，必須打結(jié)實。
如果您覺得有用，記得在下方點贊、關(guān)注、留言，我會定期奉 上更多的驚喜哦，您的打賞支持才是我繼續(xù)努力的動力，么么噠。
每日分享在學習過程中總結(jié)的學習經(jīng)驗，學習筆記，筆試題，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以學習為目的，每天閱讀一篇文章，了解身邊的技術(shù)。陪有夢想的人一起成長！
作用：通過元素選擇器可以選擇頁面中的所有指定元素
語法：標簽名{}
作用：通過元素的class屬性值選中一組元素
語法：.class屬性值{}
id選擇器
作用：通過元素的id屬性值選中唯一的一個元素
語法：#id屬性值{}
復(fù)合選擇器（交集選擇器）
作用：可以選中同時滿足多個選擇器的元素
語法：選擇器1選擇器2選擇器N{}
選擇器分組（并集選擇器）
作用：通過選擇器分組可以同時選中多個選擇器對應(yīng)的元素
語法：選擇器1,選擇器2,選擇器N{}
通配選擇器
作用：可以用來選中頁面中的所有的元素
語法：*{}
元素之間的關(guān)系：
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或間接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或間接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：擁有相同父元素的元素叫做兄弟元素
作用：選中指定元素的指定后代元素
語法：祖先元素 后代元素{}
有時候，你需要選擇本身沒有標簽，但是 仍然易于識別的網(wǎng)頁部位，比如段落首行 或鼠標滑過的連接。CSS為他們提供一些選 擇器：偽類和偽元素。
給鏈接定義樣式：
有四個偽類可以讓你根據(jù)訪問者與該鏈接的交互方式，將鏈接設(shè)置成4中不同的方式。
其他：
否定偽類
否定偽類可以幫助我們選擇不是其他東西的某種東西。
語法： :not(選擇器){}
比如p:not(.hello)標識選擇所有的p元素，但是class為hello的除外。
屬性選擇器可以挑選帶有特殊屬性的標簽。
語法：
[屬性名]
[屬性名 = "屬性值"]
[屬性名 ~= "屬性值"]
[屬性名 ^= "屬性值"]
[屬性名 |= "屬性值"]
[屬性名 $= "屬性值"]
[屬性名 *= "屬性值"]
作用：選中指定父元素的指定子元素
語法：父元素 子元素
比如body h1將選擇body字標簽中的所有h1標簽
IE6及以下的瀏覽器不支持子元素選擇器
其他子元素選擇器
除了根據(jù)祖先父子關(guān)系，還可以根據(jù)兄弟關(guān)系查找元素。
語法：
兄弟元素 + 兄弟元素 ：查找后邊一個兄弟元素
兄弟元素 ~ 兄弟元素：查找后邊所有的兄弟元素
在頁面中使用CSS選擇器選中元素時，經(jīng)常都是一個元素同時被多個選擇器選中。
比如：
這兩個選擇器都會選擇h1元素，如果兩個選擇器設(shè)置的樣式不一樣那還好不會產(chǎn)生沖突，但是如果兩個選擇器設(shè)置的是同一個樣式，這樣h1到底要應(yīng)用哪個樣式呢？CSS中會默認使用權(quán)重較大的樣式，下面看一下權(quán)重又是如何計算的。
不同的選擇器有不同的權(quán)重值：
元素選擇器 作用：根據(jù)標簽名來選中指定的元素 語法：標簽名{} 例子：p{} h1{} p{}
作用：根據(jù)元素的id屬性值選中一個元素 語法：#id屬性值{} 例子：#box{} #red{}
類選擇器 作用：根據(jù)元素的class屬性值選中一組元素 語法：.class屬性值
作用：選中頁面中的所有元素 語法: *
作用：選中同時復(fù)合多個條件的元素 語法：選擇器1選擇器2選擇器3選擇器n{} 注意點： 交集選擇器中如果有元素選擇器，必須使用元素選擇器開頭
選擇器分組（并集選擇器） 作用：同時選擇多個選擇器對應(yīng)的元素 語法：選擇器1,選擇器2,選擇器3,選擇器n{}
作用：選中指定父元素的指定子元素 語法：父元素 子元素
作用：選中指定元素內(nèi)的指定后代元素 語法：祖先 后代
選擇下一個兄弟 語法：前一個 + 下一個
選擇下邊所有的兄弟 語法：兄 ~ 弟
[屬性名] 選擇含有指定屬性的元素[屬性名=屬性值] 選擇含有指定屬性和屬性值的元素[屬性名^=屬性值] 選擇屬性值以指定值開頭的元素[屬性名$=屬性值] 選擇屬性值以指定值結(jié)尾的元素[屬性名*=屬性值] 選擇屬性值中含有某值的元素的元素
表示頁面中一些特殊的并不真實的存在的元素（特殊的位置）
偽元素使用 :: 開頭
::first-letter 表示第一個字母
::first-line 表示第一行
::selection 表示選中的內(nèi)容
::before 元素的開始
::after 元素的最后
before 和 after 必須結(jié)合content屬性來使用
樣式的繼承，我們?yōu)橐粋€元素設(shè)置的樣式同時也會應(yīng)用到它的后代元素上
繼承是發(fā)生在祖先后后代之間的
繼承的設(shè)計是為了方便我們的開發(fā)， 利用繼承我們可以將一些通用的樣式統(tǒng)一設(shè)置到共同的祖先元素上， 這樣只需設(shè)置一次即可讓所有的元素都具有該樣式
注意：并不是所有的樣式都會被繼承：比如 背景相關(guān)的，布局相關(guān)等的這些樣式都不會被繼承
選擇器的權(quán)重
內(nèi)聯(lián)樣式 1,0,0,0
id選擇器 0,1,0,0
類和偽類選擇器 0,0,1,0
元素選擇器 0,0,0,1
通配選擇器 0,0,0,0
繼承的樣式 沒有優(yōu)先級
可以在某一個樣式的后邊添加 !important ，則此時該樣式會獲取到最高的優(yōu)先級，甚至超過內(nèi)聯(lián)樣式，
注意：在開發(fā)中這個玩意一定要慎用！
今天小編要跟大家分享的文章是關(guān)于Web前端開發(fā)知識點之CSS的使用方式。本文章小編從與HTML的結(jié)合方式、CSS語法、選擇器以及盒子模型四個方面進行講解。下面來和小編一起看一看吧！
一、與HTML的結(jié)合方式
CSS與HTML的結(jié)合方式一共有三種，分別是：外部樣式、內(nèi)部樣式和內(nèi)聯(lián)樣式。
①外部樣式
當樣式需要應(yīng)用于很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用標簽鏈接到樣式表。標簽在文檔的頭部：
_
或者可以像下面這樣在標簽import一個樣式表，不過不建議使用。
___
@import"main.css";_
②內(nèi)部樣式
當單個文檔需要特殊的樣式時，就應(yīng)該使用內(nèi)部樣式表。你可以使用標簽在文檔頭部定義內(nèi)部樣式表，就像這樣:
_
___
_r_color:_ienna;}_
③內(nèi)聯(lián)樣式
要使用內(nèi)聯(lián)樣式，你需要在相關(guān)的標簽內(nèi)使用樣式(style)屬性。
_
Thisisaparagraph
由于要將表現(xiàn)和內(nèi)容混雜在一起，內(nèi)聯(lián)樣式會損失掉樣式表的許多優(yōu)勢。請慎用這種方法，例如當樣式僅需要在一個元素上應(yīng)用一次時。
二、CSS語法
CSS語法規(guī)則由兩個主要的部分構(gòu)成：選擇器，以及一條或多條聲明。
選擇器通常是您需要改變樣式的HTML元素。
每條聲明由一個屬性和一個值組成。兩條聲明之間被分號分開。
屬性是您希望設(shè)置的樣式屬性。每個屬性有一個值。屬性和值被冒號分開。
在下面這個例子中，h1是選擇器，color和font-size是屬性，red和14px是值。
三、選擇器
CSS的選擇器主要分為兩大類，一類基本選擇器；一類擴展選擇器。
①基本選擇器
基本選擇器包括id選擇器，元素選擇器和類選擇器。
id選擇器可以為標有特定id的HTML元素指定特定的樣式。id選擇器以"#"來定義。例如下面代碼指定id為red的標簽中文本為紅色。
#red{color:red;}
元素選擇器可以為相應(yīng)的HTML元素指定特定的樣式。元素選擇器前面沒有任何字符。例如下面代碼指定div標簽中文本為紅色。
div{color:red;}
類選擇器可以為標有特定class的HTML元素指定特定的樣式。類選擇器以一個點號顯示。例如下面代碼指定class為center的標簽中文本居中對齊。
.center{text-align:center}
②擴展選擇器
擴展選擇器是在基本選擇器的基礎(chǔ)上擴展出來的，下面介紹幾種常見的。
*選擇器(*
{})可以為HTML的所有元素指定特定的樣式。例如下面代碼指定HTML頁面中所有文本為紅色。
*{color:red;}
并集選擇器(選擇器1,選擇器2{})可以為多個選擇器指定特定的樣式。例如下面代碼指定div和span兩種標簽中文本為紅色。
div,span{color:red;}
子選擇器(選擇器1選擇器2{})可以為選擇器1中的選擇器2指定特定的樣式。例如下面代碼指定div中span標簽文本為紅色。
divspan{color:red;}
父選擇器(選擇器1選擇器2{})可以為含有選擇器2的選擇器1指定特定的樣式。例如下面代碼指定含有span的div標簽文本為紅色。
divspan{color:red;}
屬性選擇器(元素[屬性="屬性值"])可以為含有該屬性且屬性值等于該值的元素指定特定的樣式。其中，元素和屬性值可以省略。例如下面代碼指定align屬性等于center的div標簽文本為紅色。
div[align="center"]{color:red;}
偽類選擇器(元素:狀態(tài){})可以為該元素處于該狀態(tài)時指定特定的樣式。例如下面的代碼指定鼠標懸浮在超鏈接上時文本為紅色。
a:hover{color:red;}
四、盒子模型
所有HTML元素可以看作盒子，在CSS中，"box
model"這一術(shù)語是用來設(shè)計和布局時使用。
CSS盒模型本質(zhì)上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內(nèi)容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
下面的圖片說明了盒子模型：
Margin(外邊距)-清除邊框外的區(qū)域，外邊距是透明的。
Border(邊框)-圍繞在內(nèi)邊距和內(nèi)容外的邊框。
Padding(內(nèi)邊距)-清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。
Content(內(nèi)容)-盒子的內(nèi)容，顯示文本和圖像。
默認情況下，標簽的width和height屬性指的是content(內(nèi)容)的寬和高，我們在設(shè)置邊框和邊距的時候一定要注意。如果想要讓width和height是最終盒子的大小，可以設(shè)置下面的代碼：
box-sizing:border-box;
以上就是小編今天為大家分享的關(guān)于Web前端開發(fā)知識點之CSS的使用方式的文章，希望本篇文章能夠?qū)φ趶氖聎eb前端工作和學習的小伙伴們有所幫助，想要了解更多web前端知識記得關(guān)注北大青鳥web培訓官網(wǎng)，最后祝愿小伙伴們工作順利，城市一名優(yōu)秀的web前端程序員。
文章來源：原創(chuàng)_緄墓適_
重慶分公司
重慶分公司
