css選擇器

時間 2019-11-24

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

原文原文鏈接

目錄css

css:

css:

層疊樣式：定義如何顯示HTNL元素

當瀏覽器讀到一個樣式表，就會按照樣式表來對文檔進行格式化（渲染）

css 語法結構：

選擇器和聲明：聲明包括{屬性 1：屬性值1；屬性：屬性值；}

#結構 ：
選擇器  聲明
h1 {color : red ; font_size : 14px}

css註釋：

#單： /**/

#多：/*  多行 \r\n  .... */

css樣式引入方法：

#1.行內樣式
行內式是在標記的style屬性中設定CSS樣式
<p style="color: red">hello world</p>

#2.內部樣式
嵌入式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: red;
        }
    </style>
</head>

#3.外部樣式
外部樣式就是將css寫在一個單獨的文件中，而後在頁面進行引入便可
<link href="file_path" rel="stylesheet" type="text/css"/>

css選擇器：

一，基本選擇器：

元素選擇器
p {color: "red";}

ID選擇器
#i1 {
  background-color: red;
}
class選擇器
.c1 {
  font-size: 14px;
}
p.c1 {
  color: red;
通用選擇器
    * {
  color: white;
}

注意：

樣式類名不要用數字開頭（有的瀏覽器不認）。

標籤中的class屬性若是有多個，要用空格分隔。

組合選擇器：

#1.後代選擇器
/*li內部的a標籤設置字體顏色*/
li a {
  color: green;
}

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

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

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

屬性選擇器：

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

/*找到全部title屬性以hello開頭的元素*/
[title^="hello"] {
  color: red;
}

/*找到全部title屬性以hello結尾的元素*/
[title$="hello"] {
  color: yellow;
}

/*找到全部title屬性中包含（字符串包含）hello的元素*/
[title*="hello"] {
  color: red;
}

/*找到全部title屬性(有多個值或值以空格分割)中有一個值爲hello的元素：*/
[title~="hello"] {
  color: green;
}

分組和嵌套

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

div , p {color: red;} #div標籤和p標籤統一設置字體爲紅色


1嵌套：多種選擇器能夠混合起來使用

.cl p {color : red;}  #.c1類內部全部p標籤設置字體顏色爲紅色

僞類選擇器：

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

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

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

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

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

僞元素選擇器：

#1.first_letter : 首字母設置特殊樣式
p:first-letter {
  font-size: 48px;
  color: red;
}
    
#2.before  
/*在每一個<p>元素以前插入內容*/
p:before {
  content:"*";
  color:red;
}

#3.after

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

# before和after多用於清除浮動。
# css 樣式添加的