基本選擇器：見上篇基本選擇器
復合選擇器選擇器1,選擇器2{屬性:值;} 多元素選擇器，同時匹配選擇器1和選擇器2，多個選擇器之間用逗號分隔舉例： p,h1,h2{margin:0px;}E F{屬性:值;} 后代元素選擇器，匹配所有屬于E元素后代的F元素，E和F之間用空格分隔舉例： #slidebar p {font-color: #990000；}E > F{屬性:值;}子元素選擇器，匹配所有E元素的子元素F舉例： div > p{color:#990000;}E + F{屬性:值;}相鄰元素選擇器，匹配所有緊隨E元素之后的同級元素F舉例： div + div{color:#990000;}偽類選擇器偽類選擇器是用來給超級鏈接的不同狀態來設置樣式。:link 向未被訪問的鏈接添加樣式 :visitied 向已被訪問的鏈接添加樣式:hover 當鼠標懸浮在元素上方時，向元素添加樣式:active 鼠標放在元素上面時，點擊的一瞬間注意：超級鏈接的不同狀態它其實是有順序。也就是說偽類選擇器設置其實是有順序。如果不按照偽類選擇器的順序，那么樣式就會失效。順序：要遵守“愛恨準則”要先有愛，才有恨。“Love Hate” LVHA屬性選擇器什么是屬性選擇器？屬性選擇器它是與標簽的屬性名和屬性值有關。屬性選擇器是通過標簽的屬性名和屬性值來匹配元素。選擇器 含義 舉例[attr] 匹配指定的屬性名的所有元素 h1[align]{}[attr="val"] 匹配屬性等于指定值的所有元素 h1[align="center"]{}[attr*="val"] 匹配屬性中包含指定值的所有元素 Font[color*="00"][attr$="val"] 匹配屬性的值以指定值結束的所有元素 Font[color$="00"][attr^="val"] 匹配屬性以指定值開頭的所有元素 Font[color^="00"]
復合選擇器
多元素選擇器
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>多元素選擇器</title><style type="text/css">/*多元素選擇器格式：選擇器1,選擇器2,,選擇器n{屬性:值;}*//*div,p,h2,li{color: #f00;text-decoration: underline; } */.box,p,h2,li{color: #f00;text-decoration: underline; /*下劃線*/} </style>
</head>
<body><div class="box">HTML</div><p>CSS</p><h2>php</h2><ul><li>北京</li><li>廣州</li><li>上海</li><li>深圳</li></ul></body>
</html>
后代元素選擇器
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>后代元素選擇器</title><style type="text/css">/*后代元素選擇器格式：E F{屬性:值;}作： 匹配.box這個盒子里面所有的h2后代*/.box h2{color: #f00;text-decoration: underline;} </style>
</head>
<body><!-- class=box這個元素中有三個子元素第一個子元素：<h2>HTML</h2>第二個子元素：<div></div>還有子元素<h2>CSS</h2>第三個子元素：<h2>PHP</h2> --><div class="box"><h2>HTML</h2><div><h2>CSS</h2></div><h2>PHP</h2></div></body>
</html>
子元素選擇器
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>子元素選擇器</title><style type="text/css">/*子元素選擇器格式：E > F{屬性:值;}作： 匹配.box這個盒子里面所有的是h2的子元素，只匹配一級元素*/.box > h2{color: #f00;text-decoration: underline;} </style>
</head>
<body><!-- class=box這個元素中有三個子元素第一個子元素：<h2>HTML</h2>第二個子元素：<div></div>還有子元素<h2>CSS</h2>第三個子元素：<h2>PHP</h2> --><div class="box"><h2>HTML</h2><div><h2>CSS</h2></div><h2>PHP</h2></div></body>
</html>
相鄰元素選擇器
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>相鄰元素選擇器</title><style type="text/css">/*相鄰元素選擇器格式：E + F{屬性:值;}作用： 要滿足一下前提才會匹配1. E元素和F元素必須是兄弟關系2. E元素和F元素必須緊挨著，之間沒有任何元素阻擋3. 要求F元素一定是在E元素的下面 */.box + p{color: #f00;text-decoration: underline;}
/* p + .box{color: #f00;text-decoration: underline;} */ </style>
</head>
<body><!-- class=box這個元素中有三個子元素第一個子元素：<h2>HTML</h2>第二個子元素：<div></div>還有子元素<h2>CSS</h2>第三個子元素：<h2>PHP</h2> --><p>我在上面</p><div class="box"><h2>HTML</h2><div><h2>CSS</h2></div><h2>PHP</h2></div><p>我在下面</p></body>
</html>
偽類選擇器
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>偽類選擇器</title><style type="text/css">/*使用偽類選擇器來給超級鏈接的不同狀態來設置樣式*/a:link{color: #f00; /*正常狀態 紅色 未被訪問過*/}a:visited{color: #000; /*黑色 已經訪問過*/}a:hover{color: gold;}a:active{color: #0f0; /*綠色*/}</style>
</head>
<body><a href="http://www.baidu.com">baidu</a><a href="http://www.133.com">133</a><a href="http://www.134.com">134</a></body>
</html>
屬性選擇器
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>屬性選擇器</title><style type="text/css">/*通過屬性選擇器來匹配元素*//*第一個：[屬性名]*//*先匹配p標簽，再找有align屬性的*/
/* p[align]{color: #f00;}*//*第二個：[屬性名=值]*/
/* [align = center]{color: #00f;}*//*第三個：[屬性^=值]*//*有顏色屬性的font標簽的樣式*/
/* font[color]{border: 1px solid #00f;} */ /*有顏色屬性值為#FF開頭的font標簽的樣式*/
/* font[color^="#FF"]{border: 1px solid #00f;} */ /*第四個：[屬性$=值]*//*先找font標簽，然后找color以00結尾的*/font[color$="00"]{border: 1px solid #00f;}/*第五個：[屬性*=值]*//*先找font標簽，再匹配color中含有aa的，不區分大小寫*/font[color*="aa"]{border: 1px solid #00f;} </style>
</head><body><p align="center">哈哈1</p><h2 align="center">哈哈2</h2><p align="left">哈哈3</p><font color="#FF0000">顏色</font><font color="#FFAA00">顏色</font><font color="#FFaa00">顏色</font><font color="#aacc00">顏色</font><font color="#FFaadd">顏色</font><font color="#ddaabb">顏色</font>
</body>
</html>
列表樣式屬性
這里的列表指的事：無序列表和有序列表
因為整個網頁布局中無序列表使用最多。list-style-type:設置列表前項目符號的類型對應的值：none 將列表前面的項目符號去掉disc 實心圓square 實心小方塊circle 空心圓
list-style-position:設置列表項標記的放置位置對應的值：inside 在里面outside 在外面
list-style-image:將圖像設置為列表項標記對應的值：url 圖像路徑
list-style:在一個聲明中設置所有列表的屬性對應的值：squareinsideurllist-style，這個屬性是一個簡寫屬性，它集成上面上那個屬性的功能。可以同時設置上面的三個屬性。每一個屬性值之前使用空格分隔！它的屬性值可以有一個也可以有兩個也可以三個。其屬性值個數不定，位置也不定！
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>列表樣式屬性</title><style type="text/css">/*后代元素選擇器*/.box ul{/*去除列表前面的項目符號*//*list-style-type: none; *//*實心方塊*//*list-style-type: square;*//*空心圓*//*list-style-type: circle;*/}.box ul li{border: 1px solid #f00;height: 35px;line-height: 35px;/*list-style-position: inside;*//*第一步：將列表前面的項目符號去除*/
/* list-style-type: none;將列表前面的符號換成一張圖片list-style-image: url(../img/list-img.jpg);*/list-style: none url(../img/list-img.jpg);}</style></head>
<body><div class="box"><h2>中國四大名著</h2><ul><li>紅樓夢</li><li>三國演義</li><li>水滸傳</li><li>西游記</li></ul></div></body>
</html>
列表樣式案例
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>列表樣式屬性案例</title><style type="text/css">/*第一步：需要給div設置一個邊距，并且這個div在瀏覽器上面是居中顯示*/.box{width: 500px;border: 1px solid #f00;/*外邊距：HTML中的表格標記屬性 cellspacing單元格與單元格之間的距離在CSS中盒子與盒子之間的距離也稱為外邊距margin*/margin-left: auto; margin-right: auto;}.box h1{border: 1px solid skyblue;height: 40pxwidth: 40px;}.box li{/*color: #00f;*/list-style-type: none;list-style-image: url(../img/list-img.jpg);line-height: 30px;border: 1px solid #ccc;}</style>
</head>
<body><div class="box"><h1>頻道推薦</h1><ul><li><a href="https://www.baidu.com/link?url=d9k7wwXsSM3GpAgfX296enlb_IfRmHqrNBIZv720wI2WdL_hXCPFUrgnjaMvt6Q31ljWo0gnwi-_nj40UB4unefkPy4Te-Fa3B0xyLZSIxy&wd=&eqid=e059485000084593000000046661f6db">胖東來董事長自曝患胃癌</a></li><li><a href="https://news.cyol.com/gb/articles/2024-06/06/content_Bb8x9VSlYQ.html">準備好了就去戰斗吧!高考必勝</a></li><li><a href="https://baijiahao.baidu.com/s?id=1801120989685528101&wfr=spider&for=pc">2024高考作文預測</a></li><li><a href="https://baijiahao.baidu.com/s?id=1801092274605444416&wfr=spider&for=pc">餐廳倒閉老板留下6只企鵝跑路</a></li><li><a href="https://baijiahao.baidu.com/s?id=1801104923301331265">掃碼可領3000元財政部補貼?假</a></li><li><a href="https://baijiahao.baidu.com/s?id=1801082241586470739&wfr=spider&for=pc">學校為高三學子準備定勝“糕粽”</a></li><li><a href="https://www.peopleapp.com/column/30045222587-500005470568">人民日報:國足平局難以接受</a></li><li><a href="https://quanmin.baidu.com/sv?source=share-h5&pd=qm_share_search&vid=3938713301581804879">高考期間最累的人其實是張韶涵</a></li></ul></div></body>
</html>
對超級鏈接進行美化
通常會去掉超級鏈接的下劃線，同時給超級鏈接設置顏色。
一般情況下：
正常狀態與訪問過后的狀態的樣式設置為一致。
當鼠標經過時給其設置另外一種顏色。激活狀態一般不設置，因為激活狀態的時間太短。
舉例：a:link,a:visited {去掉超級鏈接的下劃線;設置一個顏色;}a:hover {設置另外一個顏色;增加一張下劃線;}演示：
/*對超級鏈接進行美化*/
/*正常狀態與訪問過后的狀態*/
a:link,a:visited {
text-decoration:none;color:#444;
}
/*鼠標放上狀態*/
a:hover {
color: #fdle;
text-decoration: underline;
}
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>對超級鏈接進行美化</title><style type="text/css">/*對超鏈接進行美化*//*正常狀態和訪問過后的狀態*/a:link,a:visited {/*去除下劃線，設置顏色*/text-decoration: none;color: #444;}/*鼠標放上的狀態*/a:hover{color: #f00;text-decoration: underline; /*加下劃線*/}</style>
</head>
<body><div class="box"><h1>頻道推薦</h1><ul><li><a href="https://www.baidu.com/link?url=d9k7wwXsSM3GpAgfX296enlb_IfRmHqrNBIZv720wI2WdL_hXCPFUrgnjaMvt6Q31ljWo0gnwi-_nj40UB4unefkPy4Te-Fa3B0xyLZSIxy&wd=&eqid=e059485000084593000000046661f6db">胖東來董事長自曝患胃癌</a></li><li><a href="https://news.cyol.com/gb/articles/2024-06/06/content_Bb8x9VSlYQ.html">準備好了就去戰斗吧!高考必勝</a></li><li><a href="https://quanmin.baidu.com/sv?source=share-h5&pd=qm_share_search&vid=4582484021341585237">北大物理保送生考了唯一一門語文</a></li><li><a href="https://baijiahao.baidu.com/s?id=1801287722624806661&wfr=spider&for=pc">今年又幫李華了</a></li></ul></div></body>
</html>
![[數據集][目標檢測]電纜鋼絲繩線纜缺陷檢測數據集VOC+YOLO格式1800張3類別](http://pic.xiahunao.cn/[數據集][目標檢測]電纜鋼絲繩線纜缺陷檢測數據集VOC+YOLO格式1800張3類別)
![【2024最新華為OD-C/D卷試題匯總】[支持在線評測] 特殊加密算法(200分) - 三語言AC題解(Python/Java/Cpp)](http://pic.xiahunao.cn/【2024最新華為OD-C/D卷試題匯總】[支持在線評測] 特殊加密算法(200分) - 三語言AC題解(Python/Java/Cpp))
