溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了css組合選擇器怎么使用的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇css組合選擇器怎么使用文章都會有所收獲，下面我們一起來看看吧。
css基本選擇器
基本選擇器又分為：通配符、標簽選擇器、class選擇器、id選擇器，在這里需要注意的編程思想在css層疊樣式表中元素有且僅有一個id。注意以下幾點1.id唯一性2.元素id不相同，就像每一個人只有一個身份證一樣，ID就代表身份證3.class選擇器不具有唯一性，它可以重復使用！此外這個通配符代表的是全局
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>css基本選擇器</title>
7 <style type="text/css">
8 *{
9 color: skyblue;
10 }/**通配符*/
11 div{
12 color: red;
13 }/*標簽選擇器*/
14 .box{
15 color: steelblue;
16 }/*class選擇器*/.box{color: steelblue;}也可以寫成*.box{color: steelblue;}代表的所有的box字體顏色為 steelblue 17 #content{
18 color: tomato;
19 }/*id選擇器*/
20 </style>
21 </head>
22 <body>
23 <div class="box" id="content">
24 學習Q-q-u-n： 784783012 </div>
26 </body>
27 </html>
css組合選擇器
把基本選擇器通過特殊符號串在一起有意見稱之為css組合選擇器，常見的css組合選擇器有：分組選擇器、嵌套選擇器、子選擇器、相鄰同級別選擇器
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>css組合選擇器</title>
7 <style type="text/css">
8 /* div{ 9 color: teal; 10 font-size: 24px; 11 } 12 p{ 13 color: teal; 14 } */
15 div{
16 font-size: 24px;
17 }
18 div,p{
19 color: teal;
20 }/*分組選擇器*/
21 div p{
22 color: red;
23 }/*嵌套選擇器*/
24 ul>li{
25 font-size: 24px;
26 list-style: square;
27 }/*子選擇器*/
28 div+p{
29 color: blue;
30 }/*相鄰同級別選擇器*/
31 </style>
32 </head>
33 <body>
34 <div>
35 成功的花,人們只驚羨她現時的明艷!然而當初她的芽兒,浸透了奮斗的淚泉,灑遍了犧牲的血雨
36 <p>自以為懂得很多了經歷很多了最后才知道都是那么的可笑</p>
37 </div>
38 <p>我們不要只看成功者榮譽的瞬間,更要看到成功者為之努力、為之奮斗的過程,從而激勵自己也不斷付出,奔著那個成功的目標前進.</p>
39 <p>成功的花,人們只驚羨她現時的明艷!然而當初她的芽兒,浸透了奮斗的淚泉,灑遍了犧牲的血雨<span>我們不要只看成功者榮譽的瞬間,更要看到成功者為之努力、為之奮斗的過程,從而激勵自己也不斷付出,奔著那個成功的目標前進.</span></p>
40 <ul>
41 <li>1</li>
42 <li>2</li>
43 <li>3</li>
44 </ul>
45 </body>
46 </html>
css屬性選擇器
基本選擇器[屬性]、基本選擇器[屬性=值]、 基本選擇器[屬性——=值]空格符隔開多個、 基本選擇器[屬性^=值]以什么開始、 基本選擇器[屬性$=值]以什么結束
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>css屬性選擇器</title>
7 <style type="text/css">
8 div[title]/*基本選擇器[屬性]*/
9 div[title=english]{
10 color: blue;
11 }/*基本選擇器[屬性=值]*/
12 div[title——=en]{
13 color:#f90;
14 font-weight: bold;
15 }/*基本選擇器[屬性——=值] 任意包含有屬性中的一個*/
16 p,div[title^=zh]{
17 font-size:24px;
18 color: brown;
19 }/*基本選擇器[屬性^=值]以什么開始*/
20 div[title$=china]{
21 letter-spacing: 10px;
22 text-decoration: line-through;
23 font-style: italic;
24 }/*基本選擇器[屬性$=值]以什么結束*/
25 </style>
26 </head>
27 <body>
28 <div title="english">
29 If you can NOT explain it simply, you do NOT understand it well enough 30 </div>
31 <div title="english en yingyu">
32 你們沒發(fā)現嘛？2013愛你一生，2014愛你一世，2015愛你一屋，2016愛你一路，2017愛你一切，2018愛你一半，2019愛你依舊，2020愛你愛你，2021愛你而已 33 </div>
34 <p title="zh en">
35 css選擇器四大類：基本、組合、屬性、偽類 36 </p>
37 <div title="zh en china">
38 http://www.cnblogs.com/dhnblog/p/12293463.html 39 </div>
40 </body>
41 </html>
css偽類選擇器
從字面意思來講，偽就是假的，元素是標簽與標簽包裹的內容，簡單來說偽元素就是假的元素，假的反義詞是真的，在頁面中這些又是我們自己寫的，所以它是真的。在這個html頁面中，所有元素都會被偷偷加上開始與結束標簽，這個就是偽元素，偽類選擇器指的是一種操作狀態(tài)！
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>css偽類選擇器</title>
7 <style type="text/css">
8 p{
9 color: brown;
10 border: 1px solid black;
11 height: 40px;
12 line-height: 40px;
13 }
14 p::before{
15 content: "before開始";
16 }
17 p::after{
18 content: "after結束";
19 }
20 /* 針對塊元素 21 第一個字母::first-letter 22 第一行文字::first-line */
23 div::first-letter{
24 font-size: 24px;
25 color: blue;
26 }
27 div::first-line{
28 color: yellowgreen;
29 font-style: initial;
30 font-weight:bolder;
31 }
32 </style>
33 </head>
34 <body>
35 <div class="box">
36 <!--before 開始-->
37 <p>情人節(jié)祝福語送女朋友,很甜很撩,瞬間收服她的心!</p>
38 <!--after 結束-->
39 </div>
40 </body>
41 </html>
關于“css組合選擇器怎么使用”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“css組合選擇器怎么使用”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
