CSS選擇器

時間  2019-11-18
標籤 css 選擇器 欄目 CSS 简体版
原文   原文鏈接

CSS選擇器

1、基礎選擇器

一、通配選擇器

- {
    border: solid;
}
匹配文檔中全部標籤：一般指html、body及body中全部顯示類的標籤

二、標籤選擇器

div {
    background-color: yellow;
}
匹配文檔中全部與標籤名匹配的標籤：如div{}會匹配文檔中所有div，span{}會匹配文檔中全部span

三、類選擇器

.red {
    color: red;
}
匹配文檔中全部擁有class屬性且屬性值爲red的標籤：如<sup class="red"></sup> <sub class="red"></sub>均會被匹配

四、id選擇器

#div {
    text-align: center;
}
匹配文檔中全部擁有id屬性且屬性值爲div的標籤：如<div id="div"></div> <section id="div"></section>均會被匹配

2、基礎選擇器優先級

  • 基礎選擇器優先級大體與選擇器匹配範圍成反比，匹配範圍越小，優先級越高css

  • 基礎選擇器優先級大體與選擇器匹配精度成正比，匹配精度越高，優先級越高html

  • 基礎選擇器優先級：id選擇器 > 類選擇器 > 標籤選擇器 > 通配選擇器編程

v_hint：id選擇器必須保證單文檔的惟一性

3、組合選擇器

一、羣組選擇器

div, span, .red, #div {
    color: red;
}

  • 一次性控制多個選擇器編程語言

  • 選擇器之間以,隔開，每個選擇器位都可覺得任意合法選擇器或選擇器組合佈局

二、子代(後代)選擇器

子代選擇器用>鏈接
body > div {
    color: red;
}
後代選擇器用空格鏈接
.sup .sub {
    color: red;
}

  • 一次性控制一個選擇器(邏輯最後的那個選擇器)，前置位的選擇器爲修飾性選擇器ui

  • 每個選擇器位都可覺得任意合法選擇器或選擇器組合atom

  • 子代選擇器必須爲一級父子嵌套關係，後代選擇器能夠爲一級及多級父子嵌套關係spa

三、相鄰(兄弟)選擇器

相鄰選擇器用+鏈接
.d1 + .d2 {
    color: red;
}
兄弟選擇器用~鏈接
.d1 ~ .d3 {
    color: red;
}

  • 一次性控制一個選擇器(邏輯最後的那個選擇器)，前置位的選擇器爲修飾性選擇器htm

  • 每個選擇器位都可覺得任意合法選擇器或選擇器組合對象

  • 相鄰選擇器必須爲直接相鄰關係，兄弟選擇器能夠爲直接相鄰或間接相鄰關係

四、交集選擇器

<div class="d" id="dd"></div>
div.d#dd {
    color: red;
}
​
<div class="d1 d2 d3"></div>
.d1.d2.d3 {
    color: red;
}

4、組合選擇器優先級

  • 組合選擇器優先級與權值相關，權值爲權重和

  1. 權重對應關係

選擇器 權重
通配 1
標籤 10
類、屬性 100
id 1000
!important 10000

  • 選擇器權值比較，只關心權重和，不更新選擇器位置

  • 不一樣級別的選擇器間不具有可比性：1個類選擇器優先級高於n個標籤選擇器的任意組合

5、屬性選擇器

  • [attr]：匹配擁有attr屬性的標籤

  • [attr=val]：匹配擁有attr屬性，屬性值爲val的標籤

  • [attr^=val]：匹配擁有attr屬性，屬性值以val開頭的標籤

  • [attr$=val]：匹配擁有attr屬性，屬性值以val結尾的標籤

  • [attr*=val]：匹配擁有attr屬性，屬性值包含val的標籤

==============================================================================================================================================================

筆記

基礎選擇器:

<!DOCTYPE html>
<html>
<head>
　　<meta charset="UTF-8">
　　<title>css選擇器</title>
　　<style type="text/css">
　　/*基礎選擇器*/
　　/*1.通配選擇器(*): 匹配全部(html,body,body中的全部子標籤)(具備顯示效果的全部標籤)*/
　　/** {
　　border: solid;
　　}*/

　　/*2.標籤選擇器(標籤名):匹配指定標籤名的對應全部標籤*/
　　div {
　　width: 100px;
　　height: 100px;
　　background-color: red;
　　}
　　section {
　　width: 200px;
　　height: 200px;
　　background-color: yellow;
　　}

　　/*3.類選擇器(.):匹配指定類名對應的全部標籤*/
　　.dd {
　　font-size: 50px;
　　}

　　/*4.id選擇器(#):匹配指定id名對應的惟一標籤*/
　　/*html,css都是標記語言,全部對id能夠進行多匹配,但js是編程語言.只能匹配到一個*/
　　#ele {
　　color: blue;
　　}

　　/*總結:*/
　　/*1.通配選擇器通常用於總體reset操做(reset操做:清除系統自定義樣式)*/
　　/*
　　* {
　　margin: 0;
　　}
　　*/
　　/*2.標籤與id選擇器運用場景並很少,通常不提倡採用id選擇器進行佈局*/
　　/*3.類選擇器爲佈局首選(建議基本全用class選擇器進行佈局)*/

　　/*基本選擇器優先級:id > class > 標籤 > 通配*/
　　/*目標對象:<div class="d" id="ele">d_2</div>*/
　　* {
　　text-align: left;
　　}
　　div {
　　text-align: right;
　　}
　　.d {
　　text-align: center;
　　}
　　#ele {
　　text-align: left;
　　}

</style>
</head>
<body>
　　<div class="dd">d_1</div>
　　<section>s_1</section>
　　<div class="d" id="ele">d_2</div>
　　<section class="dd">s_2</section>
　　<span></span>
</body>
</html>

 

組合選擇器:

<!DOCTYPE html>
<html>
<head>
　　<meta charset="UTF-8">
　　<title>組合選擇器</title>
　　<style type="text/css">
　　/*組合選擇器*/
　　/*特性:每一個選擇器位能夠爲任意基本選擇器或選擇器組合*/

　　/*羣組選擇器: ,隔開*/
　　/*控制多個*/
　　div, .s, section {
　　color: red;
　　}
　　/*子代選擇器: >鏈接*/
　　body > div {
　　color: orange;
　　}
　　/*div > a {
　　text-decoration: none;
　　}*/
　　/*後代選擇器: 空格鏈接*/
　　/*包含子代選擇器*/
　　body a {
　　text-decoration: none;
　　}
　　/*相鄰選擇器: +鏈接*/
　　span + section {
　　background-color: pink;
　　}
　　/*兄弟選擇器: ~鏈接*/
　　/*包含相鄰選擇器*/
　　div ~ section {
　　background-color: brown;
　　}

　　/*交集選擇器*/
　　/*便是選擇器1又是選擇器2*/
　　i.s {
　　color: yellow;
　　}

　　/*多類名選擇器*/
　　.d1 {
　　color: blue;
　　}
　　.d1.d2 {
　　color: tan;
　　}
　　.d1.d2.d3 {
　　color: #780;
　　}
　　</style>
</head>
<body>
　　<!-- div{div}+span{span}+section{section} -->
　　<div>div</div>
　　<span class="s">span</span>
　　<section>section</section>
　　<div>
　　<a href="">a標籤</a>
　　</div>
　　<i class="s">iiii</i>
　　<div class="d1 d2 d3">呵呵</div>

</body>
</html>

 組合選擇器優先級:

<!DOCTYPE html>
<html>
<head>
　　<meta charset="UTF-8">
　　<title>組合選擇器優先級</title>
　　<style type="text/css">
　　/*同目錄結構下*/
　　/*1.子代與後代優先級相同*/
　　/*body > div == body div*/
　　/*2.相鄰與兄弟優先級相同*/
　　/*div + span == div ~ span*/
　　/*3.最終樣式採用邏輯後的樣式值*/

　　/*不一樣目錄結構下*/
　　/*1.根據選擇器權值進行比較*/
　　/*2.權值爲標籤權重之和*/
　　/*3.權重: *:1 div:10 class:100 id:1000 !important:10000 */
　　/*4.權值比較時,關心的是值大小,不關心位置與具體選擇器名*/
　　/*5.id永遠比class大,class永遠比標籤大*/
　　/*注:控制的是同一目標,才具備可比性*/
　　/*div>div>div>div>...>div {} 11 < .div{}*/

　　/*10*/
　　div {
　　color: red;
　　}
　　/*20*/
　　div div {
　　color: yellow;
　　}
　　/*大於一切標籤*/
　　.d2 {
　　color: blue;
　　}
　　/*.d2抵消,剩權重10*/
　　div .d2 {
　　color: orange;
　　}
　　/*等價於div .d2,權值相同,位置決定*/
　　.d1 div {
　　color: pink;
　　}
　　/*又多10*/
　　div .d1 div {
　　color: tan;
　　}
　　/*不具備可比性*/
　　div .d1 > div{
　　color: green;
　　}
　　/*高於一切class及標籤*/
　　#dd1 div {
　　color: #000;
　　}
</style>
</head>
<body>
　　<!-- div>.d1>#dd1>div>.d2 -->
　　<div>
　　　　<div class="d1">
　　　　　　<div id="dd1">
　　　　　　　　<div>
　　　　　　　　　　<div class="d2">12345</div>
　　　　　　　　</div>
　　　　　　</div>
　　　　　　<!-- <div id="dd2">
　　　　　　　　<div>
　　　　　　　　　　<div class="d2">12345</div>
　　　　　　　　</div>
　　　　　　</div> -->
　　　　</div>
　　</div>
</body>
</html>

 

屬性選擇器:

<!DOCTYPE html>
<html>
<head>
　　<meta charset="UTF-8">
　　<title>屬性選擇器</title>
　　<style>
　　　　.d2 {
　　　　color: red;
　　　　}
　　　　/*屬性選擇器權重 == class選擇器權重*/
　　　　/*有屬性class的全部標籤*/
　　　　[class] {
　　　　color: orange;
　　　　}

　　　　/*有屬性class且值爲d2的全部標籤(值不影響權重)*/
　　　　[class="d2"] {
　　　　color: pink;
　　　　}

　　　　/*是div且class='d2',增長了權重*/
　　　　div[class='d2'] {
　　　　color: blue;
　　　　}

　　　　/*屬性以什麼開頭: ^= */
　　　　/*屬性以什麼結尾: $= */
　　　　/*屬性模糊匹配: *= */
　　　　[class ^= 'he'] {
　　　　color: yellow;
　　　　}
　　　　[class $= 'ld'] {
　　　　color: tan;
　　　　}
　　　　[class *= 'ow'] {
　　　　color: cyan;
　　　　}
　　　　[class][dd] {
　　　　color: brown;
　　　　}

　　</style></head><body> 　　<!-- div.d1>.d2 --> 　　<div class="d1">00000 　　<div class="d2">12345</div> 　　<!-- dd與do爲自定義屬性 --> 　　<div class="helloworld" dd do="do something">helloworld</div> 　　</div></body></html>

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程