CSS經常使用選擇器

時間 2019-12-26

標籤 css 經常使用選擇器欄目 CSS 简体版

原文原文鏈接

1.元素選擇器
做用：經過元素選擇器，能夠選擇頁面中的指定元素。
語法：標籤名{}css

<!DOCTYPE html>  
<html lang="en">  
<head>  
 <meta charset="UTF-8">  
 <title>Title</title>  
 <style type="text/css">  
  p{  
        color:red;  
  }  
    </style>  
</head>  
<body>  
 <p>鋤禾日當午</p>  
</body>  
</html>

2.id選擇器
做用:經過元素的id屬性值，選中惟一的一個元素。
語法：#id屬性值{}html

<!DOCTYPE html>  
<html lang="en">  
<head>  
 <meta charset="UTF-8">  
 <title>Title</title>  
 <style type="text/css">  
 #p1{  
        color:red;  
  }  
    </style>  
</head>  
<body>  
 <p>鋤禾日當午</p>  
 <p id="p1">鋤禾日當午</p>  
</body>  
</html>

3.類選擇器
做用：經過元素的class屬性值選中一組元素
語法： .class屬性值{}app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    .p2{
        color:greenyellow;
    }
    </style>
</head>
<body>
    <p>鋤禾日當午</p>
    <p class="p2">鋤禾日當午</p>
    <p class="p2">鋤禾日當午</p>
</body>
</html>

能夠爲元素設置class屬性。
calss屬性和id屬性相似。只是class屬性能夠重複。
擁有相同class屬性值的元素，咱們說它們是一組元素。
能夠同時爲一個元素設置多個class屬性值，多個值之間使用空格隔開。

<p class="p2 hello">happy new year</p>

4.選擇器分組(並集選擇器)
做用：經過選擇器分組能夠同時選中多個選擇器對應的元素。
語法：選擇器1，選擇器2，選擇器N{}spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    #p1,.p2,h1{
        background-color: yellow;
    }
    </style>
</head>
<body>
    <h1>憫農</h1>
    <p>鋤禾日當午</p>
    <p id="p1">鋤禾日當午</p>
    <p class="p2">鋤禾日當午</p>
</body>
</html>

5.通配選擇器
做用：能夠用來選中頁面中的全部元素
語法：*{}code

*{
    color:red;
}

6.複合選擇器（交集選擇器）
做用：能夠選中同時知足多個選擇器的元素
語法：選擇器1選擇器2選擇器N{}htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    /* 
     * 爲擁有class p3 的span元素設置背景顏色爲黃色
     */
    span.p3{
        background-color: yellow;
    }
    </style>
</head>
<body>
    <h1>憫農</h1>
    <p class="p3">鋤禾日當午</p>
    <span class="p3">鋤禾日當午</span>
</body>
</html>

注意：對於id選擇器來講，不建議使用複合選擇器。it