CSS_選擇器

twilight0402發表於2017-01-23
CSS

版權宣告：本文為博主原創文章，轉載請註明出處。 https://blog.csdn.net/twilight_karl/article/details/54696007

類選擇器

class 屬性規定元素的類名（classname）
類選擇器以一個點號顯示

.center {text-align: center}

class類似一個標記。
“p.類名”表示標記了該類的p標籤的樣式，這個類的樣式只能被p使用。即

p class=”標記名”

而”.類名”表示元素也可以基於它們的類而被選擇，所有標籤都可以包含這個類

*.important {color:red;}
.important {color:red;}
以上兩者相等

一個標籤可以包含多個類，包含多個類時用空格隔開，不分先後

當兩個類有各自的樣式，可以有同時包含兩個類時才出現的樣式

.important.warning {background:silver;}

<!--例項-->
<html>
    <head>
        <title>網頁標題</title>
        <meta name="keywords" content=""/>
        <meta name="description" content=""/>
        <meta http-equiv="content-type" content="type/html;charset=htf-8"/>
        <style type="text/css">
            <!--元素基於它們的類而被選擇-->
            p.try1 {
                color:blue;
            }

            <!--所有元素都可使用-->
            .try2 {
                text-align:center;
            }
        </style>
    </head>

    <body>
    <p>這是單獨的段落</p>
    <p class="try1 try2">這是在"class=try1 try2"的段落</p>
    <h1 class="try2">這是標題，class=try2</h1>

    </body>
</html>

class

<!--兩個標記同時存在時的特殊樣式-->
<html>
    <head>
        <title>網頁標題</title>
        <meta name="keywords" content=""/>
        <meta name="description" content=""/>
        <meta http-equiv="content-type" content="type/html;charset=htf-8"/>
        <style type="text/css">
        .s1{
            color:red;
        }
        .s2{
            font-size:20px;
        }
        .s1.s2{
            font-style:italic;
        }
        </style>
    </head>
    <body>
    <p class="s1"> 段落s1</p>
    <p class="s2"> 段落s2</p>
    <p class="s1 s2"> 段落s1 s2 </p>

    </body>
</html>

class 也可被用作派生選擇器：

        <style type="text/css">
            .s1 h1 {
                font-size:10px;
            }
            .s1 h2 {
                    background: #666;
            }
        </style>

ID選擇器

id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。
id 選擇器以 “#” 來定義。例如：

#red {color:red;}
#green {color:green;}

在現代佈局中，id 選擇器常常用於建立派生選擇器。

#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}

上面的樣式只會應用於出現在 id 是 sidebar 的元素內的段落。
ID區分大小寫
即使被標註為特定ID的元素只能在文件中出現一次，這個 id 選擇器作為派生選擇器也可以被使用很多次：
例如：

        <style type="text/css">
        #s h2{
            color:red;
        }
        #s h1{
            color:blue;
        }
        </style>
<html>
    <head>
        <title>網頁標題</title>
        <meta name="keywords" content=""/>
        <meta name="description" content=""/>
        <meta http-equiv="content-type" content="type/html;charset=htf-8"/>
        <style type="text/css">
        #red {
            color:red;
        }
        </style>
    </head>
    <body>
    <p id="red">這是ID=red的段落</p>
    <p>這是普通段落</p>

    </body>
</html>

id選擇器

偽元素選擇器

a:link 正常樣式
a:hover 滑鼠放上的樣式
a:active 滑鼠按下時的樣式
a:visited 訪問過的樣式

派生選擇器

後代選擇器

li strong {
    font-style: italic;
    font-weight: normal;
  }

以上的程式碼表示在列表（li）中的strong標記所具有的樣式。當strong單獨使用時不具有以上樣式。
類似於

<html>
    <head>
        <title>網頁標題</title>
        <meta name="keywords" content=""/>
        <meta name="description" content=""/>
        <meta http-equiv="content-type" content="type/html;charset=htf-8"/>

        <style type="text/css">
        li strong {
            font-style: italic;
            font-weight: normal;
        }
        </style>

    </head>
    <body>
        <strong>This is a normal Strong</strong>
        <ul>
            <li><strong>This is a Strong in li</strong></li>
        </ul>
    </body>
</html>

後代選擇器

<html>
    <head>
        <title>網頁標題</title>
        <meta name="keywords" content=""/>
        <meta name="description" content=""/>
        <meta http-equiv="content-type" content="type/html;charset=htf-8"/>

        <style type="text/css">
        strong {
             color: red;
             }

        h2 {
             color: red;
             }

        h2 strong {
             color: blue;
             }
        </style>

    </head>
    <body>
        <strong>這是普通的strong</strong>
        <h2>這是普通的h2</h2>
        <h2><strong>這是h2中的strong</strong></h2>

    </body>
</html>

後代選擇器2

子元素選擇器

h1 > strong {color:red;}
只將h1下一層的strong使用該樣式。”>”兩端可以沒有空格

與後代選擇器的區別：
個人認為可以將所有標籤看成一個樹結構
後代選擇器的範圍包含孩子和孫子節點。
子元素選擇器的範圍只包含孩子節點。

<html>
    <head>
        <title>網頁標題</title>
        <meta name="keywords" content=""/>
        <meta name="description" content=""/>
        <meta http-equiv="content-type" content="type/html;charset=htf-8"/>

        <style type="text/css">
            h1 > strong {
                color:red;
            }
        </style>
    </head>
    <body>

    <h1>這是<strong>第一個</strong></h1>
    <h1>這是<p><strong>第二個</strong></p>strong</h1>
    </body>
</html>

子元素選擇器

相鄰兄弟選擇器

h1+p{clolr:blue;}
二者有相同父元素則稱為兄弟。
緊貼在h1後的p，並且h1和p具有相同父節點。則使用該樣式

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {color:blue;}
</style>
</head>

<body>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
</html>

相鄰兄弟選擇器

Tips

HTML div標籤

可定義文件中的分割槽或節（division/section）,把文件分割為獨立的、不同的部分。它可以用作嚴格的組織工具，並且不使用任何格式與其關聯。


相關文章