1. 程式人生 > >css之選擇器2

css之選擇器2

HA 完全 clas style 之間 title html 設置 oct

交集選擇器與並集選擇器

交集選擇器

1、作用:給所有選擇器選中的標簽中,相交的那部分標簽設置屬性
2、格式:
選擇器1選擇器2 {
屬性:值;
}
3、註意:
1、選擇器與選擇器之間沒有任何鏈接符號
2、選擇器可以使用標簽名稱、id、class
3、交集選擇器在企業開發中並不多見,了解即可
因為:p.part1 完全可以用.part1取代

 <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p.part1  {
            color: red;
        }
        p#p1 {
            font-size: 100px;
        }

    </style>
</head>
<body>
<p class="part1">我是段落</p>
    <p id="p1">我是段落</p>
    <p class="part1">我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>

</body>

並集選擇器

1、作用:給所有滿足條件的標簽設置屬性

2、格式:
選擇器1,選擇器2 {
屬性:值;
}

3、註意:
1、選擇器與選擇器之間必須用逗號來鏈接
2、選擇器可以使用標簽名稱、id、class

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .part,h1,a {
            color: red;
        }
    </style>
</head>
<body>
<h1>哈哈啊</h1>
    <p class="part1">我是段落</p>
    <p id="p1">我是段落</p>
    <p class="part1">我是段落</p>
    <a href="#">我是我</a>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
</body>
</html>

css之選擇器2