css03层次选择器
生活随笔
收集整理的這篇文章主要介紹了
css03层次选择器
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><!--內(nèi)部樣式 寫在head中--><style type="text/css">/* 并集選擇器 多個(gè)選擇器之間使用,（英文半角狀態(tài)）隔開.word,#s,span{color: green;}*//*交集選擇器 格式：01.標(biāo)簽選擇器+類選擇器 02.標(biāo)簽選擇器+ID選擇器必須是標(biāo)簽選擇器在前div.word｛｝ 去div標(biāo)簽中查找class屬性值為 word的標(biāo)簽div#s{} 去div標(biāo)簽中查找id屬性值為 s的標(biāo)簽div.word{color: green;} *//* 后代選擇器 必須有層級(jí)關(guān)系 選擇器之前使空格隔開*/#dv span {color: green;}</style>
</head>
<body>
<div>這是一個(gè)div1</div>
<div>這是一個(gè)div2</div><div class="word">類選擇器</div>
<div class="word">類選擇器</div><div id="s">ID選擇器</div>
<span>div外面的span</span><div id="dv"><span>div里面的span標(biāo)簽1</span>
</div><div><span>div里面的span標(biāo)簽2</span>
</div></body>
</html> <!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>層次選擇器</title><style type="text/css">/*并集選擇器*/p,ul{border: 1px solid red;}/* 后代選擇器body p{background: pink;}*//* 子選擇器body>p{background: pink;}*//*相鄰的兄弟選擇器.first+p{background: pink;}*//*所有兄弟選擇器*/.first~p{background: pink;}</style>
</head>
<body>
<p class="first">1</p>
<p>2</p>
<p>3</p><ul><li><p>4</p></li><li><p>5</p></li><li><p>6</p></li></ul></body>
</html> <!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>結(jié)構(gòu)偽類選擇器</title><!-- 不需要在節(jié)點(diǎn)上 增加 額外的屬性！ 結(jié)構(gòu)偽類選擇器--><style type="text/css">/*01.改變ul中第一個(gè)li元素的樣式 顏色是紅色ul li:first-child{color: red;}*//*02.改變ul中最后一個(gè)li元素的樣式 顏色是紅色ul li:last-child{color: red;}*//*03.改變頁(yè)面中第3個(gè)p標(biāo)簽 顏色是紅色 ! 只看順序 不看類型！001.無論p標(biāo)簽隱藏的多深！ 始終是自上而下的第三個(gè)p標(biāo)簽002.body節(jié)點(diǎn)下面第3個(gè)元素 如果是p 就顯示樣式body p:nth-child(3){color: red;}*//*04.改變頁(yè)面中第2個(gè)p標(biāo)簽 顏色是紅色先看類型 再看順序body p:nth-of-type(2){color: red;}*//* 05.改變第一個(gè)ul中的第一個(gè)li 的樣式 顏色是紅色 */ul:nth-of-type(1) li:nth-of-type(1){color: red;}</style></head>
<body>
<p>p1</p>
<span>span</span>
<p>p2</p>
<p>p3</p>
<ul><li>u1li1</li><li>u1li2</li><li>u1li3</li><li>u1li4</li>
</ul>
<ul><li>u2li1</li><li>u2li2</li><li>u2li3</li><li>u2li4</li>
</ul></body>
</html> <!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>愛奇異視頻播放列表</title><style type="text/css">li{display: inline-block; /*讓li標(biāo)簽中的內(nèi)容一行顯示*/}/*使用結(jié)構(gòu)偽類選擇器選擇li元素下的標(biāo)題元素，并設(shè)置字體大小為16px，字體顏色為#4D4D4D*/li h4:nth-of-type(1){font-size: 24px;color: #4D4D4D;}
/*使用結(jié)構(gòu)偽類選擇器選擇li下第一個(gè)p元素，設(shè)置字體大小為14px，字體顏色為 #640000*/li p:nth-of-type(1){font-size: 14px;color:#640000;}
/*使用結(jié)構(gòu)偽類選擇器選擇li下第二個(gè)p元素，設(shè)置字體大小為12px，字體顏色為藍(lán)色*/li p:nth-of-type(2){font-size: 12px;color:blue;}</style>
</head>
<body>
<h3>熱播</h3>
<ul><li><img src="images/img1.png" alt=""/><h4>神武趙子龍</h4><p>怒，林更新不抱網(wǎng)紅抱女神</p><p>點(diǎn)擊次數(shù)：242445次</p></li><li><img src="images/img2.png" alt=""/><h4>旋風(fēng)十一人</h4><p>胡歌變教練在撩前女友</p><p>點(diǎn)擊次數(shù)：242445次</p></li><li><img src="images/img3.png" alt=""/><h4>太陽的后裔</h4><p>宋慧喬吃嫩草</p><p>點(diǎn)擊次數(shù)：242445次</p></li><li><img src="images/img4.png" alt=""/><h4>山海經(jīng)之赤影傳說</h4><p>娜扎張翰再度聯(lián)手</p><p>點(diǎn)擊次數(shù)：242445次</p></li>
</ul></body>
</html> <!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>CSS3屬性選擇器的使用</title><style type="text/css">/*此段代碼只是讓結(jié)構(gòu)更美觀，后續(xù)會(huì)詳細(xì)講解*/.demo a {float: left;display: block;height: 50px;width: 50px;border-radius: 10px;text-align: center;background: #aac;color: blue;font: bold 20px/50px Arial;margin-right: 5px;text-decoration: none;margin: 5px;}/*存在屬性id的元素a[id]{background: chartreuse;}*//*屬性id=first的元素a[id="first"]{background: chartreuse;}*//*屬性class="links"的元素a[class="links"]{background: chartreuse;}*//*屬性class里包含links字符串的元素a[class*="links"]{background: chartreuse;}*//*屬性href里以http開頭的元素a[href^="http"]{background: chartreuse;}*//*屬性href里以png結(jié)尾的元素*/a[href$="png"]{background: chartreuse;}</style>
</head>
<body>
<p class="demo"><a href="http://www.baidu.com" class="links item first" id="first" >1</a><a href="" class="links active item" title="test website" target="_blank" >2</a><a href="sites/file/test.html" class="links item" >3</a><a href="sites/file/test.png" class="links item" > 4</a><a href="sites/file/image.jpg" class="links item" >5</a><a href="efc" class="links item" title="website link" >6</a><a href="/a.pdf" class="links item" >7</a><a href="/abc.pdf" class="links item" >8</a><a href="abcdef.doc" class="links item" >9</a><a href="abd.doc" class="linksitem last" id="last">10</a>
</p>
</body>
?
轉(zhuǎn)載于:https://www.cnblogs.com/xtdxs/p/7094133.html
總結(jié)
以上是生活随笔為你收集整理的css03层次选择器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： nodeJS之crypto加密
- 下一篇： requireJS文件夹