<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>選擇器</title>
<style media="screen">
/*p{
color: red;
}*/
/*h1{
color: green;
}*/
/*#pID1{
color:blue;
}*/
/*#pID2{
color:red;
}*/
/*#pID3{
color:green;
}*/
/*#pID4{
color:purple;
}*/
/*.pClass1{
color:green;
}*/
/*.pClass2{
color: brown;
}*/
/*.pDoubleClass1{
color: blue;
}*/
/*.pDoubleClass2 {
font-size: 30px;
}*/
/*.colorR{
color: brown;
}
.size30{
font-size: 30px;
}
.line {
text-decoration: underline;
}*/
/*div p{
color: purple;
}*/
/*div .divullipClass{
color: purple;
}*/
/*div ul li p{
color: brown;
}*/
/*div .divPClass{
color: green;
}*/
/*div>p{
color: purple;
}*/
/*div>ul>li>p{
color: green;
}*/
/*p#npId{
color: brown;
}*/
/*p.npClass{
color: brown;
}*/
/*h2,p{
color: purple;
}*/
/*.upClass,.uhClass {
color: purple;
}*/
/*h2+p{
color: green;
}*/
/*p:first-child {
color: red;
}*/
/*p:first-of-type {
color:red;
}*/
/*p:last-child {
color: green;
}*/
/*p:last-of-type {
color: purple;
}*/
/*p:nth-child(3) {
color: red;
}*/
/*p:nth-of-type(3) {
color: green;
}*/
/*p:nth-last-child(3){
color: red;
}*/
/*p:nth-last-of-type(2){
color: green;
}*/
/*p:only-child {
color: green;
}*/
/*p:only-of-type {
color: red;
}*/
/*p:nth-child(odd) {
color: red;
}
p:nth-child(even) {
color: blue;
}*/
/*p:nth-of-type(odd) {
color: blue;
}*/
/*p:nth-child(2n+0){
color: green;
}*/
/*p[id]{
color: red;
}*/
/*p[class="pClass"] {
color: green;
}*/
/*img[alt|=abc]{
color: green;
}*/
/*img[alt^=abc]{
color: red;
}*/
/*img[alt$=abc]{
color: purple;
}*/
/*img[alt~=abc]{
color: red;
}*/
/*img[alt*=abc]{
color: blue;
}*/
/**{
color: red;
}*/
/*p{
color: red;
}*/
/*#pId1 {
color: red;
}
#pId2 {
color: red;
}*/
/*.pClass{
color: red;
}*/
/*div p{
color: red;
}*/
/*div>p{
color: red;
}*/
/*p.pClass{
color: red;
}*/
/*#pId2,#pId1 {
color: red;
}*/
/*h2~p{
color: red;
}*/
/*p:nth-child(n+0) {
color: red;
}*/
/*[id]{
color: red;
}*/
[class="pClass"]{
color: red;
}
</style>
</head>
<body>
<!-- <p>我是段落</p>
<ul>
<li>
<ul>
<li><p>我是段落</p></li>
</ul>
</li>
</ul> -->
<!-- <h1>我是標題</h1>
<p id="pID1">id段落1</p>
<p id="pID2">id段落2</p>
<p id="pID3">id段落3</p>
<p id="pID4">id段落4</p> -->
<!-- <p class="pClass1">pClass1段落1</p>
<p class="pClass1">pClass1段落2</p>
<p class="pClass2">pClass2段落3</p>
<p class="pClass2">pClass2段落4</p>
<p class="pDoubleClass1 pDoubleClass2">pDoubleClass1段落4</p>
<p class="pDoubleClass1 pDoubleClass2">pDoubleClass2段落5</p> -->
<!-- <p class="colorR size30">第一行文字</p>
<p class="size30 line">第二行文字</p>
<p class="colorR line">第三行文字</p> -->
<!-- <div id="divID" class="divClass">
<p class="divPClass">div 我是段落</p>
<p>div 我是段落</p>
<ul>
<li>
<p id="divullipId" class="divullipClass">div ul li 我是段落</p>
</li>
<li>
<p id="divullipId" class="divullipClass">div ul li 我是段落</p>
</li>
</ul>
</div> -->
<!-- <p>交集選擇器段落1</p>
<p id="npId" class="npClass">交集選擇器段落2</p>
<p class="npClass">交集選擇器段落3</p>
<p>交集選擇器段落4</p> -->
<!-- <h2 class="uhClass">并集選擇器標題</h2>
<p class="upClass">并集選擇器段落1</p>
<p >并集選擇器段落2</p>
<p >并集選擇器段落3</p>
<p>并集選擇器段落4</p> -->
<!-- <h2>兄弟選擇器標題</h2>
<a href="#">我是連接</a>
<p>兄弟選擇器段落1</p>
<p >兄弟選擇器段落2</p>
<a href="#">我是連接</a>
<p >兄弟選擇器段落3</p>
<p>兄弟選擇器段落4</p>
<h2>兄弟選擇器標題</h2>
<p>兄弟選擇器段落1</p>
<p >兄弟選擇器段落2</p>
<p >兄弟選擇器段落3</p>
<p>兄弟選擇器段落4</p> -->
<!-- <h2>序選擇器1</h2>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<hr>
<div class="">
<p>我是段落5</p>
<p>我是段落6</p>
<p>我是段落7</p>
<p>我是段落8</p>
</div> -->
<!-- <h2>序選擇器1</h2>
<p>我是段落1</p>
<hr>
<div class="">
<p>我是段落5</p>
</div> -->
<!-- <h2>序選擇器2</h2> -->
<!-- <p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<p>我是段落6</p>
<p>我是段落7</p>
<p>我是段落8</p> -->
<!-- <h2>屬性選擇器</h2>
<p id="pID1" class="pClass">我是段落1</p>
<p class="pClass">我是段落2</p>
<p id="pID3" class="pClass">我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<p class="pClass">我是段落6</p>
<p>我是段落7</p>
<p id="pID8">我是段落8</p> -->
<!-- <img src="" alt="abcmmmwww">
<img src="" alt="abc mmm www">
<img src="" alt="abc-mmm-www">
<img src="" alt="wwwmmmabc">
<img src="" alt="www mmm abc">
<img src="" alt="www-mmm-abc">
<img src="" alt="wwwabcmmm">
<img src="" alt="www abc mmm">
<img src="" alt="www-mmm-abc"> -->
<!-- <h2>通配符選擇器</h2>
<p>段落</p>
<a href="#">我是連接</a> -->
<div class="">
<h2>選擇器練習</h2>
<p id="pId1" class="pClass">我是段落1</p>
<p id="pId1" class="pClass">我是段落2</p>
</div>
</body>
</html>
第六十五課 標簽選擇器
作用：根據指定的標簽名稱，在當前界面中找到所有該名稱的標簽，然后設置屬性
格式：
標簽名稱{
屬性:值;
}
注意點：
1、標簽選擇器選中的是當前界面中的所有的標簽，而不是單獨選中某一個標簽
2、標簽選擇器無論標簽藏的多深都能選中
3、只要是HTML中的標簽就可以作為標簽選擇器（h/a/img/ol/dl/input...）
第六十六課 id選擇器
id選擇器：根據指定的ID名稱找到對應的標簽，然后設置屬性
格式：
#id名稱{
屬性：值；
}
注意點
1、每個HTML標簽都有一個屬性叫做id,也就是說每個標簽都可以設置id
2、同一個界面中ID的名稱是不可以重復的
3、編寫id選擇器一定要在id名稱前面加上#
4、id的名稱只能由字母／數字、下劃線
id名稱不能以數字開頭
id名稱不能是Html標簽的名稱
在企業開發中一般情況下如果僅僅是為了設置樣式，我們不會使用ID，因為在前端開發中ID是留給js使用的
第六十七課 類選擇器
class選擇器：根據指定的類名稱找到對應的標簽，然后設置屬性
格式
.類名 {
屬性：值；
}
注意點
1、每個HTML標簽都有一個屬性叫做class,也就是說每個標簽都可以設置class
2、同一個界面中class的名稱是可以重復的
3、編寫id選擇器一定要在class名稱前面加上.
4、class命名規范和id一樣
5、class就是專門給某個特定的標簽設置樣式的
6、在HTML中每個標簽可以同時綁定多個類名
格式
<標簽名稱 class=“類名1 類名2 。。。”>
錯誤寫法
<標簽名稱 class=“類名1” class=“類名2”>
第六十八課 id選擇器和類選擇器
區別
id相當于人的身份證不可以重復；class相當于人的名字可以重復；
一個HTML標簽只能綁定一個id名稱；一個HTML標簽可以綁定多個class名稱；
id選擇器以#開頭；class選擇器以.開頭；
id一般情況下是給js使用的，所以除了特殊情況否則不要使用id設置樣式
對類的使用可以看出一個開發人員的技術水平
一般情況下企業開發中要注意代碼冗余的抽取，可以將一些公共的代碼抽取到一個類選擇器中，然后讓標簽和這個類選擇器綁定即可
第六十九課 后代選擇器
后代選擇器：找到指定標簽的所有后代標簽，設置屬性
格式：
標簽名稱1 標簽名稱2 ... {
屬性：值；
}
先找到標簽名稱1的標簽，再找到標簽名稱2的標簽，然后設置屬性
注意點：
后代選擇器必須用空格隔開
后代不僅是兒子，還包括孫子。。。，只要放在這個標簽中，都是他的后代
后代選擇器不僅可以使用標簽名稱，還可以使用其他選擇器
后代選擇器可以通過空格一直延續下去
第七十課 子元素選擇器
子元素選擇器：找到指定的標簽中所有特定的直接子元素，然后設置屬性
格式
標簽名稱1>標簽名稱2{
屬性：值；
}
先找到名稱叫做標簽名稱1的標簽，然后在這個標簽中找到所有直接子元素名稱為標簽2的元素
注意點
1、子元素選擇器只會查找兒子，不會查找其他被嵌套的標簽
2、子元素選擇器之間需要用>符號鏈接，并且不能有空格
3、子元素選擇器不僅可以使用標簽名稱，還可以使用其他選擇器
4、子元素選擇器可以通過>符號一直延續下去
第七十課 后代選擇器和子元素選擇器
區別
后代選擇器使用空格作為連接符號；后代選擇器會選中指定標簽中所有的特定后代標簽，
同時選中兒子／孫子。。。，只要是被放到指定標簽中的特定標簽都會被選中
子元素選擇器使用>作為連接器；子元素選擇器只會選中指定標簽中，所有的特定的直接標簽，只有兒子標簽
共同點：
都可以使用標簽／id名稱／class名稱來作為選擇器；
都可以通過各自的連接符號一直延續下去
在企業開發中如何選擇
如果想選中標簽中所有的特定的標簽，那么就使用后代選擇器；
如果只想選中指定標簽中的所有特定兒子標簽就使用子元素選擇器
第七十二課 交集選擇器
交集選擇器：給所有選擇器選中的標簽中，相交的那部分標簽設置屬性
格式：
選擇器1選擇器2{
屬性：值；
}
注意點
1、選擇器之間沒有任何連接符號
2、選擇器可以使用標簽名稱／id名稱／class名稱
3、交集選擇器在企業開發中用的并不多
第七十三課 并集選擇器
作用：給所有選擇器選中的標簽設置屬性
格式：
選擇器1，選擇器2{
屬性：值；
}
注意點：
1、并集選擇器必須使用，來連接
2、選擇器可以使用標簽名稱／id名稱／class名稱
第七十四課 兄弟選擇器
相鄰兄弟選擇器 CSS2
作用：給指定選擇器后面緊跟的那個選擇器選中的標簽設置屬性
格式
選擇器1+選擇器2{
屬性：值；
}
注意點
1、相鄰兄弟選擇器必須通過+連接
2、相鄰兄弟選擇器只能選中緊跟其后的那個標簽，不能選中被隔開的標簽
通用兄弟選擇器 CSS3
作用：給指定選擇器后面的所有選擇器選中的所有標簽設置屬性
格式：
選擇器1~選擇器2{
屬性：值；
}
注意點：
1、通用兄弟選擇器必須用~連接
2、通用兄弟選擇器選中的是指定選擇器后面某個選擇器選中的所有標簽，無論有沒有被隔開都可以選中
第七十五課 序選擇器上
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 選中父元素中唯一類型的某個標簽
第七十六課 序選擇器下
:nth-child(odd) 選中同級別中的所有奇數(odd)
:nth-child(even)選中同級別中的所有偶數(even)
:nth-child(xn+y)
x和y是用戶自定義的，n是一個計數器，從0開始遞增
第七十七課 屬性選擇器
格式：
[attribute]
作用：根據指定的屬性名稱找到對應的標簽，然后設置屬性
[attribute=value]
作用：找到有指定屬性，并且屬性的取值等于value的標簽，然后設置屬性
最長見的場景：區分input屬性
input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">
第七十八課 屬性選擇器下
1、屬性的取值是以什么開頭的
[attribute|=value] CSS2只能找到value開頭，并且是被-和其他內容隔開的
[attribute^=value] CSS3只要是以Value開頭的都可以找到，無論用何種方式隔開
2、屬性的取值是以什么結尾的
[attribute$=value] CSS3
3、屬性的取值是否包含某個特定的值
[attribute~=value] CSS2只能找到包含value，并且是以空格隔開的
[attribute*=value] CSS3只要包含Value都可以找到
第七十九課 通配符選擇器
作用：給當前界面上所有的標簽設置屬性
格式：
*{
屬性：值；
}
注意點：
由于通配符選擇器是設置界面中所有的標簽屬性，所以在設置之前會遍歷所有的標簽，
如果當前界面上的標簽比較多，那么性能會比較差，所以在企業開發中一般不會使用通配符選擇器
第八十課 選擇器練習
用學過的選擇器，設置p標簽內容為紅色
<div class="">
<h2>選擇器練習</h2>
<p id="pId1" class="pClass">我是段落1</p>
<p id="pId1" class="pClass">我是段落2</p>
</div>
