標籤：mips js使用 cto inpu 選中 comment input 計數器 串連符
CSS選取器。
什麼是標籤選取器?
作用: 根據指定的標籤名稱, 在當前介面中找到所有該名稱的標籤, 然後設定屬性
格式:
標籤名稱{
屬性：屬性值
}
標籤選取器（html中的標籤名稱）
id選取器（html標籤中綁定的id名）
類別選取器（html標籤中綁定的class名）
後代選取器（某一個標籤的後代--兒子，孫子。。。）
子項目選取器（某一個標籤的兒子）
偽類別選取器（序選取器）
萬用字元選取器
交集選取器
注意點:
1.標籤選取器選中的是當前介面中所有的標籤, 而不能單獨選中某一個標籤
2.標籤選取器無論標籤藏得多深都能選中
3.只要是HTML中的標籤就可以作為標籤選取器(h/a/img/ul/ol/dl/input....)
1.什麼是id選取器?
作用: 根據指定的id名稱找到對應的標籤, 然後設定屬性
格式:
#id名稱{ 屬性:值;}注意點:
1.每個HTML標籤都有一個屬性叫做id, 也就是說每個標籤都可以設定id
2.在同一個介面中id的名稱是不可以重複的
3.在編寫id選取器時一定要在id名稱前面加上#
4.id的名稱是有一定的規範的
1. id的名稱只能由字母/數字/底線 a-z 0-9 _2. id名稱不能以數字開頭3. id名稱不能是HTML標籤的名稱. 不能是a h1 img input ...5.在企業開發中一般情況下如果僅僅是為了設定樣式, 我們不會使用id ,因為在前端開發中id是留給js使用的
類別選取器1.什麼是類別選取器?
作用: 根據指定的類名稱找到對應的標籤, 然後設定屬性
格式:
.類名{ 屬性:值;}注意點:
1.每個HTML標籤都有一個屬性叫做class, 也就是說每個標籤都可以設定類名
2.在同一個介面中class的名稱是可以重複的
3.在編寫class選取器時一定要在class名稱前面加上.
4.類名的命名規範和id名稱的命名規範一樣
5.類名就是專門用來給CSS設定樣式的
6.在HTML中每個標籤可以同時綁定多個類名
格式:<標籤名稱 class="類名1 類名2 ...">錯誤的寫法:<p class="para1" class="para2">1.id和class的區別?
1.id相當於人的身份證不可以重複class相當於人的名稱可以重複2.一個HTML標籤只能綁定一個id名稱一個HTML標籤可以綁定多個class名稱2.id選取器和class選取器區別?
* id選取器是以#開頭* class選取器是以.開頭3.在企業開發中到底用id選取器還是用class選取器?
id一般情況下是給js使用的, 所以除非特殊情況, 否則不要使用id去設定樣式一般情況下在企業開發中要注重冗餘代碼的抽取, 可以將一些公用的代碼抽取到一個類別選取器中, 然後讓標籤和這個類別選取器綁定即可1.什麼是後代選取器?
作用: 找到指定標籤的所有特定的後代標籤, 設定屬性
格式:
標籤名稱1 標籤名稱2{ 屬性:值;}先找到所有名稱叫做"標籤名稱1"的標籤, 然後再在這個標籤下面去尋找所有名稱叫做"標籤名稱2"的標籤, 然後在設定屬性
div p{}
注意點:
1.後代選取器必須用空格隔開
2.後代不僅僅是兒子, 也包括孫子/重孫子, 只要最終是放到指定標籤中的都是後代
3.後代選取器不僅僅可以使用標籤名稱, 還可以使用其它選取器
4.後代選取器可以通過空格一直延續下去
1.什麼是子項目選取器?
作用: 找到指定標籤中所有特定的直接子項目, 然後設定屬性
格式:
標籤名稱1>標籤名稱2{ 屬性:值;}先找到所有名稱叫做"標籤名稱1"的標籤, 然後在這個標籤中尋找所有直接子項目名稱叫做"標籤名稱2"的元素
注意點:
1.子項目選取器只會尋找兒子, 不會尋找其他被嵌套的標籤
2.子項目選取器之間需要用>符號串連, 並且不能有空格
3.子項目選取器不僅僅可以使用標籤名稱, 還可以使用其它選取器
4.子項目選取器可以通過>符號一直延續下去
開發中基本不用
1.什麼是交集選取器?
作用: 給所有選取器選中的標籤中, 相交的那部分標籤設定屬性
格式:
選取器1選取器2{ 屬性: 值;}注意點:
1.選取器和選取器之間沒有任何的串連符號
2.選取器可以使用標籤名稱/id名稱/class名稱
作用: 給指定選取器後面緊跟的那個選取器選中的標籤設定屬性
格式:
選取器1+選取器2{ 屬性:值;}注意點:
1.相鄰兄弟選取器必須通過+串連
2.相鄰兄弟選取器只能選中緊跟其後的那個標籤, 不能選中被隔開的標籤
作用: 給指定選取器後面的所有選取器選中的所有標籤設定屬性
格式:
選取器1~選取器2{ 屬性:值;}注意點:
1.通用兄弟選取器必須用~串連
2.通用兄弟選取器選中的是指定選取器後面某個選取器選中的所有標籤, 無論有沒有被隔開都可以選中
這幾個非常的常用，尤其是nth-of-type(n)
好處是，不需要取那麼多的名字了（這是一個大問題），直接就可以拿到標籤
CSS3中新增的選取器最具代表性的就是序選取器
1.同層級的第幾個
:first-child 選中同層級中的第一個標籤
:last-child 選中同層級中的最後一個標籤
:nth-child(n) 選中同層級中的第n個標籤
:nth-last-child(n) 選中同層級中的倒數第n個標籤
:only-child 選中父元素中唯一的標籤
注意點: 不區分類型
2.同類型的第幾個
:first-of-type 選中同層級中同類型的第一個標籤
:last-of-type 選中同層級中同類型的最後一個標籤
:nth-of-type(n) 選中同層級中同類型的第n個標籤
:nth-last-of-type(n) 選中同層級中同類型的倒數第n個標籤
:only-of-type 選中父元素中唯一類型的某個標籤
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>19-序選取器下</title> <style> p:nth-of-type(odd){ color: red; } p:nth-of-type(even){ color: blue; } </style></head><body><!--:nth-child(odd) 選中同層級中的所有奇數:nth-child(even) 選中同層級中的所有偶數:nth-child(xn+y)x和y是使用者自訂的, 而n是一個計數器, 從0開始遞增--><p>我是項目</p><p>我是項目</p><p>我是項目</p><p>我是項目</p><p>我是項目</p><p>我是項目</p><p>我是項目</p></body></html>去w3c看文檔吧
1.什麼是屬性選取器?
作用: 根據指定的屬性名稱找到對應的標籤, 然後設定屬性
格式:
[attribute]
作用:根據指定的屬性名稱找到對應的標籤, 然後設定屬性
[attribute=value]
作用: 找到有指定屬性, 並且屬性的取值等於value的標籤, 然後設定屬性
最常見的應用情境, 就是用於區分input屬性
input[type=password]{}<input type="text" name="" id=""><input type="password" name="" id="">1.什麼是萬用字元選取器?
作用: 給當前介面上所有的標籤設定屬性
格式:
*{ 屬性:值;}注意點:
由於萬用字元選取器是設定介面上所有的標籤的屬性, 所以在設定之前會遍曆所有的標籤, 如果當前介面上的標籤比較多, 那麼效能就會比較差, 所以在企業開發中一般不會使用萬用字元選取器，有其他的方案來替代
HTML5-入門3。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
