選擇器：

選擇器是用來選擇目標元素的，選擇器分基礎選擇器和復合選擇器及偽類選擇器。

基礎選擇器：

標簽名{} /* 1 標簽選擇器：把某類標簽全部選中，如下： */p{font-size:36px;}.類名{} /* 2 類選擇器(class選擇器)：選中相同類名的元素，.聲明，class調用，如下： */.box{width:100px;height:50px;}<div class="box"></div><div class="box stylebox"></div> /* 多類名選擇器：在class屬性中添加多個類名，中間用空格隔開，即可調用多類名來實現多個樣式*/#id名{} /* 3 id選擇器：選中id被命名為某名的元素，#定義，id調用，id選擇器具有唯一性，相同的id名只能出現在一個標簽上 */#box{width:100px;height:200px;}<div id="box"></div>*{}/* 4 通配符選擇器：選中文檔中所有元素，不建議使用，一般使用的情況是非常少的。 */*{color:blue;font-size:20px;}

復合選擇器：

div span{/* 1 后代選擇器：又稱包含選擇器，用于選擇標簽的后代子孫元素及元素組，語法：外層標簽寫在前面，內層標簽寫在后面，中間用空格隔開，需要強調的是只要是后代無論多少代都可以選中，它和子代選擇器的區別就在這里：不僅僅可以選擇緊挨著的下一級元素。 */color:blue;}<div><ul><li><span>蘋果</span><!-- 被選中項--></li></ul></div><span>白菜</span>ul li>a{/* 2子代選擇器：選中某標簽下緊挨著的某個元素，語法：父級標簽 > 子級標簽，強調的是：子代選擇器選中的是父級緊挨著的子級元素，和后代選擇器的區別就在這里。 */color:pink;}<ul><li><a href="#">test1</a><!-- 被選中項--></li><li><div><a href="#">test2</a></div></li></ul>p.watermelon{/* 3 交集選擇器：即又的關系，同時滿足條件的會被選中，語法：選擇器1選擇器2選擇器n...,多個選擇器連寫，中間不用任何字符。 */color:red;}<p>apple</p><p>orange</p><p class="watermelon">watermelon</p><!-- 被選中項--><span>蘋果</span><span>橙子</span><span class="watermelon">西瓜</span>p,span,.pear{/* 4 并集選擇器：同時選擇多個單獨或一組標簽，語法：多個選擇器中間用逗號連接，可以快速選擇需要給相同樣式的所有標簽 */color:red;font-size:40px;}<p>蘋果</p><p>荔枝</p><del>大米</del><span>香蕉</span><ins>地瓜</ins><div class="pear">梨</div>.banana+li {/* 5 相鄰元素選擇器：選擇緊挨著某元素下的一個兄弟元素，語法：選擇器1 + 標簽，注意兄弟元素選擇器*/color: red;}<ul><li>蘋果</li><li class="banana">香蕉</li><li>荔枝</li></ul>.banana~li {/* 6 兄弟元素選擇器：選擇挨著某元素下的所有兄弟元素，語法：選擇器1 ~ 標簽，注意相鄰元素選擇器*/color: red;}<ul><li>蘋果</li><li class="banana">香蕉</li><li>荔枝</li><li>菠蘿蜜</li><li>桃子</li></ul>

偽類選擇器：

偽類選擇器是以冒號：開始的，如下面鏈接偽類選擇器（需要和偽元素區分）：

a:link{color:black;}/* 設置未訪問的鏈接樣式 */a:visited{color:gray;}/* 設置已訪問的鏈接樣式 */a:hover{color:yellow;}/* 設置鼠標經過鏈接的樣式 */a:active{color:red;}/* 設置鼠標點擊時鏈接的樣式 *//* 需要注意：這四個鏈接的偽類選擇器是按照上面的順序書寫的，必須嚴格遵循。 */

提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者 刪除。
筆者：苦海

總結

以上是生活随笔為你收集整理的css中选择器介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。