css選擇器的分類

鬱見你真好發表於2020-12-30
CSS

選擇器的分類

1、萬用字元選擇器 *

權重：0
符號：*
用法：*{}

<style>
*{
background:red;
}
</style>

2、標籤選擇器

權重：10
命名：標籤內通過class=“name”
用法：.name{}

<style>
.p2{
background:green;
}
</style>
<body>
	<p>p1</p>
	<p class="p2">p2</p>
</body>

3、屬性選擇器

權重：10
用法:

  • [屬性]{}（選中該屬性對應的所有標籤）
  • [屬性=“屬性值”]，選中對應屬性值的標籤
<style>
       [index]{
           background:darkorange;
       }
      [index="a1"]{
          background:darkorchid;
      }
</style>

4、id選擇器

權重：100
用法：

  • 在開始標籤裡新增id=“name”
  • style內使用#name{}進行選擇使用

注意：id選擇器和class選擇器不同，例如在頁面中寫了一個id=“name1”，那麼這個頁面中不允許出現第二個相同的，這個是規定。id=“name1” 是唯一的。

<style>
    #p1{
      background:green;  
    }   
</style>
<body>
	<p id="p1" class="p1">段落1</p>
</body>

5、子選擇器

權重：組合的選擇器之和
連線符：>(權重0)
含義：父子關係，例如下面的div>h1 代表選中div裡面的兒子元素，並且是h1的這一類標籤

<style>
      div>h1{
          background:green;
      }
</style>
<body>
	<div class="main">
		<p>p1</p>
		<h1>h1</h1>
		<div>
			<span>span</span>
		</div>
	</div>
</body>

6、後代選擇器

權重：組合的選擇器權重之和
連線符： 空格
含義：後代關係，即無論是兒子還是孫子,只要是後代都可以被選擇。

<style>
      div span{
          background:green;
      }
</style>
<body>
	<div class="main">
		<div>
			<span>span</span>
		</div>
		<span>span</span>
	</div>
</body>

7、分組選擇器

權重：組合的選擇器之和
連線符：逗號,
含義：將相同的程式碼提取出來，減少冗餘

<style>
.box1>p1,.box2{
           color:darkorange;
           width:100px;
           height:100px;
           background:green;
}
</style>
<body>
	<div class="box1">
		<p>p1</p>
	</div>
	<p class="box2">box2</p>
</body>

8、交集選擇器

權重：組合的選擇器之和
符號：無
含義：多個選擇器組合而成

<style>
    .box1.current{
        background:green;
    }
</style>
<body>
	<div class="box1 current" >box1</div>
	<div class="box1">box1</div>
	<p class="current">p1</p>
</body

9、相鄰兄弟選擇器

權重：組合的選擇器之和
連結符號：+
含義：以下面為例，h1+p 代表的是選中與h1相鄰的p標籤（注意：向下尋找，下面程式碼中第一個p標籤並不能被選中）

<style>
      h1+p{
          background:green;
      }
</style>
<body>
	<p>p1</p>
	<h1>h1</h1>
	<p>p1</p>
	<p>p2</p>
	<h1>h1</h1>
	<div>div1</div>
	<h1>h1</h1>
	<p>p1</p>
	<p>p2</p>
</body>

10、通用兄弟選擇器

權重：組合的選擇器之和
連線符號：~
含義：以下面為例，h1~p 代表的是選中h1下面所有的兄弟p標籤（注意：向下尋找，下面程式碼中第一個p標籤並不能被選中）

<style>
      h1~p{
          background:green;
      }
</style>
<body>
	<p>p1</p>
	<h1>h1</h1>
	<p>p1</p>
	<div>box1</div>
	<p>p2</p>
	<h1>h1</h1>
	<div>div1</div>
	<h1>h1</h1>
	<p>p1</p>
	<p>p2</p>
</body>

11、偽類選擇器

a標籤的四種狀態，它這四種狀態有一定的順序，在網路上被稱為“愛恨原則”。 重點記住：hover 即可，其它幾個不相容。

<style>
        a{
            font-weight: bold;
            font-size:100px;
        }
        /* 預設連結的文字顏色 */
       a:link{
           color:green;
       }
       /* 訪問過後的文字顏色 */
       a:visited{
           color:gold;
       }
       /* 滑鼠滑上 */
       a:hover{
           color:hotpink;
       }
       /* 點選連結時候的 */
       a:active{
           color:darkcyan;
       }
</style>

相關文章