【靜態頁面架構】CSS之選擇器

佐珥玎發表於2018-08-28
架構CSS

CSS架構

  1. 基本選擇器
  • 元素選擇器:通過元素名稱定位頁面元素
  • 類選擇器:通過元素的class屬性定位頁面元素
  • ID選擇器:通過元素的ID屬性定位頁面元素;id屬性必須是唯一的
  • 萬用字元選擇器:匹配當前頁面中所有元素
<style>
    p{
        color: #2196f3;
    }
    /*元素選擇器
    通過元素名稱定位頁面元素
    *  定位頁面中一類元素*/
    #h2{
        color: #e53935;
    }
        /*id選擇器
        通過元素的ID屬性定位頁面元素
      * 特點 - 由於元素的id屬性必須是唯一的，定位的元素也是唯一的*/
     .div{
         color: green;
     }
        /*類選擇器 通過元素的class屬性定位頁面元素*/
     *{
         color: #ff6700;
     }
        /*萬用字元選擇器
        匹配當前頁面中所有元素
         * 用法 用於定義基礎樣式
         * 問題 可能影響頁面的載入速度*/
    </style>
</head>
<body>
<p>愛新覺羅</p>
<h2 id="h2">呼延覺羅</h2>
<div class="div">犬夜叉</div>
</body>
  1. 層級選擇器
  • 後代選擇器: 祖先 空格 後代 { 宣告塊 }後代元素包括父級元素
  • 子選擇器:父級 > 子級 { 宣告塊 }下一個子級元素一類
  • 相鄰兄弟選擇器:匹配指定元素的下一個相鄰兄弟元素
  • 普通兄弟選擇器:匹配指定元素的後面所有兄弟元素
    <style>
        #qyc h3{
            color: green;
        }
        /*
               後代選擇器
               * 用法 - 祖先 空格 後代 { 宣告塊 }
            */
        div > h3{
            color: #e53935;
        }
        /*
                子選擇器
                * 用法 - 父級 > 子級 { 宣告塊 }
             */
        #qyc + h3{
            color: #2196f3;
        }
        /*
                相鄰兄弟選擇器
                * 作用 - 匹配指定元素的下一個相鄰兄弟元素
             */
        #qyc ~ h3{
            color: yellow;
        }
        /*
               普通兄弟選擇器
               * 作用 - 匹配指定元素的後面所有兄弟元素
            */
    </style>
</head>
<body>
   <h3>犬夜叉</h3>
   <div id="qyc">
    <h3>七龍珠</h3>
    九龍珠
   </div>
   <h3>拳皇97</h3>
   <h3>拳皇97</h3>
   <h3>拳皇97</h3>
</body>
  1. 屬性選擇器:

[屬性名稱]通過屬性名稱來對屬性值的篩選

 <style>

        [name] {
            color: #2196f3;
        }
        /*屬性選擇器 - [屬性名稱]
           
           * 注意 - 一般情況下屬性選擇器配合基本選擇器使用*/
        [name=`p2`] {
            color: yellow;
        }
        /* [屬性名稱=屬性值] - 屬性值與元素中指定屬性的值完全一致*/
        [name^=`p`] {
            color: #e53935;
        }
        /*[屬性名稱^=屬性值] - 以屬性值以什麼開始*/
        [name$=`1`] {
            color: green;
        }
        /*[屬性名稱$=屬性值] - 以屬性值是以什麼結束的*/
        [class*=`l`] {
            color: #ff6700;
        }
        /*[屬性名稱*=屬性值] - 以屬性值包含什麼的*/
    </style>
</head>
<body>
<p id="p1" class="cla" >犬夜叉</p>
<p name="p2" class="cla">九龍珠</p>
<p id="p3" name="p31">海賊王</p>
<p id="p4" name="p41" class="cla">木葉村</p>
<h1 class="cla mp cla1">七龍珠</h1>
</body>
  1. 組合選擇器
  • 並集選擇器:中間要以逗號分開

結果是並集

  • 交集選擇器:

中間沒有逗號分開
結果是交集

<style>

        #p1, .cla {
            color: #2196f3;
        }
        /*多個選擇器並用，中間要以逗號分開
        結果是並集*/
        p[name] {
            color: #e53935;
        }
        /*多個選擇器並用，中間沒有逗號分開
        結果是交集*/
    </style>
</head>
<body>
<p id="p1">犬夜叉</p>
<p name="p2">七龍珠</p>
<p class="cla">海賊王</p>
</body>
  1. 偽類:是以在屬性名後面加上:hover進行滑鼠懸停
<style>
        h2 {
            color: #2196f3;
        }
        /* 通過 :hover 偽類(滑鼠懸停) */
        h2:hover {
            color: #e53935;
        }
    </style>
</head>
<body>
<h2>呼延覺羅</h2>
</body>
  1. 偽元素
  • 經常用的幾種偽元素:
  • 是以p（選擇器)::after(偽元素)
  • before和after:
<style>
        h2 {
            color: #2196f3;
        }
        /* ::before 偽元素 - 為指定元素新增第一個子元素 */
        h2::before {
            content: "<<";/* 內容為 << */
        }
        /* ::after 偽元素 - 為指定元素新增最後一個子元素 */
        h2::after {
            /*
                content屬性 - 用於為::before和::after新增指定內容
                * none值 - 表示不新增任何內容
                * normal值 - 類似於none
                * text值 - 表示普通文字內容
                * url值 - 表示引入一個外部資源(比如圖片等)
             */
            content: ">>";
        }
        
    </style>
</head>
<body>
<h2>愛新覺羅</h2>
</body>
  • first-letter:匹配指定元素文字內容中的第一個字母
<style>
        /* ::first-letter 偽元素 - 匹配指定元素文字內容中的第一個字母(漢字) */
        h2::first-letter {
            /*color: #2196f3;*/
            font-size: 48px;/*字型大小*/
        }
    </style>
</head>
<body>
<h2>I Love You.</h2>
<h2>愛新覺羅</h2>
</body>
  • first-line:匹配指定元素文字內容的第一行文字內容
<style>
        /* ::first-line 偽元素 - 匹配指定元素文字內容的第一行文字內容 */
        p::first-line {
            color: #2196f3;
        }
    </style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, accusantium amet at consequatur dolorem eos iure laudantium modi nostrum obcaecati odit pariatur praesentium quisquam recusandae unde. Debitis iste nisi obcaecati!</p>
</body>
  • selection:匹配指定元素被高亮的文字內容
<style>
        /* ::selection 偽元素 - 匹配指定元素被高亮的文字內容 */
        p::selection {
            color: #e53935;
            background-color: #00FFFF;<!--背景顏色設定-->
        }
    </style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, aspernatur consequatur consequuntur, dolorem doloremque facere id illo incidunt, magnam placeat provident sit suscipit! Cupiditate dolores earum fuga necessitatibus praesentium, ut!</p>
</body>

相關文章