CSS選擇器(一)

CSS是什麼

CSS，指的是「Cascading Style Sheet（層疊樣式表）」，是用來控制網頁外觀的一門技術。HTML、CSS、JavaScript構成了前端網頁的三個必要組成部分，其中HTML用於控制網頁結構，CSS用於控制網頁外觀，JavaScript用於實現網頁交互。css

CSS的引入方式

CSS分爲內部樣式表、外部樣式表和行內樣式表，不一樣的樣式表有不一樣的引入方式。html

內部樣式表前端

內部樣式表通常採用再head標籤內部嵌套style標籤,而後在style標籤中定義css樣式。瀏覽器

<head>
    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>CSS基礎</title>

    <!-- <link rel="stylesheet" href="CSS基礎.css"> -->

    <!-- 內部樣式表 -->
    <style type="text/css">        h1{color: bisque;}     </style>
</head>

<body>
    <h1 id="h1style">CSS基礎</h1>
</body>
複製代碼

外部樣式表
外部樣式表顧名思義就是將須要的CSS文件建立到當前網頁文件之外的某一個位置，而後再經過特定方式將CSS文件引入到當前網頁文件中，相似Java中的import過程。markdown

1.首先須要建立CSS文件，咱們在當前網頁文件的同級目錄下建立一個名爲CSS基礎的CSS文件，而且定義CSS樣式。oop

CSS基礎.CSSui

h1{color:bisque;}
複製代碼

2.接下來引入CSS文件，在html文件中引入剛剛建立的CSS文件。spa

<head>
    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>CSS基礎</title>

    <!-- 外部樣式表 -->
    <link rel="stylesheet" href="CSS基礎.css">
</head>

<body>
    <h1 id="h1style">CSS基礎</h1>
</body>
複製代碼

行內樣式表
行內樣式表就是在須要修飾的html標籤中使用元素自己自帶的style屬性來定義一些CSS樣式，這種方式目前使用的並很少，其用法以下code

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>CSS基礎</title>
</head>

<body>
    <!-- 行內樣式表 -->
    <h1 id="h1style" style="color: bisque;">CSS基礎</h1>
</body>
複製代碼

剛纔介紹的三種引入CSS的方式其實現的效果都是同樣的，只是使用頻率有所不一樣，從代碼的可讀性和耦合性角度看使用外部導入的方式更有利於代碼的維護。orm

id和calss屬性

上面的示例中無論使用的那種方式引入CSS，在CSS內部都是使用的h1這個標籤而後在{}裏邊定義CSS樣式的，因而可知標籤自己能夠做爲選擇元素的一種方式，能夠稱之爲標籤選擇器。另外每一個標籤的id和class屬性也能夠用在CSS中用來選擇元素。

id屬性
id屬性就比如咱們的身份證號，在整個html文檔中是惟一的，原則上講一個html文檔中不能同時存在兩個id相同的元素，由於若是咱們使用這個id做爲一個css選擇器，那麼css中定義的外觀效果將同時影響多個元素。好比下面一段代碼

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>CSS基礎</title>

    <!-- 外部樣式表 -->

    <link rel="stylesheet" href="CSS基礎.css">

</head>

<body>
    <h1 id="h1style">CSS基礎</h1>

    <h2 id="h1style">CSS基礎</h2>
</body>
複製代碼

瀏覽器運行效果:

雖然瀏覽器能夠正常解析並顯示，可是依然不建議將多個元素設置相同的id值。

class屬性 class屬性就比如咱們身份證上的名字，身份證號是惟一的，可是兩我的卻能夠重名的。

<body>
    <h1 class="h1style">CSS基礎</h1>
    <h2 class="h1style">CSS基礎</h2>
</body>
複製代碼

CSS選擇器

選擇器的概念

仍是上面的示例代碼，咱們想要把h1標籤下的CSS基礎這幾個字顏色變成紅色，整個過程當中第一步必然是要先找到h1這個標籤而且選中h1標籤。找到而且選中標籤的過程就是經過選擇器來實現的。CSS中定義了多種不一樣的選擇器，主要有:標籤選擇器、id選擇器、class選擇器、後代選擇器、羣組選擇器等，不一樣選擇器的實現方式不一樣，可是其最終目的都是要達到改變外觀顯示的目的。

選擇器的基本格式

選擇器{
    屬性:值;
    ...
    屬性:值;
}
複製代碼

括號內部使用鍵值對錶示不一樣的樣式值，每一個樣式值之間用;號分割

選擇器分類

CSS選擇器大體分爲如下幾類:

標籤選擇器標籤名{}

僞標籤選擇器標籤名::before{}

類選擇器 .類名{}

屬性選擇器 [屬性名]{}

僞類選擇器類名:hover{}

ID選擇器 #id{}

組合選擇器

否認選擇器 :not(){}

通用選擇器 *{}

CSS選擇器不一樣選擇器的具體用法請看CSS選擇器(二)