HTML中快捷輸入方式

快捷輸入方式：

1. lorem+tab鍵：出現自帶的文字
2. 格式：lorem+n(要出現的單詞個數)

3. 格式：p>lorem10+tab
   輸出10個單詞連帶p一起輸出

4. （元素）p+tab：自動補充結束標簽

5. 注釋：ctrl+?
   注：鼠標在的哪行一起刪除

6. ctrl+d：復制當前行
7. ctrl+f：查找
8. ctrl+r替換
9. 多行輸入：
10. div>p>span{xuanzi$$}*5    $:代表數字，兩個就是01,02,03.04,05

Html中選擇器：

一、基礎選擇器

1、通配符選擇器：*{}  改變了全部樣式

2、元素選擇器：元素{}

3、組合選擇器/並集選擇器：元素1，元素2，類，偽類，元素.類{}

4、類選擇器

html:<h2 class="F46"></h2>
css: .F46{}
特點
1、在css中必須要以點號（英文）開始
2、在html中包含字母、數字、連字符（-）、下划線（__）
3、在html點號后面必須是字母開始的
4、在html中區分大小寫
5、在html中一個類選擇器可以應用到多個標簽
示例：
html:<h2 class="F46 F45"></h2>
css: .F45{}
這種情況針對精確設置，例如：在div>ul>li中

5、ID選擇器
html:<h2 id="F46 "></h2>
css: #F46{}

二、層次選擇器
1、后代選擇器
格式：祖先 后代選擇器{}

html:

<div>
<p>
<em></em>
</p>
</div>

 

css:

div p em{}

2、子級選擇器
格式：父級元素>子級元素{}

html:
<div>
<p>
<em></em>
</p>
</div>

 

css:

div> p> em{}

 

3、兄弟選擇器
格式：兄弟元素A+兄弟元素B{}
選擇A元素后的B元素，並且AB必須是相鄰的，即AB之間不許有其他元素
html:

<div>
<p>
<em></em>
<i></i>
</p>
</div>

 

css:

em+i{}

4、通用選擇器
格式：兄弟元素A~兄弟元素B{}
選擇匹配的B元素，即A元素后面的所有B元素
html:

<div>
<p>
<em></em>
<span></span>
<i></i>
</p>
</div>

css:

em~i{}　

三、偽類選擇器
1、動態偽類選擇器
（1）、動態
元素：link
元素：visited
（2）、靜態
元素：hover
元素：active
元素：focus
2、觸發焦點（tab）鍵時的樣式
注：a標簽用的最多
獲取一張圖片在什么樣的位置顯示
4、結構類選擇器

格式（針對一個div下有多個相同元素）
要修改的元素：first-child{}(改變第一個元素)
要修改的元素：last-child{}(改變最后一個元素)
要修改的元素：nth-child(n){}(n要改變的那個元素在第幾個)
要修改的元素：nth-last-child(n){}(修改倒數第幾個元素)
要修改的元素：nth-child(odd){}(修改元素位置在奇數位時：
odd代表奇數，或者寫成2n+1y
要修改的元素：nth-child(even){}(修改元素位置在奇數位時：
even代表偶數，或者寫成2n
div>p(元素1)：nth-of-type(n){}(修改在div中類型為p(元素1)中第二個p的樣式

空元素：empty{}(改變元素為空（沒有內容）的元素樣式)
只有一個元素：only-child(在div（區塊也可以其他元素）中只有一個元素且僅有一個才能改變樣式
5、否定偽類選擇器
格式：元素：not(:nth-child(4)){}除了第四個不改變樣式其他都改變，{}寫相應的樣式
6、偽元素選擇器
對一段文字進行操作
selection的規則
只能有color,background-color(background)兩個屬性
格式

::selection{
color:red;
background-color:bule;
}

::first-letter{}選中第一個字母進行樣式的改變
::first-line{}選中第一個行進行樣式的改變

在標簽前/后添加內容（盡量選擇有自動換行的標簽）

i::before{content:"您好"}

在i標簽前加上”您好“，顯示在網頁中

em::after{content:"王先生"}

在em標簽后加上”王先生“，顯示在網頁中

四、屬性選擇器（通常用到input）中
html

<input type="text"/>

 

css

input[type="text"]{color:red}
html；<input type="number-rfdbx"/>
css:input[type豎線1="number"]{color:red}
選中以”number-“開始的input標簽
豎線=

html

<input type="number-rfdbx text"/>
css:input[type$="number"]{color:red}
選中以”text開始“的input標簽
$=

html

<input type="number-rfdbx dgsb f46 dgd"/>
css:input[type*="number"]{color:red}
選中以”包含f46“的input標簽
*=

html

<input type="number dgsb text gav "/>
css:input[type~="number"]{color:red}
選中以”包含text“的input標簽，並且多個屬性以空格隔開
~=

html

<input type="text-rfdbxvs gsvx"/>
css:input[type^="number"]{color:red}
選中以”text“開始,也可寫成”te“的input標簽
^=