css 選擇器

時間 2019-11-30

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

原文原文鏈接

一基本選擇器

#一、做用：
根據指定的id名稱，在當前界面中找到對應的惟一一個的標籤，而後設置屬性

#二、格式
id名稱 {
    屬性：值;
}

#三、注意點：
1、在企業開發中若是僅僅只是爲了設置樣式，一般不會使用id，在前端開發中id一般是留給js使用的
二、每一個標籤均可以設置惟一一個id，id就至關於人/標籤的身份證，所以在同一界面內id毫不能重複
三、引用id必定要加#
四、id的命名只能由字符、數字、下劃線組成，且不能以數字開頭，更不能是html關鍵字如p，a，img等

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            color: aqua;
        }
        #p2 {color: blueviolet}

        #p3 {color: blue}
        #p4 {color:salmon}
    </style>
</head>
<body>

<h1>天淨沙·秋思</h1>
<p id="p1">錦瑟無故五十弦，一弦一柱思華年。</p>
<p id="p2">莊生曉夢迷蝴蝶，望帝春心託杜鵑。</p>
<p id="p3">滄海月明珠有淚，藍田日暖玉生煙。</p>
<p id="p4">此情可待成追憶，只是當時已惘然。</p>
</body>
</html>

實例

二、類選擇器css

#一、做用：根據指定的類名稱，在當前界面中找到對應的標籤，而後設置屬性

#二、格式：
.類名稱 {
    屬性：值;
}
#3 class 能夠選擇多個樣式一塊兒使用。 id只能選擇一個樣式。

#4、注意點：
1、類名就是專門用來給某個特定的標籤設置樣式的
二、每一個標籤均可以設置一個或多個class（空格分隔），class就至關於人/標籤的名稱，所以同一界面內class能夠重複
3、引用class必定要加點.
四、類名的命名規則與id的命名規則相同

第一行與第三行的顏色都是紅色
第一行與第二行的字體大小都是50px
第二行與第三行內容有個下劃線

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>id選擇器</title>
    <style>
        .p1 {
            color: red;
        }
        .p2 {
            font-size: 50px;
        }
        .p3 {
            text-decoration: underline;
        }

    </style>
</head>

<body>
<p class="p1 p2">第一行內容</p>
<p class="p2 p3">第二行內容</p>
<p class="p1 p3">第三行內容</p>
</body>

</html>

實例

三、標籤選擇器html

#一、做用：根據指定的標籤名稱，在當前界面中找到全部該名稱的標籤，而後設置屬性

#二、格式：
標籤名稱 {
    屬性：值;
}

#三、注意點：
1、只要是HTML的標籤都能當作標籤選擇器
2、標籤選擇器選中的是當前界面中的全部標籤,而不能單獨選中某一標籤
三、標籤選擇器，不管嵌套多少層都能選中
4.head裏面寫的是P標籤那body裏面全部的p標籤都是須要使用這種的，你若是本身指定了，那就按照本身指定的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標籤選擇器</title>

    <style type="text/css">
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>EGON美麗的外表下其實隱藏着一顆騷動的心</p>
    <ul>
        <li>
            <ul>
                <li>
                    <ul>
                        <li>
                            <p>這顆心叫作七巧玲瓏心，男人吃了會流淚，女人吃了會懷孕</p>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

</body>
</html>

View Code

四、通配符選擇器前端

#一、做用：選擇全部標籤

#二、格式：
* {
    屬性：值；
}

#三、注意點：
1、在企業開發中通常不會使用通配符選擇器
    理由是：
    因爲通配符選擇器是設置界面上全部的標籤的屬性，
    因此在設置以前會遍歷全部的標籤
    若是當前界面上的標籤比較多，那麼性能就會比較差

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通配符選擇器</title>

    <style type="text/css">

        * {
            color: red;
        }

    </style>
</head>
<body>
    <h1 >我是標題</h1>
    <p >我是段落</p>
    <a href="#">我是超連接</a>
</body>
</html>

View Code

二後代選擇器

/*li內部的a標籤設置字體顏色*/
li a {
  color: green;
}

兒子選擇器

/*選擇全部父級是 <div> 元素的 <p> 元素*/
div>p {
  font-family: "Arial Black", arial-black, cursive;
}

毗鄰選擇器

/*選擇全部緊接着<div>元素以後的<p>元素*/
div+p {
  margin: 5px;
}

弟弟選擇器

/*i1後面全部的兄弟p標籤*/
#i1~p {
  border: 2px solid royalblue;
}

屬性選擇器

/*用於選取帶有指定屬性的元素。*/
p[title] {
  color: red;
}
/*用於選取帶有指定屬性和值的元素。*/
p[title="213"] {
  color: green;
}

分組和嵌套

分組

當多個元素的樣式相同的時候，咱們沒有必要重複地爲每一個元素都設置樣式，咱們能夠經過在多個選擇器之間使用逗號分隔的分組選擇器來統一設置元素樣式。瀏覽器

例如：

div, p {
  color: red;
}

上面的代碼爲div標籤和p標籤統一設置字體爲紅色。ide

一般，咱們會分兩行來寫，更清晰:

div,
p {
  color: red;
}

嵌套

多種選擇器能夠混合起來使用，好比：.c1類內部全部p標籤設置字體顏色爲紅色。性能

.c1 p {
  color: red;
}

僞類選擇器

/* 未訪問的連接 */
a:link {
  color: #FF0000
}

/* 已訪問的連接 */
a:visited {
  color: #00FF00
} 

/* 鼠標移動到連接上 */
a:hover {
  color: #FF00FF
} 

/* 選定的連接 */ 
a:active {
  color: #0000FF
}

/*input輸入框獲取焦點時樣式*/
input:focus {
  outline: none;
  background-color: #eee;
}

僞元素選擇器

first-letter

經常使用的給首字母設置特殊樣式：字體

p:first-letter {
  font-size: 48px;
  color: red;
}

before

/*在每一個<p>元素以前插入內容*/
p:before {
  content:"*";
  color:red;
}

after

/*在每一個<p>元素以後插入內容*/
p:after {
  content:"[?]";
  color:blue;
}

選擇器的優先級

CSS繼承

繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係的。繼承是一種機制，它容許樣式不只能夠應用於某個特定的元素，還能夠應用於它的後代。例如一個body定義了的字體顏色值也會應用到段落的文本中。spa

body {
  color: red;
}

此時頁面上全部標籤都會繼承body的字體顏色。然而CSS繼承性的權重是很是低的，是比普通元素的權重還要低的0。code

咱們只要給對應的標籤設置字體顏色就可覆蓋掉它繼承的樣式。htm

p {
  color: green;
}

此外，繼承是CSS重要的一部分，咱們甚至不用去考慮它爲何可以這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。

選擇器的優先級

咱們上面學了不少的選擇器，也就是說在一個HTML頁面中有不少種方式找到一個元素而且爲其設置樣式，那瀏覽器根據什麼來決定應該應用哪一個樣式呢？

實際上是按照不一樣選擇器的權重來決定的，具體的選擇器權重計算方式以下圖：

除此以外還能夠經過添加 !import方式來強制讓樣式生效，但並不推薦使用。由於若是過多的使用!import會使樣式文件混亂不易維護。

相關標籤/搜索

每日一句

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

css 選擇器

一 基本選擇器

二 後代選擇器

兒子選擇器

毗鄰選擇器

弟弟選擇器

屬性選擇器

分組和嵌套

分組

嵌套

僞類選擇器

僞元素選擇器

first-letter

before

after

選擇器的優先級

CSS繼承

選擇器的優先級

一基本選擇器

二後代選擇器