資訊專欄INFORMATION COLUMN
摘要：選擇器選擇器，說白了就是的標簽或者其相關特性，在一個頁面中會有很多很多的元素，不同的元素可能會有不同的樣式，某些元素又需要設置相同的樣式，選擇器就是用來從頁面中查找特定元素的，找到元素之后就可以為它們設置樣式了。
選擇器，說白了就是html的標簽或者其相關特性，在一個HTML頁面中會有很多很多的元素，不同的元素可能會有不同的樣式，某些元素又需要設置相同的樣式，選擇器就是用來從HTML頁面中查找特定元素的，找到元素之后就可以為它們設置樣式了。 選擇器為樣式規則指定一個作用范圍
基本選擇器包含以下選擇器：
標簽選擇器說白了就是html的標簽元素，就像前面說的h1-h6，p，div，form，ul，ol，li，a等等的，這些都可以是標簽選擇器
注意：，也可以作為標簽選擇器
這個選擇器很常用，也很重要。先說說什么是類，這樣，還是打開百度首頁來講解
左邊我圈出來的class = s_ipt就是input的一個類屬性，右邊的css就是由類選擇器控制的，這樣就可以很好的找到此特有的標簽
注意：
ID選擇器和類選擇器很類似
還是百度這個例子
我圈出來的這個 id=‘kw’ 就是id選擇器，右邊的#kw就是其id選擇器的css樣式
注意：
通用選擇器的就一個，用【*】代替，例：
* { color: black; }
* 號相信稍微是個愛研究的人都見過，在windows系統里表示通配符，可以代替一切的字符，在IT它也是這么個用法，可以表示一切字符，那么這里的自然表示所有的標簽
組合選擇器就是比較高級的用法，有時候我們可能只運用上面的基本選擇器不是很方便，那么就可以用組合選擇器
組合選擇器包含有：
- 高級選擇器
- 子集選擇器
- 后代選擇器
- 相鄰選擇器
說這個之前，我希望您有這種思想，把html結構想成一顆大樹，樹上有很多的枝葉，每個枝里又有很多小枝，這樣的話你可能會更好理解下面的，對以后的理論也更好理解
好的，接正文，子代選擇器即就是選擇此元素的直系子代，例：
div > p{
font-size:15px;
}
以上例子就是選擇div里的直系子代里的p標簽
后臺選擇器和前面的子代選擇器有些類似，不過后代是包含子代在內的所有子子孫孫標簽
例：
div p{
font-size:15px;
}
以上表示選取div下的所有p標簽，不管是不是直系子代
相鄰選擇器有兩個，一個是前者（哥哥），一個后者（弟弟）
前者，用+：
div+p {
color: red;
}
后者，用~：
div~p {
color: red;
}
高級選擇器里包含有并集，交集
并集，用逗號連接：
div,p,a{
color:red;
}
交集，直接連接，中間沒有空格：
交集用個完整的html來講解，可能大家才更好理解
高級選擇器
test1
test2
test3
test4
測試結果：
屬性選擇器的特點就是可以很好的定位到人為定義的屬性，而不是已經有的屬性，比如給html文件加一個特殊標識，用屬性選擇器立馬就可以取到，并進行調整樣式
屬性選擇器如果細分的話，有兩種，一個是屬性選擇器，一個是屬性-值選擇器
屬性選擇
test1
注意：屬性選擇器的語法是 [……]
而屬性選擇器最常用的就是表單：
input[type="text"] {
backgroundcolor: red;
}
當多個元素的樣式相同的時候，我們沒有必要重復地為每個元素都設置樣式，我們可以通過在多個選擇器之間使用逗號分隔的分組選擇器來統一設置元素樣式
其實這個分組選擇就是前面高級選擇器里的并集選擇器，為什么它又叫分組選擇器，就是因為很重要啦
h1,h2 {
color: red;
}
偽類的意思就本來不存在的類，但是其又可以用
這個最常用的是對a和input標簽的選取
偽類選擇器有：
:link
:active
:visited
:hover
:focus
表示沒有訪問的鏈接
a:link {
color: blue;
}
表示鼠標點擊瞬間
a:active {
color: black;
}
表示訪問過，點擊過的鏈接
a:visited {
color: gray;
}
表示光標放上去但還未點擊的狀態
p:hover {
cursor:pointer;
background-color: #eee;
}
input輸入框獲取焦點時（即正處于在輸入框輸入內容時）樣式
input:focus {
background-color: #eee;
}
以上最常用的就是：hover
偽元素的概念和偽類很像，意思就是本來不存在的，但是又可以直接是用的
偽元素有：
- first-leter
- before
- after
用于為文本的首字母設置特殊樣式，說白了就是那種文章首字母大寫的效果
p:first-letter {
font-size: 48px;
}
用于在元素的內容前面插入新內容
p:before {
content: "*"; /*在所有p標簽的內容前面加上一個紅色的**/
color: red;
}
用于在元素的內容后面插入新內容
p:after {
content: "?"; /*在所有p標簽的內容后面加上一個藍色的?*/
color: red;
}
學完以上的各種各樣的選擇器，那么當然以上的各種選擇器是可以混用的，那么混用的話，就會存在一個問題，假如各種混用的選擇器剛好都對同一個元素選中并設置不同的樣式，這種的話，到底會顯示什么樣呢？
這個問題也當然不是問題，因為每個選擇器都有優先級（又叫權重）的，優先級高就選擇誰
各種選擇器的優先級：
權重總結：
1.先看標簽是否被選中，如果選中，就數id選擇器和類選擇器，標簽選擇的權重，最后誰的權重大就顯示誰的，如果權重一樣大，后者覆蓋前者
2.如果沒有選中，權重為0，如果權重都是由父級繼承而來，且權重都是0，遵循就近原則，誰描述的近就顯示誰
3.！import權重最大
4.css多層嵌套，內層元素會繼承外層元素的css樣式
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1551.html
摘要：前端技術日新月異，在你鞏固底層技能的同時，別忘了還要跟上前沿技術的發展步伐。你可以從谷歌的博客中了解更多相關信息。令我驚訝的是，谷歌所有地方在非常簡單的頁面上都沒有搜索欄。快速發布預覽零配置打包工具。快速啟動新的工具。 Web 前端技術日新月異，在你鞏固底層技能的同時，別忘了還要跟上前沿技術的發展步伐。 本期刊專注于 Web 前端前沿技術，收集的內容來自國外各大前端技術周刊，這里把值得...
摘要：前端技術日新月異，在你鞏固底層技能的同時，別忘了還要跟上前沿技術的發展步伐。你可以從谷歌的博客中了解更多相關信息。令我驚訝的是，谷歌所有地方在非常簡單的頁面上都沒有搜索欄。快速發布預覽零配置打包工具。快速啟動新的工具。 Web 前端技術日新月異，在你鞏固底層技能的同時，別忘了還要跟上前沿技術的發展步伐。 本期刊專注于 Web 前端前沿技術，收集的內容來自國外各大前端技術周刊，這里把值得...
摘要：前端開發規范文檔規范目的使開發流程更加規范化。中的非注釋類中文字符須轉換成編碼使用，以避免編碼錯誤時亂碼顯示。文件規范文件名用英文單詞，多個單詞用駝峰命名法。書寫規范命名規范。圖片規范命名應用小寫英文數字組合，便于團隊其他成員理解。 Web前端開發規范文檔 規范目的： 使開發流程更加規范化。 通用規范： TAB鍵用兩個空格代替（WINDOWS下TAB鍵占四個空格，LINUX下TAB鍵...
摘要：前端開發規范文檔規范目的使開發流程更加規范化。中的非注釋類中文字符須轉換成編碼使用，以避免編碼錯誤時亂碼顯示。文件規范文件名用英文單詞，多個單詞用駝峰命名法。書寫規范命名規范。圖片規范命名應用小寫英文數字組合，便于團隊其他成員理解。 Web前端開發規范文檔 規范目的： 使開發流程更加規范化。 通用規范： TAB鍵用兩個空格代替（WINDOWS下TAB鍵占四個空格，LINUX下TAB鍵...
摘要：默認值，沒有定位，元素出現在正常的文檔流中。生成粘性定位的元素，容器的位置根據正常文檔流計算得出。和屬性的異同共同點對內聯元素設置和屬性，可以讓元素脫離文檔流，并且可以設置其寬高。 position的值， relative和absolute分別是相對于誰進行定位的？ 、relative:相對定位，相對于自己本身在正常文檔流中的位置進行定位。、absolute:生成絕對定位，相對于最近一...
閱讀 713·2023-04-25 19:43
閱讀 3910·2021-11-30 14:52
閱讀 3784·2021-11-30 14:52
閱讀 3852·2021-11-29 11:00
閱讀 3783·2021-11-29 11:00
閱讀 3869·2021-11-29 11:00
閱讀 3557·2021-11-29 11:00
閱讀 6105·2021-11-29 11:00
