8-[CSS]-選擇器

時間 2019-11-08

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

原文原文鏈接

1.選擇器

首先來講一下，什麼是選擇器。在一個HTML頁面中會有不少不少的元素，不一樣的元素可能會有不一樣的樣式，某些元素又須要設置相同的樣式，選擇器就是用來從HTML頁面中查找特定元素的，找到元素以後就能夠爲它們設置樣式了。選擇器爲樣式規則指定一個做用範圍。css

2.基礎選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本選擇器</title>
    <style type="text/css">
        /*CSS的選擇器分爲：1.基本選擇器  2.高級選擇器*/



        /*1.標籤選擇器
                能夠選中全部的標籤元素，好比div li ul p
                無論標籤藏的多深，都能選中
                選中的是全部的，而不是某一個，是共性
        */
        p {
          color: red;
        }

        /*2.id選擇器：
                id是惟一的，同一個頁面id不能重複
                任何的標籤均可以設置id
                id命名規範，字母數字下劃線，嚴格區分大小寫aaAA
        */
        #user {
          background-color: yellow;
        }

        /*3.類選擇器
                1.所謂類 就是class  . class與id很是類似 任何的標籤均可以加類
                    可是類是能夠重複    歸類
                2.同一個標籤中能夠攜帶多個類 用空格隔開

        類的使用 可以決定前端工程師的css水平到底有多牛逼？
        必定要有」公共類「的概念
        */
        .c1 {
          color: blue;
        }
        .c2{
            background-color: red;
        }
        .c3{
            font-size: 12px;
        }



        /*通用選擇器*/
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div>
        <p>我是哪個段落</p>
    </div>

    <div>
        <label for="user">用戶名</label>
        <input type="text" id="user" />
        <label for="USER"> 密碼</label>
        <input type="text" id="USER" />
    </div>

    <div class="c1">
        我有c1
    </div>

    <div class="c1 c2">
        <h2>我是c1 c2類</h2>
    </div>

    <div class="c2 c3">
        <h3>我有c2 c3類</h3>
    </div>

</body>
</html>

3.類選擇器：解耦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>類選擇器</title>
    <style type="text/css">
        /*總結：解耦，耦合

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

        玩好了類 就等於玩好了css中的1/2

        到底使用id仍是用class？
        答案：儘量的用class。除非一些特殊狀況能夠用id

        緣由：id通常是用在js的。也就是說  js是經過id來獲取到標籤
        */
        .lv1{
            color: green;
            text-decoration: underline;
        }
        .lv2{
            font-size:24px;
            text-decoration: underline;
        }
        .lv3{
            color: green;
            font-size:24px;
        }

        .c-green{
            color: green;
        }

        .font-size{
            font-size:24px;
        }

        .line{
            text-decoration: underline;
        }




    </style>
</head>


<body>
    <div>
        <p class="lv1">段落1</p>
        <p class="lv2">段落2</p>
        <p class="lv3">段落3</p>
    </div>

    <div>
        <p class="c-green line">解耦1</p>
        <p class="font-size line">解耦2</p>
        <p class="font-size c-green">解耦3</p>
    </div>
</body>
</html>

4.高級選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高級選擇器</title>
    <style type="text/css">
        /*後代選擇器 在css中使用很是頻繁*/
        div  p{
            color: red;
        }


        .container div p{
            color: green;
        }

        /*子代選擇器,必須是父子關係*/

        .container2>p{
            color: #f0ad4e;
        }

        /*交集選擇器 必須是h3 必須有active屬性*/
        h3{
            width:300px;
            color: red;
        }

        .active{
            font-size: 30px;
        }

        h3.active{
            background-color: yellow;
        }

        /*分組選擇器
        並集選擇器（組合）  相比通用選擇器，效率更好
                   設置多個標籤中的統同樣式
        */
        body,div,ol,ul{
            margin:0;
            padding: 0;
        }

        /*通用選擇器： 性能比較差*/
        *{
            margin: 0;
            padding: 0;
        }

    </style>
</head>
<body>
    <div>
        <p>this is 段落</p>
    </div>

    <div class="container">
        <div>
            <p>this is parg</p>
        </div>
    </div>

    <div class="container2">
        <p>this is 父子關係</p>
    </div>


    <h3>我是h3</h3>
    <span class="active">我是h3</span>
    <h3 class="active">我是h3</h3>

</body>
</html>

5.屬性選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>屬性選擇器</title>
    <style type="text/css">
        label[for]{
            color: red;
            font-size: 20px;
        }

        label[for='pwd']{
            color: yellow;
        }

        /*以...開頭*/
        label[for^='vip']{
            font-size: 30px;
        }
        /*以...結尾*/
        label[for$='p2']{
            font-size: 20px;
        }
        label[for*='ser']{
            color: green;
        }

        input[type='text']{
            background-color: purple;
        }

    </style>
</head>
<body>

    <!-- 屬性選擇器 一般在 表單控件中 使用比較頻繁-->
    <div class="box">
        <form action="">
            <label for="user">用戶名：</label>
            <input type="text" name="" id="user">
            <label for="pwd">密碼：</label>
            <label for="vip1">vip1</label>
            <label for="vip2">vip2</label>
            <label for="user2">用戶名2：</label>
            <label for="user3">用戶名3：</label>
        </form>
    </div>
</body>
</html>

6.僞類選擇器

　　（1）a標籤的love hate

　　（2）nth-child用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>僞類選擇器</title>
    <style type="text/css">

        /*1.僞類選擇器*/
        /*'愛恨原則' love hate*/
        /*沒有被訪問的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;
        }

        input:focus {
          outline: none;
          background-color: darkred;
        }

        /*選中第一個元素*/
        div ul li:first-child{
            font-size: 20px;
            color: red;
        }
        /*選中最後一個元素*/
        div ul li:last-child{
            font-size: 20px;
            color: yellow;
        }

        /*選中當前指定的元素  數值從1開始*/
        div ul li:nth-child(3){
            font-size: 30px;
            color: purple;
        }

        /*n表示選中全部 從0開始的  0的時候表示沒有選中*/
        div ul li:nth-child(n){
            font-size: 40px;
            color: red;
        }

        /*偶數*/
        div ul li:nth-child(2n){
            font-size: 50px;
            color: gold;
        }
        /*奇數*/
        div ul li:nth-child(2n-1){
            font-size: 50px;
            color: yellow;
        }
        /*隔幾換色  隔行換色*/
        div ul li:nth-child(5n+1){
            font-size: 50px;
            color: red;
        }


    </style>
</head>
<body>

    <div class="box">
        <ul>
            <li class="item1">
                1
                <a href="#">張三</a>
            </li>
            <li class="item2">
                2
                <a href="#">李四</a>
            </li>
            <li class="item3">
                3
                <a href="#">王八</a>
            </li>
            <li class="item4">
                4
                <a href="#">趙六</a>
            </li>
            <li class="item4">
                5
                <a href="#">趙六</a>
            </li>
            <li class="item4">
                6
                <a href="#">趙六</a>
            </li>
            <li class="item4">
                7
                <a href="#">趙六</a>
            </li>
            <li class="item4">
                8
                <a href="#">趙六</a>
            </li>
            <li class="item4">
                9
                <a href="#">趙六</a>
            </li>
            <li class="item4">
                10
                <a href="#">趙六</a>
            </li>
        </ul>
    </div>

</body>
</html>

7.僞元素選擇器

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

        /*設置第一個首字母的樣式*/
        div:first-letter{
            color: red;
            font-size:22px;
        }

        /* 在....以前 添加內容   這個屬性使用不是很頻繁 瞭解
            使用此僞元素選擇器必定要結合content屬性
        */
        p:before{
            content:'alex';
        }



        /*在....以後 使用很是頻繁 一般與我們後面要講到佈局 有很大的關聯（清除浮動）*/
        p:after{
            content: '&&&&';
            color: red;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>
        我是一個段落
    </div>

    <p>
        我是一個段落2
    </p>
</body>
</html>

8.css的繼承性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>繼承性</title>
    <style type="text/css">
        
        .father{
            
            font-size: 30px;
            background-color: green;
        }
        .child{
            color: purple;
        }

    </style>
</head>
<body>
    
    <!-- 繼承：給父級設置一些屬性，子級繼承了父級的該屬性，這就是咱們的css中的繼承

    有一些屬性是能夠繼承下來 ： color 、 font-*、 text-*、line-*   文本元素

    像一些盒子元素，定位的元素（浮動，絕對定位，固定定位）不能繼承
     -->
    <div class="father" id="egon">
        <div class="child">
            <p>alex</p>
        </div>    
    </div>
    <p>小馬哥</p>
</body>
</html>

9.選擇器的優先級

咱們如今已經學過了不少的選擇器，也就是說咱們有不少種方法從HTML中找到某個元素，那麼就會有一個問題：若是我經過不用的選擇器找到了相同的一個元素，而且設置了不一樣的樣式，那麼瀏覽器究竟應該按照哪個樣式渲染呢？也就是不一樣的選擇器它們的優先級是怎樣的呢？html

是先來後到呢仍是後來居上呢？通通不是，它是按照下面的選擇器的權重規則來決定的。前端

注意：瀏覽器

還有一種不講道理的!import方式來強制讓樣式生效，可是不推薦使用。由於大量使用!import的代碼是沒法維護的。前端工程師

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        p{
            color: red !important;
            font-size: 30px;
        }
        .spe1{
            color: yellow ;
            font-size: 40px;
        }
        .spe2{
            color: green;
            font-size: 40px;
        }

        ul{
            color: red;
        }
        .list{
            color: purple !important;
        }
    </style>
</head>
<body>

    <!-- ！important:設置權重爲無限大 
        !important 不影響繼承來的權重，隻影響選中的元素

    -->
    
    <div>
        <p class="spe1 spe2">我是什麼顏色</p>
        <p class="spe2 spe1">我是什麼顏色</p>
    </div>

    <div class="list">
        <ul>
            <li>
                我是一個li標籤
            </li>
        </ul>
    </div>
</body>
</html>

！import

10.CSS的層疊性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>層疊性</title>
    <style type="text/css">
        /*1  0  0*/
        #box{
            color: red;
        }
        /*0  1  0*/
        .container{
            color: yellow;
        }
        /*0  0  1*/
        p{
            color: purple;
        }
    </style>
</head>
<body>
    
    <!-- 
        層疊性： 權重的標籤覆蓋掉了權重小的標籤，說白了 ，就是被幹掉了
        權重： 誰的權重大，瀏覽器就會顯示誰的屬性
        
        誰的權重大？  很是簡單   數數
                
        id的數量  class的數量  標籤的數量


     -->
    <p id="box" class="container">
        猜猜我是什麼顏色
    </p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        
        /*2 0 1*/
        #box1 #box2 p{
            color: yellow;
        }
        /*1 1 1*/
        #box2 .wrap3 p{
            color: red;
        }
        /*1 0 3*/
        div div #box3 p{
            color: purple;
        }
        
        /*0 3 4*/
        div.wrap1 div.wrap2 div.wrap3 p{
            color: blue;
        }


    </style>
</head>
<body>

    <div id='box1' class="wrap1">
        <div id="box2" class="wrap2">
            <div id="box3" class="wrap3">
                <p>再來猜猜我是什麼顏色？</p>
            </div>
        </div>
    </div>
</body>
</html>

View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        
        
        
        /*1 1 1 */
        /*#box2 .wrap3 p{
            color: yellow;
        }*/
        /*1 1 1*/
        /*#box1 .wrap2 p{
            color: red;
        }*/
        
        /* 0*/

        /*繼承來的*/
        #box1 #box2 .wrap3{
            color: red;
        }
         .wrap1 #box2 .wrap3{
            color: green;
        }


        
            
        /*選中來的*/
        /*1 1 1*/
        /*#box2 .wrap3 p{
            color: green;
        }*/



    </style>
</head>
<body>

    <!-- 當權重同樣的時候 是之後設置的屬性爲準。  前提權重同樣 ，後來者居上 

        繼承來的屬性 權重爲0


        總結：
        1.先看標籤元素有沒有被選中，若是選中了，就數數 （id,class,標籤的數量） 誰的權重大 就顯示誰的屬性。權重同樣大，後來者居上
        2.若是沒有被選中標籤元素，權重爲0。
        若是屬性都是被繼承下來的 權重都是0 。權重都是0:"就近原則" ： 誰描述的近，就顯示誰的屬性

    -->
    <div id='box1' class="wrap1">
        <div id="box2" class="wrap2">
            <div id="box3" class="wrap3">
                <p>再來猜猜我是什麼顏色？</p>
            </div>
        </div>
    </div>
</body>
</html>

層疊性相同的權重處理，繼承的權重爲0

相關標籤/搜索

每日一句

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