CSS選擇器

時間 2019-11-20

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

原文原文鏈接

基礎選擇器

1. 標籤選擇器

標籤選擇器能夠選中全部的標籤元素，好比div,ul,li等等，無論標籤隱藏的多深，都能選中，選中的都是全部的，而不是某一個，全部是"共性"而不是"特性"css

<head>
    <style type="text/css">
        /*標籤選擇器*/
        body{
            background: red;
        }
    </style>
</head>

2. id選擇器

選中id的值
同一個頁面中的id不能重複
任何標籤均可以設置id
id的命名規範：要以字母，能夠有數字，下劃線，字母大小寫嚴格區分html

<head>
    <style type="text/css">
        /*id選擇器 已 # 號爲開頭*/
        #box{
            background-color: red;
        }
    </style>
</head>

3. 類選擇器

類：就是class，class與id很是類似，任何標籤均可添加類，類是能夠重複的，屬於歸類的概念佈局

同一個標籤中能夠攜帶多個類，用空格分開字體

<head>
    <style type="text/css">
        /*類選擇器 已 . 號爲開頭*/
        .lv{
            color: red;
        }
        
        .big{
            font-size: 40px;
        }
        
        .line{
            text-decoration: underline;
        }
    </style>
</head>

/* 公共類，共有屬性 */
<div>
    <p class="lv big">段落1</p>
    <p class="lv line">段落2</p>
    <p class="line big">段落3</p>
</div>

注意：code

不要用一個類將咱們的頁面寫完，這個標籤要攜帶多個類，共同設置樣式
每一個類要儘量的小，有公共類的概念，可以讓更多的標籤使用
儘量的用class，除非一些特殊狀況能夠用id

4. 通用選擇器

使用 * 選擇全部元素orm

*{
    color:red;
}

高級選擇器

1. 後代選擇器

使用空格表示後代選擇器。父元素的後代(包括兒子，孫子，重孫子等)htm

div p{
    color: red;
}
/* 從div全部後代中找 p 標籤，設置字體顏色爲紅色 */

2. 子元素選擇器

使用 > 表示子代選擇器。好比div>p,僅僅表示的是當前div元素選中的子代(不包含孫子....)元素p。blog

div>p {
  color: red;
}
/* 從div的直接子元素中找到p標籤，設置字體顏色爲紅色 */

3. 毗鄰選擇器

使用 + 號表示毗鄰選擇input

div+p {
  color: red;
}
/*找到全部緊挨在div後面的第一個p標籤，設置字體顏色爲紅色。*/

4. 弟弟選擇器

div~p {
  color: red;
}
/* 到全部div標籤後面同級的p標籤，設置字體顏色爲紅色。 */

5. 並集選擇器

多個選擇器之間使用逗號隔開，表示選中頁面中的多個標籤，一些共性的元素，可使用並集選擇器頁面佈局

/*並集選擇器*/
h3,a{
    color: #008000;
    text-decoration: none;
}

如百度頁面使用並集選擇器

/*使用此並集選擇器選中頁面中全部的標籤，頁面佈局的時候會使用*/
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
    margin: 0;
    padding: 0
}

6. 交集選擇器

使用.表示交集選擇器。第一個標籤必須是標籤選擇器，第二個標籤必須是類選擇器。
語法：div.active
若有一個<h4 class='active'></h4>這樣的標籤

h4{
    width: 100px;
    font-size: 14px;
}
.active{
    color: red;
    text-decoration: underline;
}

/* 交集選擇器 它表示二者選中以後元素共有的特性。*/
h4.active{
    background: #00BFFF;
}

7. 屬性選擇器

屬性選擇器一般用在表單控件中

/*根據屬性查找，查找全部title屬性，用中括號括起來*/
[title]{
    color: red;
}

/*找到全部title屬性值爲 hello 的元素*/
[title="hell"]{
    color: red;
}

/*屬性值以...開頭，title屬性值已hello開頭的元素*/
[title^="hello"]{
    color: red;
}

/*屬性值以...結尾*/
[title$="hello"]{
    color: red;
}

/*屬性值包含某元素*/
[title*="hello"]{
    color: red;
}

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

/*表單經常使用*/
input[type="text"]{
    backgroundcolor: red;
}

僞類選擇器

僞類選擇器通常用在超連接a標籤中，使用a標籤的僞類選擇器，必定要遵循"愛恨原則" LoVe HAte

僞類名稱	含義
a:link	未單擊訪問時超連接樣式
a:visited	單擊訪問後超連接樣式
a:hover	鼠標懸浮其上的超連接樣式
a:active	鼠標單擊未釋放的超連接樣式
input:focus	input輸入框獲取焦點時樣式

/*沒有訪問的超連接a標籤樣式：*/
a:link {
  color: blue;
}

/*訪問過的超連接a標籤樣式：*/
a:visited {
  color: gray;
}

/*鼠標懸浮在元素上應用樣式*/
a:hover {
  background-color: #eee; 
}

/*鼠標點擊瞬間的樣式：*/
a:active {
  color: green;
}

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

僞元素選擇器

<style type="text/css">
    
    /*設置第一個首字母的樣式*/
    p:first-letter{
        color: red;
        font-size: 30px;
    }
    
    /* 在....以前 添加內容   這個屬性使用不是很頻繁 瞭解  使用此僞元素選擇器必定要結合content屬性*/
    p:before{
        content:'alex';
    }
    
    /*在....以後 使用很是頻繁（清除浮動）*/
    p:after{
        content:'&';
        color: red;
        font-size: 40px;
    }
</style>