css基礎選擇器

時間 2020-10-14

標籤佈局字體 spa 設計對象 blog utf-8 文檔 get 欄目 CSS 简体版

原文原文鏈接

選擇器（重點）

要想將CSS樣式應用於特定的HTML元素，首先須要找到該目標元素。在CSS中，執行這一任務的樣式規則部分被稱爲選擇器（選擇符）。佈局

標籤選擇器（元素選擇器）

標籤選擇器是指用HTML標籤名稱做爲選擇器，按標籤名稱分類，爲頁面中某一類標籤指定統一的CSS樣式。其基本語法格式以下：字體

標籤名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }  或者
元素名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

標籤選擇器最大的優勢是能快速爲頁面中同類型的標籤統同樣式，同時這也是他的缺點，不能設計差別化樣式。spa

案例：設計

<style>

/* 選擇器{樣式聲明} */

h5 {

color: red;

/* 修改了字體大小爲20像素，必須加px */

font-size: 20px;

}

p {

font-size: 15px;

}

</style>

<body>

<p>老母豬上樹了</p>

<p>高考錄取分數線</p>

</body>

類選擇器

類選擇器使用「.」（英文點號）進行標識，後面緊跟類名，其基本語法格式以下：對象

.類名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

 標籤調用的時候用 class=「類名」  便可。

類選擇器最大的優點是能夠爲元素對象定義單獨或相同的樣式。blog

小技巧：utf-8

1.長名稱或詞組可使用中橫線來爲選擇器命名。文檔

2.不要純數字、中文等命名，儘可能使用英文字母來表示。get

案例：it

<head>
<meta charset="utf-8">
<style>
span {
font-size: 100px;
}
.blue {
color: blue;
}
.red {
color: red;
}
.orange {
color: orange;
}
.green {
color: green;
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>

多類名選擇器

咱們能夠給標籤指定多個類名，從而達到更多的選擇目的。

注意：

1. 樣式顯示效果跟HTML元素中的類名前後順序沒有關係,受CSS樣式書寫的上下順序有關。
2. 各個類名中間用空格隔開。

多類名選擇器在後期佈局比較複雜的狀況下，仍是較多使用的。

<head>

<title>用類選擇器畫盒子</title>

<style>

/* 多類名使用 */

.red {

red;

}

.green {

green;

}

.box {

width: 100px;

height: 100px;

}

</style>

</head>

<body>

</body>

id選擇器

id選擇器使用「#」進行標識，後面緊跟id名，其基本語法格式以下：

#id名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

該語法中，id名即爲HTML元素的id屬性值，大多數HTML元素均可以定義id屬性，元素的id值是惟一的，只能對應於文檔中某一個具體的元素。

用法基本和類選擇器相同。

id選擇器和類選擇器區別

W3C標準規定，在同一個頁面內，不容許有相同名字的id對象出現，可是容許相同名字的class。

類選擇器（class）比如人的名字，是能夠屢次重複使用的，好比張偉王偉李偉李娜

id選擇器比如人的身份證號碼，全中國是惟一的，不得重複。只能使用一次。

id選擇器和類選擇器最大的不一樣在於使用次數上。

通配符選擇器

通配符選擇器用「*」號表示，他是全部選擇器中做用範圍最廣的，能匹配頁面中全部的元素。其基本語法格式以下：

* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

例以下面的代碼，使用通配符選擇器定義CSS樣式，清除全部HTML標記的默認邊距。

* {
  margin: 0;                    /* 定義外邊距*/
  padding: 0;                   /* 定義內邊距*/
}

僞類選擇器

僞類選擇器用於向某些選擇器添加特殊的效果。好比給連接添加特殊效果，好比能夠選擇第1個，第n個元素。

爲了和咱們剛纔學的類選擇器相區別，  類選擇器是一個點 好比 .demo {}   而咱們的僞類 用 2個點 就是 冒號 好比 :link{}

連接僞類選擇器

:link /* 未訪問的連接 */
:visited /* 已訪問的連接 */
:hover /* 鼠標移動到連接上 */
:active /* 選定的連接 */

注意寫的時候，他們的順序儘可能不要顛倒按照 lvha 的順序

a { /* a是標籤選擇器全部的連接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { /* :hover 是連接僞類選擇器鼠標通過 */
color: red; /* 鼠標通過的時候，由原來的灰色變成了紅色 */
}

結構(位置)僞類選擇器（CSS3)

:first-child :選取屬於其父元素的首個子元素的指定選擇器
:last-child :選取屬於其父元素的最後一個子元素的指定選擇器
:nth-child(n) ：匹配屬於其父元素的第 N 個子元素，不論元素的類型
:nth-last-child(n) ：選擇器匹配屬於其元素的第 N 個子元素的每一個元素，不論元素的類型，從最後一個子元素開始計數。 n 能夠是數字、關鍵詞或公式

li:first-child { /* 選擇第一個孩子 */
color: pink;
}
li:last-child { /* 最後一個孩子 */
color: purple;
}
li:nth-child(4) { /* 選擇第4個孩子 n 表明第幾個的意思 */
color: skyblue;
}

目標僞類選擇器(CSS3)

:target目標僞類選擇器 :選擇器可用於選取當前活動的目標元素

:target {
  color: red;
  font-size: 30px;}

相關標籤/搜索

每日一句

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