06 css選擇器

時間 2019-11-18

標籤 css 選擇器欄目 CSS 简体版

原文原文鏈接

選擇器的做用：選中標籤 css

1.基本選擇器

標籤選擇器
id選擇器
class選擇器
*通配符選擇器

權重：行內樣式 1000 > id選擇器 100 > 類選擇器10 > 標籤選擇器 1html

1.1 標籤選擇器

　　標籤選擇器能夠選中全部的標籤元素，好比div，ul，li ，p等等，無論標籤藏的多深，都能選中，選中的是全部的，而不是某一個，因此說 "共性" 而不是 "特性"佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /*標籤選擇器*/
        span {
            color: red;
        }

        a {
            /*字體大小*/
            font-size: 12px;
            /*字體顏色,參考京東*/
            color: #666;
            /*去除默認樣式*/
            text-decoration: none;
            /*光標呈現爲指示連接的指針(一隻手)*/
            cursor: pointer;
        }

    </style>
</head>
<body>
<div>
    <div>
        <div>
            <span>內容</span>
            <a href="">哈哈</a>
        </div>
        <span>另外一個內容</span>
        <a href="">哈哈</a>
    </div>
</div>
</body>
</html>

網頁效果以下：字體

注意：在<style>標籤中，註釋使用/* */，不能使用，不然標籤樣式不生效!spa

1.2 id選擇器

　　id命名規範字母、數字、下劃線，大小寫嚴格區分，aa和AA是兩個不同的屬性值指針

　　選中id；同一個頁面中id不能重複；任何的標籤均可以設置id code

　　id選擇器通常不會設置樣式，一般與js配合使用orm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /*id選擇器*/
       #p1 {
            color: green;
            font-size: 20px;
        }
    </style>
</head>
<body>
<div>
<p id ="p1">段落</p>
</div>
</body>
</html>

網頁效果：htm

1.3 類選擇器

所謂類就是class. class與id很是類似任何的標籤均可以加類，可是能夠設置相同類名blog

同一個標籤中能夠攜帶多個類，用空格隔開

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /*類選擇器*/
        .w {
            width: 50%;
            height: 50px;
            /*底色*/
            background-color: #2ae0c8;
            /*邊框1像素,加粗,紅色顯示*/
            border: 1px solid red;
            /*div居中顯示*/
            margin: 0 auto;
        }
        .t {
           border: 1px solid blue;
        }
    </style>
</head>
<body>
<div class="w t"></div>
<div class="w"></div>
<div class="w">
</body>
</html>

類選擇器-高級版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /*類選擇器*/
        .lv{
            color: green;
        }

        .big{
            font-size: 40px;
        }

        .line{
            text-decoration: underline;
        }

    </style>
</head>
<body><!-- 公共類 共有的屬性 --><
div>
    <p class="lv big">段落1</p>
    <p class="lv line">段落2</p>
<p class="line big">段落3</p>

</div>
</body>
</html>

網頁效果：

總結：

不要去試圖用一個類將咱們的頁面寫完。這個標籤要攜帶多個類，共同設置樣式
每一個類要儘量的小，有公共的概念，可以讓更多的標籤使用

　　到底使用id仍是用class？

　　答案：儘量的用class。除非一些特殊狀況能夠用id。緣由：id通常是用在js的。也就是說 js是經過id來獲取到標籤

1.4 通配符選擇器

通配符選擇器最好不要經常使用，內存消耗太大。

例如，咱們如今初學可使用通配符選擇器，清除頁面標籤中默認的padding和margin

*{
  padding:0;
  margin:0;   
}

顯示在最左邊，maring和padding爲0　　

2. 高級選擇器

後代選擇器
子代選擇器
並集選擇器
交集選擇器

2.1後代選擇器

使用空格表示後代選擇器。顧名思義，父元素的後代（包括兒子，孫子，重孫子）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*後代選擇器*/
        div p {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <p>內容</p>
    </div>
    <p>另外一個內容</p>
</body>
</html>

網頁效果：只有上面的變紅了

2.2 子代選擇器

使用>表示子代選擇器。好比div>p,僅僅表示的是當前div元素選中的子代(不包含孫子....)元素p

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*後代選擇器*/
        .father .a p {
            color: red;
        }

        /*子代選擇器*/
        .father>p {
            color: yellow;
        }

    </style>
</head>

<body>
    <div class="father">
        <div class="item">
            <div class="a">
                <p>內容</p>
            </div>
        </div>
        <p>內容</p>
    </div>
    <div class="a">
        <p>另外一個內容</p>
    </div>
</body>
</html>

網頁效果：紅黃黑

2.3 並集選擇器

多個選擇器之間使用逗號隔開。表示選中的頁面中的多個標籤。一些共性的元素，可使用並集選擇器

好比像百度首頁使用並集選擇器。

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {

margin: 0;

padding: 0

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p,a{
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="item">
            <div class="a">
                <p>內容</p>
            </div>
        </div>
        <p>內容</p>
    </div>
    <div class="a">
        <p>另外一個內容</p>
    </div>
    <a href="#">哈哈</a>
</body>
</html>

網頁效果：所有都是紅色

2.4 交集選擇器

使用.表示交集選擇器。第一個標籤必須是標籤選擇器，第二個標籤必須是類選擇器 或者id選擇器

語法：div.active。當二者都出現時，增長額外的屬性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        h4 {
            background: green;
        }

        .active {

            font-size: 14px;
        }

        h4.active {

            color: red;
        }

        li.active{

            background: yellow;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#">1</a></li>
        <li class="active"><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
</ul>

    <h4 class="active">我是一個4級標題</h4>
</body>
</html>

網頁效果：

3. 屬性選擇器

屬性選擇器，字面意思就是根據標籤中的屬性，選中當前的標籤。

語法：

         /*根據屬性查找*/
            /*[for]{
                color: red;
            }*/
            
            /*找到for屬性的等於username的元素 字體顏色設爲紅色*/
            /*[for='username']{
                color: yellow;
            }*/
            
            /*以....開頭  ^*/ 
            /*[for^='user']{
                color: #008000;
            }*/
            
            /*以....結尾   $*/
            /*[for$='vvip']{
                color: red;
            }*/
            
            /*包含某元素的標籤*/
            /*[for*="vip"]{
                color: #00BFFF;
            }*/
            
            /**/
            
            /*指定單詞的屬性*/
            label[for~='user1']{
                color: red;
            }
            
            input[type='text']{
                background: red;
            }

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*屬性選擇器*/
        [for]{
            color: red;
        }
        [type]{
            background-color: red;
        }
    </style>
</head>
<body>
    <from action="">
        <label for="username">用戶名</label>
        <input type="text">
        <input type="password">
    </from>
</body>
</html>

網頁效果：

注意：屬性選擇器僅限於在表單控件中*****

4. 僞類選擇器

僞類選擇器通常會用在超連接a標籤中，使用a標籤的僞類選擇器，咱們必定要遵循"愛恨準則"

LoVe HAte，因此a標籤不具備繼承性，不能繼承父類的。a標籤改顏色必定是做用於a的

/*沒有被訪問的a標籤的樣式*/
        .box ul li.item1 a:link{
            
            color: #666;
        }
        /*訪問事後的a標籤的樣式*/
        .box ul li.item2 a:visited{
            
            color: yellow;
        }
        /*鼠標懸停時a標籤的樣式*/
        .box ul li.item3 a:hover{
            
            color: green;
        }
        /*鼠標摁住的時候a標籤的樣式*/
        .box ul li.item4 a:active{
            
            color: yellowgreen;
        }

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*僞類選擇器*/
        /*設置a標籤默認樣式*/
        .box ul li.item a:link{
            color: #666;
        }
        /*a標籤點擊以後的樣式*/
        .box ul li.item a:visited{
            color: yellow;
        }
        /*懸浮樣式*/
        .box ul li.item a:hover{
            color: green;
            font-size: 30px;
        }
        /*點擊時效果*/
        .box ul li.item a:active{
            color: pink;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <div class="box">
        <ul>
            <li class="item">
                <a href="#">超連接</a>
            </li>
        </ul>
    </div>
</body>
</html>

網頁效果：

點擊以後：

鼠標懸停效果：

鼠標點擊效果：

5. 僞元素選擇器 *****

/*設置第一個首字母的樣式*/
        p:first-letter{
            color: red;
            font-size: 30px;
        }
        
/* 在....以前 添加內容   這個屬性使用不是很頻繁 瞭解  使用此僞元素選擇器必定要結合content屬性*/
        p:before{
            content:'alex';
        }
                
/*在....以後 添加內容，使用很是頻繁，必定要結合content屬性，裏面也能夠設置其餘的屬性
一般與我們後面要講到佈局 有很大的關聯（清除浮動）*/
        p:after{
            content:'&';
            color: red;
            font-size: 40px;
        }

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*設置第一個首字母的樣式*/
        p:first-letter{
            color: red;
            font-size: 30px;
        }
        /* 在....以前 添加內容 */
        p:before{
            content: 'CCTV';
        }
        /*這個很是重要，解決咱們後面浮動產生的問題（佈局）*/
        p:after{
            content: ".";
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        }
    </style>
</head>
<body>
    <p>董卿</p>
</body>
</html>

網頁效果：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。