當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

前端基础-CSS的各种选择器的特点以及CSS的三大特性

發(fā)布時(shí)間：2023/12/2 HTML 33 豆豆

生活随笔收集整理的這篇文章主要介紹了前端基础-CSS的各种选择器的特点以及CSS的三大特性小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

一、基本選擇器
二、后代選擇器、子元素選擇器
三、兄弟選擇器
四、交集選擇器與并集選擇器
五、序列選擇器
六、屬性選擇器
七、偽類(lèi)選擇器
八、偽元素選擇器
九、 CSS三大特性

一、基本選擇器

1、id選擇器

#1、作用：根據(jù)指定的id名稱(chēng)，在當(dāng)前界面中找到對(duì)應(yīng)的唯一一個(gè)的標(biāo)簽，然后設(shè)置屬性#2、格式 id名稱(chēng) {屬性：值; }#3、注意點(diǎn)： 1、在企業(yè)開(kāi)發(fā)中如果僅僅只是為了設(shè)置樣式，通常不會(huì)使用id，在前端開(kāi)發(fā)中id通常是留給js使用的 2、每個(gè)標(biāo)簽都可以設(shè)置唯一一個(gè)id，id就相當(dāng)于人/標(biāo)簽的身份證，因此在同一界面內(nèi)id絕不能重復(fù) 3、引用id一定要加# 4、id的命名只能由字符、數(shù)字、下劃線(xiàn)組成，且不能以數(shù)字開(kāi)頭，更不能是html關(guān)鍵字如p，a，img等 <!DOCTYPE html> <html> <head> <meta charset="utf-8"><title>id選擇器</title><style>#p1 {color: red;}#p2 {color: green;}#p3 {color: blue;}</style> </head><body> <p id="p1">大多數(shù)人的帥，都是浮在表面的，是外表的帥</p> <p id="p2">而多多，不僅具備外表帥，內(nèi)心更是帥了一逼</p> <p id="p3">多多就是我，我就是多多</p> </body></html> id選擇器實(shí)例

2、類(lèi)選擇器

#1、作用：根據(jù)指定的類(lèi)名稱(chēng)，在當(dāng)前界面中找到對(duì)應(yīng)的標(biāo)簽，然后設(shè)置屬性#2、格式： .類(lèi)名稱(chēng) {屬性：值; }#3、注意點(diǎn)： 1、類(lèi)名就是專(zhuān)門(mén)用來(lái)給某個(gè)特定的標(biāo)簽設(shè)置樣式的 2、每個(gè)標(biāo)簽都可以設(shè)置一個(gè)或多個(gè)class（空格分隔），class就相當(dāng)于人/標(biāo)簽的名稱(chēng)，因此同一界面內(nèi)class可以重復(fù) 3、引用class一定要加點(diǎn). 4、類(lèi)名的命名規(guī)則與id的命名規(guī)則相同 <!DOCTYPE html> <html> <head> <meta charset="utf-8"><title>類(lèi)選擇器</title><style>.p1 {color: red;}.p2 {color: green;}.p3 {color: blue;}</style> </head><body> <p class="p1">大多數(shù)人的帥，都是浮在表面的，是外表的帥</p> <p class="p2">而多多，不僅具備外表帥，內(nèi)心更是帥了一逼</p> <p class="p3">多多就是我，我就是多多</p> </body></html> 類(lèi)選擇器實(shí)例

3、標(biāo)簽選擇器

#1、作用：根據(jù)指定的標(biāo)簽名稱(chēng)，在當(dāng)前界面中找到所有該名稱(chēng)的標(biāo)簽，然后設(shè)置屬性#2、格式：標(biāo)簽名稱(chēng) {屬性：值; }#3、注意點(diǎn)： 1、只要是HTML的標(biāo)簽都能當(dāng)做標(biāo)簽選擇器 2、標(biāo)簽選擇器選中的是當(dāng)前界面中的所有標(biāo)簽,而不能單獨(dú)選中某一標(biāo)簽 3、標(biāo)簽選擇器，無(wú)論嵌套多少層都能選中 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>標(biāo)簽選擇器</title><style type="text/css">p {color: red;}</style> </head> <body><p>多多美麗的外表下其實(shí)隱藏著一顆騷動(dòng)的心</p><ul><li><ul><li><ul><li><p>這顆心叫做七巧玲瓏心，男人吃了會(huì)流淚，女人吃了會(huì)懷孕</p></li></ul></li></ul></li></ul></body> </html> 標(biāo)簽選擇器

4、通配符選擇器

#1、作用：選擇所有標(biāo)簽#2、格式： * {屬性：值； } #3、注意點(diǎn)： 1、在企業(yè)開(kāi)發(fā)中一般不會(huì)使用通配符選擇器理由是：由于通配符選擇器是設(shè)置界面上所有的標(biāo)簽的屬性，所以在設(shè)置之前會(huì)遍歷所有的標(biāo)簽如果當(dāng)前界面上的標(biāo)簽比較多，那么性能就會(huì)比較差 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>通配符選擇器</title><style type="text/css">* {color: red;}</style> </head> <body><h1 >我是標(biāo)題</h1><p >我是段落</p><a href="#">我是超鏈接</a> </body> </html> 通配選擇器實(shí)例

二、后代選擇器、子元素選擇器

1、后代選擇器

#1、作用：找到指定標(biāo)簽的所有后代（兒子，孫子，重孫子、、、）標(biāo)簽，設(shè)置屬性#2、格式：標(biāo)簽名1 xxx {屬性：值;}#3、注意： 1、后代選擇器必須用空格隔開(kāi) 2、后代不僅僅是兒子，也包括孫子、重孫子 3、后代選擇器不僅僅可以使用標(biāo)簽名稱(chēng)，還可以使用其他選擇器比如id或class 4、后代選擇器可以通過(guò)空格一直延續(xù)下去 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>后代選擇器</title><style type="text/css">div p {color: red;}#id1 li p {font-size: 50px;}div ul li a {font-size: 100px;color: green;}</style> </head> <body><p>我是body下的段落1</p><div id="id1" class="part1"><p>我是div下的段落1</p><p>我是div下的段落2</p><ul><li class="aaa"><p class="ccc">我是ul>li下的段落1</p><p class="ddd">我是ul>li下的段落</p><a href="">點(diǎn)我啊1</a></li><li><a href="#">點(diǎn)我啊2</a></li></ul></div><p>我是body下的段落2</p> </body> </html> 后代選擇器實(shí)例

2、子元素選擇器

#1、作用：找到制定標(biāo)簽的所有特定的直接子元素，然后設(shè)置屬性#2、格式：標(biāo)簽名1>標(biāo)簽名2 {屬性：值;}先找到名稱(chēng)叫做"標(biāo)簽名稱(chēng)1"的標(biāo)簽，然后在這個(gè)標(biāo)簽中查找所有直接子元素名稱(chēng)叫做"標(biāo)簽名稱(chēng)2"的元素#3、注意： 1、子元素選擇器之間需要用>符號(hào)鏈接，并且不能有空格比如div >p會(huì)找div標(biāo)簽的所有后代標(biāo)簽，標(biāo)簽名為">p" 2、子元素選擇器只會(huì)查找兒子，不會(huì)查找其他嵌套的標(biāo)簽 3、子元素選擇器不僅可以用標(biāo)簽名稱(chēng)，還可以使用其他選擇器,比如id或class 4、子元素選擇器可以通過(guò)>符號(hào)一直延續(xù)下去 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>后代選擇器</title><style type="text/css">body>p {color: green;}div>p {color: red;}.aaa>a {font-size: 100px;}div>ul>li>.ddd {color: blue;}</style> </head> <body><p>我是body下的段落1</p><div id="id1" class="part1"><p>我是div下的段落1</p><p>我是div下的段落2</p><ul><li class="aaa"><p class="ccc">我是ul>li下的段落1</p><p class="ddd">我是ul>li下的段落2</p><a href="">點(diǎn)我啊1</a></li><li><a href="#">點(diǎn)我啊2</a></li></ul></div><p>我是body下的段落2</p> </body> </html> 子元素選擇器

三、兄弟選擇器

1、相鄰兄弟選擇器，CSS2推出

#1、作用：給指定選擇器后面緊跟的那個(gè)選擇器選中的標(biāo)簽設(shè)置屬性#2、格式選擇器1 選擇器2 {屬性：值; }#3、注意點(diǎn)： 1、相鄰兄弟選擇器必須通過(guò) 號(hào)鏈接 2、相鄰兄弟選擇器只能選中你緊跟其后的那個(gè)標(biāo)簽，不能選中被隔開(kāi)的標(biāo)簽 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>兄弟選擇器</title><style type="text/css">h1 p {font-size: 50px;} /* 相鄰兄弟解釋器*/ </style> </head> <body><h1 >我是標(biāo)題1</h1><p>我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p><h1>我是標(biāo)題2</h1><p>我是段落</p></body> </html> 相鄰兄弟解釋器演示

2、通用兄弟選擇器，CSS3推出

#1、作用：給指定選擇器后面的所有選擇器中的所有標(biāo)簽設(shè)置屬性#2、格式：選擇器1~選擇器2 {屬性：值; }#3、注意點(diǎn)： 1、通用兄弟選擇器必須用~來(lái)鏈接 2、通用兄弟選擇器選中的是指選擇器后面的某個(gè)選擇器選中的所有標(biāo)簽無(wú)論有沒(méi)有被隔開(kāi)，都可以被選中 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>通用兄弟選擇器</title><style type="text/css">h1~p {color: red;} /*通用兄弟選擇器*/</style> </head> <body><h1 >我是標(biāo)題1</h1><p>我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p><h1>我是標(biāo)題2</h1><p>我是段落</p></body> </html> 通用兄弟解釋器實(shí)例

四、交集選擇器與并集選擇器

1、交集選擇器

#1、作用：給所有選擇器選中的標(biāo)簽中，相交的那部分標(biāo)簽設(shè)置屬性#2、格式：選擇器1選擇器2 {屬性：值;}#3、注意： 1、選擇器與選擇器之間沒(méi)有任何鏈接符號(hào) 2、選擇器可以使用標(biāo)簽名稱(chēng)、id、class 3、交集選擇器在企業(yè)開(kāi)發(fā)中并不多見(jiàn)，了解即可因?yàn)?#xff1a;p.part1 完全可以用.part1取代 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>后代選擇器</title><style type="text/css">p.part1 {color: red;}p#p1{font-size: 100px;}</style> </head> <body><p class="part1">我是段落</p><p id="p1">我是段落</p><p class="part1">我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p></body> </html> 交集選擇器實(shí)例

2、并集選擇器

#1、作用：給所有滿(mǎn)足條件的標(biāo)簽設(shè)置屬性#2、格式：選擇器1,選擇器2 {屬性：值;}#3、注意： 1、選擇器與選擇器之間必須用逗號(hào)來(lái)鏈接 2、選擇器可以使用標(biāo)簽名稱(chēng)、id、class <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>并集選擇器</title><style type="text/css">.part1,h1,a {color: red;}</style> </head> <body><h1>哈哈啊</h1><p class="part1">我是段落</p><p id="p1">我是段落</p><p class="part1">我是段落</p><a href="#">我是我</a><p>我是段落</p><p>我是段落</p><p>我是段落</p></body> </html> 并集選擇器實(shí)例

五、序列選擇器

#1、作用： css3中新推出的選擇器中，最具代表性的的9個(gè)，又稱(chēng)為序列選擇器，過(guò)去的選擇器中要選中某個(gè)必須加id或class，學(xué)習(xí)了這9個(gè)后，不用加id或class，想選中同級(jí)別的第幾個(gè)就選第幾個(gè)#2、格式 #2.1 同級(jí)別 :first-child p:first-child 同級(jí)別的第一個(gè) :last-child p:last-child 同級(jí)別的最后一個(gè) :nth-child(n) 同級(jí)別的第n個(gè) :nth-last-child(n) 同級(jí)別的倒數(shù)第n個(gè)#2.2 同級(jí)別同類(lèi)型 :first-of-type 同級(jí)別同類(lèi)型的第一個(gè) :last-of-type 同級(jí)別同類(lèi)型的最后一個(gè) :nth-of-type(n) 同級(jí)別同類(lèi)型的第n個(gè) :nth-last-of-type(n) 同級(jí)別同類(lèi)型的倒數(shù)第n個(gè)#2.3 其他 :only-of-type 同類(lèi)型的唯一一個(gè) :only-child 同級(jí)別的唯一一個(gè) #1、同級(jí)別的第一個(gè) #1.1 示范一 p:first-child { color: red; } 代表：同級(jí)別的第一個(gè)，并且第一個(gè)要求是一個(gè)p標(biāo)簽<p>我是段落1</p> <p>我是段落2</p> <p>我是段落3</p> <p>我是段落4</p> <p>我是段落5</p> <div><p>我是段落6</p> </div>這樣的話(huà)第一個(gè)p和div中的第一個(gè)p都變成紅色，#1.2 示范二 p:first-child {color: red; } 代表：同級(jí)別的第一個(gè)，并且第一個(gè)要求是一個(gè)p標(biāo)簽<h1>w我是標(biāo)題</h1> <p>我是段落1</p> <p>我是段落2</p> <p>我是段落3</p> <p>我是段落4</p> <p>我是段落5</p> <div><p>我是段落6</p> </div>這樣的話(huà)只有div中的第一個(gè)p變紅，因?yàn)樵谟性赿iv內(nèi)同一級(jí)別的第一個(gè)才是p注意點(diǎn)：:fist-child就是第一個(gè)孩子，不區(qū)分類(lèi)型#2、同級(jí)別的最后一個(gè) p:last-child {color: red; } 代表：同級(jí)別的最后一個(gè)，并且最后一個(gè)要求是一個(gè)p標(biāo)簽<h1>我是標(biāo)題</h1> <p>我是段落1</p> <p>我是段落2</p> <p>我是段落3</p> <p>我是段落4</p> <p>我是段落5</p> <div><p>我是段落6</p> </div> <p>我是段落7</p> 這樣的話(huà)只有6跟7都變紅#3、同級(jí)別的第n個(gè) p:nth-child(3) {color: red; } 代表：同級(jí)別的第3個(gè)，并且第3個(gè)要求是一個(gè)p標(biāo)簽<h1>我是標(biāo)題</h1> <p>我是段落1</p> <p>我是段落2</p> <p>我是段落3</p> <p>我是段落4</p> <p>我是段落5</p> <div><p>我是段落6.1</p><p>我是段落6.2</p><h1>我是標(biāo)題</h1> </div> <p>我是段落7</p> 這樣的話(huà)只有“我是段落2”變紅#4、同級(jí)別的倒數(shù)第n個(gè) p:nth-last-child(3) {color: red; } 代表：同級(jí)別的倒數(shù)第3個(gè)，并且第3個(gè)要求是一個(gè)p標(biāo)簽 <h1>我是標(biāo)題</h1> <p>我是段落1</p> <p>我是段落2</p> <p>我是段落3</p> <p>我是段落4</p> <p>我是段落5</p> <div><p>我是段落6.1</p><p>我是段落6.2</p><h1>我是標(biāo)題</h1> </div> <p>我是段落7</p> 這樣的話(huà)只有“我是段落6.1”和“我是段落5”被選中同級(jí)別示范 <h1>我是標(biāo)題</h1> <p>我是段落1</p> <p>我是段落2</p> <p>我是段落3</p> <p>我是段落4</p> <p>我是段落5</p> <div><p>我是段落6.1</p><p>我是段落6.2</p><h1>我是標(biāo)題</h1> </div> <p>我是段落7</p> #1、同級(jí)別同類(lèi)型的第一個(gè) p:first-of-type {color: red; } “我是段落1”和“我是段落6.1”被選中#2、同級(jí)別同類(lèi)型的最后一個(gè) p:last-of-type {color: red; } “我是段落7”和“我是段落6.2”被選中#3、同級(jí)別同類(lèi)型的第n個(gè) p:nth-of-type(2) {color: red; } “我是段落2”和“我是段落6.2”被選中#4、同級(jí)別同類(lèi)型的倒數(shù)第n個(gè) p:nth-last-of-type(2) {color: red; } “我是段落5”和“我是段落6.1”被選中同級(jí)別同類(lèi)型實(shí)例 #1、同類(lèi)型的唯一一個(gè) p:only-of-type {color: red; }<h1>我是標(biāo)題</h1> <div><p>我是段落6.1</p><p>我是段落6.2</p><h1>我是標(biāo)題</h1> </div> <p>我是段落7</p>“我是段落7“被選中#2、同級(jí)別的唯一一個(gè) p:only-child {color: red; }<h1>我是標(biāo)題</h1> <div><p>我是段落6.1</p> </div> <p>我是段落7</p> “我是段落6.1”被選中其他情況

六、屬性選擇器

#1、作用：根據(jù)指定的屬性名稱(chēng)找到對(duì)應(yīng)的標(biāo)簽，然后設(shè)置屬性該選擇器，最常用于input標(biāo)簽#2、格式與具體用法： [屬性名]其他選擇器[屬性名][屬性名=值][屬性名^=值][屬性名$=值][屬性名*=值]例1：找到所有包含id屬性的標(biāo)簽[id]例2：找到所有包含id屬性的p標(biāo)簽p[id]例3：找到所有class屬性值為part1的p標(biāo)簽p[class="part1"]例4：找到所有href屬性值以https開(kāi)頭的a標(biāo)簽a[href^="https"]例5：找到所有src屬性值以png結(jié)果的img標(biāo)簽img[src$="png"]例6：找到所有class屬性值中包含part2的標(biāo)簽[class*="part"] <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>屬性選擇器</title><style type="text/css">[id] {color: red;}p[id] {font-size: 30px;}p[class="part1"] {color: green;}a[href^="https"] {font-size: 50px;}img[src$="jpg"] {width: 300px;}[class*="part"] {text-decoration: line-through;}</style> </head> <body><h1 id="id1">哈哈啊</h1><p id="id2">我是段落</p><p class="part1">我是段落</p><p class="xxx part2 yyy">我是段落</p><a href="#">我是我</a><a href="http://www.baidu.com">http://www.baidu.com</a><a href="https://www.baidu.com">https://www.baidu.com</a><img src="2.jpg" alt="加載失敗"><img src="1.jpg1" alt="加載失敗"><p>我是段落</p><p>我是段落</p></body> </html> 具體演示

七、偽類(lèi)選擇器

#1、作用：常用的幾種偽類(lèi)選擇器。#1.1 沒(méi)有訪(fǎng)問(wèn)的超鏈接a標(biāo)簽樣式： a:link {color: blue; }#1.2 訪(fǎng)問(wèn)過(guò)的超鏈接a標(biāo)簽樣式： a:visited {color: gray; }#1.3 鼠標(biāo)懸浮在元素上應(yīng)用樣式： a:hover {background-color: #eee; }#1.4 鼠標(biāo)點(diǎn)擊瞬間的樣式： a:active {color: green; }#1.5 input輸入框獲取焦點(diǎn)時(shí)樣式： input:focus {outline: none;background-color: #eee; }#2 注意： 1 a標(biāo)簽的偽類(lèi)選擇器可以單獨(dú)出現(xiàn)，也可以一起出現(xiàn) 2 a標(biāo)簽的偽類(lèi)選擇器如果一起出現(xiàn)，有嚴(yán)格的順序要求，否則失效link，visited，hover，active 3 hover是所有其他標(biāo)簽都可以使用的 4 focus只給input標(biāo)簽使用 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>偽類(lèi)選擇器</title><style type="text/css">a:link {color: #cccccc;}a:visited {color: #55BBBB;}a:hover {color: green;}a:active {color: red;}input:hover {outline: none;background-color: #cccccc;}</style> </head> <body> <a href="https://www.baidu.com/a/b/c/d.html">點(diǎn)擊我</a> <input type="text"> </body> </html> 偽類(lèi)選擇器實(shí)例

八、偽元素選擇器

#1、常用的偽元素。 #1.1 first-letter：雜志類(lèi)文章首字母樣式調(diào)整例如： p:first-letter {font-size: 48px; }#1.2 before 用于在元素的內(nèi)容前面插入新內(nèi)容。例如：p:before {content: "*";color: red; } 在所有p標(biāo)簽的內(nèi)容前面加上一個(gè)紅色的*。#1.3 after 用于在元素的內(nèi)容后面插入新內(nèi)容。例如：p:after {content: "?";color: red; } 在所有p標(biāo)簽的內(nèi)容后面加上一個(gè)藍(lán)色的?。 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>偽元素選擇器</title><style type="text/css">p:first-letter {font-size: 50px;}/*兩個(gè)冒號(hào)與一個(gè)是一樣的，老版本用的是一個(gè)冒號(hào)，考慮到兼容性推薦使用一個(gè)冒號(hào)*/a::after {content: "?";color: red;}a:before {content: "！";color: green;}</style> </head> <body> <p>英雄不問(wèn)出處，流氓不論歲數(shù)</p> <a href="#" class="help">多多是干什么的</a> <a href="#" class="help">多多是干什么的</a> <a href="#" class="help">多多是干什么的</a> </body> </html> 偽元素演示

九、 CSS三大特性

1、繼承性

#1、定義：給某一個(gè)元素設(shè)置一些屬性，該元素的后代也可以使用，這個(gè)我們就稱(chēng)之為繼承性#2、注意：1、只有以color、font-、text-、line-開(kāi)頭的屬性才可以繼承2、a標(biāo)簽的文字顏色和下劃線(xiàn)是不能繼承別人的3、h標(biāo)簽的文字大小是不能繼承別人的，會(huì)變大，但是會(huì)在原來(lái)字體大小的基礎(chǔ)上變大ps:打開(kāi)瀏覽器審查元素可以看到一些inherited from。。。的屬性 #3、應(yīng)用場(chǎng)景：通常基于繼承性統(tǒng)一設(shè)置網(wǎng)頁(yè)的文字顏色，字體，文字大小等樣式 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>后代選擇器</title><style type="text/css">div {color: red;font-size: 50px;}</style> </head> <body><div><h1>我是標(biāo)題</h1><p><a href="#">多多最帥</a></p><ul><li>導(dǎo)航1</li><li>導(dǎo)航2</li><li>導(dǎo)航2</li></ul> </div><div><div><p>aaaa</p></div><div><p>bbbb</p></div> </div></body> </html> 繼承性演示

2、層疊性

#1、定義：CSS全稱(chēng)：Cascading StyleSheet層疊樣式表，層疊性指的就是CSS處理沖突的一種能力，即如果有多個(gè)選擇器選中了同一個(gè)標(biāo)簽?zāi)敲磿?huì)有覆蓋效果#2、注意： 1、層疊性只有在多個(gè)選擇器選中了同一個(gè)標(biāo)簽，然后設(shè)置了相同的屬性，才會(huì)發(fā)生層疊性 ps：通過(guò)谷歌瀏覽器可以查看到，一些屬性被劃掉了 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>層疊性</title><style type="text/css">p {color: red;}.ppp {color: green;}</style> </head> <body><p class="ppp">我是段落</p></body> </html> 層疊性演示

3、優(yōu)先級(jí)

#1、定義：當(dāng)多個(gè)選擇器選中同一個(gè)標(biāo)簽，并且給同一個(gè)標(biāo)簽設(shè)置相同的屬性時(shí)，如何層疊就由優(yōu)先級(jí)來(lái)確定#2、優(yōu)先級(jí)整體優(yōu)先級(jí)從高到底：行內(nèi)樣式>嵌入樣式>外部樣式行內(nèi)樣式并不推薦使用，所以我們以嵌入為例來(lái)介紹優(yōu)先級(jí)

1、大前提：直接選中 > 間接選中(即繼承而來(lái)的)

#1、以下為直接選中<style type="text/css">#id1 {color: red;}.ppp {color: green;}p {color: blue;}</style>#2、以下為間接選中<style type="text/css">ul {color: yellow;}</style><ul><li><p id="id1" class="ppp">我是span</p></li></ul> 直接選中優(yōu)先級(jí)間接選中示范

2、如果都是間接選中，那么誰(shuí)離目標(biāo)標(biāo)簽比較近，就聽(tīng)誰(shuí)的

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>優(yōu)先級(jí)</title><style type="text/css">/*離目標(biāo)近，顯示的當(dāng)然是red*/li {color: red;}/*離目標(biāo)遠(yuǎn)*/ul {color: yellow;}</style> </head> <body><ul><li><p id="id1" class="ppp">我是span</p></li></ul> </body> </html> 都是間接選中，誰(shuí)離目標(biāo)近誰(shuí)優(yōu)先示范

3、如果都是直接選中，并且都是同類(lèi)型的選擇器，那么就是誰(shuí)寫(xiě)的在后面就聽(tīng)誰(shuí)的

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>優(yōu)先級(jí)</title><style type="text/css">p {color: red;}/*同樣都是標(biāo)簽選擇器，誰(shuí)寫(xiě)在后面誰(shuí)生效*/p {color: yellow;}</style> </head> <body><ul><li><p id="id1" class="ppp">我是span</p></li></ul> </body> </html> 同樣都是標(biāo)簽選擇器，誰(shuí)寫(xiě)后面誰(shuí)生效示范

4、如果都是直接選中，并且是不同類(lèi)型的選擇器，那么就會(huì)按照選擇器的優(yōu)先級(jí)來(lái)層疊

? ? id > 類(lèi) > 標(biāo)簽 > 通配符(也算直接選中) > 繼承 > 瀏覽器默認(rèn)（即沒(méi)有設(shè)置任何屬性）

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>優(yōu)先級(jí)</title><style type="text/css">/*打開(kāi)瀏覽器依次去掉優(yōu)先級(jí)高的來(lái)進(jìn)行驗(yàn)證*/#id1 {color: red;}.ppp {color: green;}p {color: blue;}* {color: yellow;}li {color: #7e1487;}</style> </head> <body><ul><li><p id="id1" class="ppp">我是span</p></li></ul> </body> </html> 演示

5、優(yōu)先級(jí)之!important

#1、作用：還有一種不講道理的!import方式來(lái)強(qiáng)制指定的屬性的優(yōu)先級(jí)提升為最高，但是不推薦使用。因?yàn)榇罅渴褂?import的代碼是無(wú)法維護(hù)的。#2、注意：1、!important只能用于直接選中，不能用于間接選中2、!important只能用于提升被指定的屬性的優(yōu)先級(jí)，其他屬性的優(yōu)先級(jí)不會(huì)被提升3、!important必須寫(xiě)在屬性值分號(hào)的前面 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>優(yōu)先級(jí)</title><style type="text/css">/*打開(kāi)瀏覽器依次去掉優(yōu)先級(jí)高的來(lái)進(jìn)行驗(yàn)證*/#id1 {color: red;}.ppp {color: green;}p {color: blue;}* {color: yellow !important;}li {color: #7e1487;}</style> </head> <body><ul><li><p id="id1" class="ppp">我是span</p></li></ul> </body> </html> 了解就行，不推薦用

6、優(yōu)先級(jí)之權(quán)重計(jì)算

#1、強(qiáng)調(diào) 如果都是直接選中，并且混雜了一系列其他的選擇器一起使用時(shí)，則需要通過(guò)計(jì)算機(jī)權(quán)重來(lái)判定優(yōu)先級(jí)#2、計(jì)算方式 #1、id數(shù)多的優(yōu)先級(jí)高 #2、id數(shù)相同，則判定類(lèi)數(shù)多的優(yōu)先級(jí)高 #3、id數(shù)、class數(shù)均相同，則判定標(biāo)簽數(shù)多的優(yōu)先級(jí)高 #4、若id數(shù)、class數(shù)、標(biāo)簽數(shù)均相同，則無(wú)需繼續(xù)往下計(jì)算了，誰(shuí)寫(xiě)在后面誰(shuí)的優(yōu)先級(jí)高 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>優(yōu)先級(jí)</title><style type="text/css">#id1 #id2 #id3 .ppp{color: red;}#id2 #id3.aaa p{color: purple;}#id1.ccc>.bbb>.aaa>p {color: pink;}#id1 .aaa .ppp {color: green;}#id2 .aaa p {color: yellow;}div ul li p {color: blue;}div ul p {color: cyan;}</style> </head> <body><div id="id1" class="ccc"><ul id="id2" class="bbb"><li id="id3" class="aaa"><p class="ppp">我是段落</p></li></ul></div> </body> </html> 一個(gè)一個(gè)對(duì)比，演示

本文轉(zhuǎn)載于:猿2048?https://www.mk2048.com/blog/blog.php?id=hi02j0ib&title=前端基礎(chǔ)-CSS的各種選擇器的特點(diǎn)以及CSS的三大特性

總結(jié)

以上是生活随笔為你收集整理的前端基础-CSS的各种选择器的特点以及CSS的三大特性的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

HTML

前端基础-CSS的各种选择器的特点以及CSS的三大特性

一、 基本選擇器

二、 后代選擇器、子元素選擇器

三、 兄弟選擇器

四、 交集選擇器與并集選擇器

五、 序列選擇器

六、 屬性選擇器

七、 偽類(lèi)選擇器

八、 偽元素選擇器