简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > html教學 > 主體

CSS 子选择器(六)_html/css_WEB-ITnose

WBOY
發布： 2016-06-24 11:46:20
原創
1255 人瀏覽過

一、子选择器

子选择器中前后部分之间用一个大于号隔开，前后两部分选择符在结构上属于父子关系。

子选择器是根据左侧选择符指定的父元素，然后在该父元素下寻找匹配右侧选择符的子元素。

二、简单例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>子选择器</title><link type="text/css" rel="stylesheet" href="css/demo5.css"/></head><body><div>  <p>这是个段落   <a href="#">这是超连接</a>   </p></div></body></html>
登入後複製

@charset "utf-8";/* CSS Document *//*设置div下的p元素的样式*/div>p{    font-size:14px;    color:#0000FF;    }/*设置p元素下的a元素的样式*/p>a{    font-size:16px;    color:#FF0000;    text-decoration:none;}/*错误的写法 div 与a不是父子关系时，是取不到的*/div>a{    font-size:20px;    color:#FF0000;    text-decoration:none;}
登入後複製

子选择器很少用到，一般使用包含选择可以不受父子关系影响的选择

以下写法包含选择器

div a{    font-size:20px;    color:#FFFF00;    text-decoration:none;}
登入後複製

 

相關標籤：
CSS 子选择器(六)
來源：php.cn
上一篇：【CSS】响应式图片_html/css_WEB-ITnose 下一篇：html中设置滚动条的样式_html/css_WEB-ITnose
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
WordPress 6.0 (add_editor_style) 不會在古騰堡編輯器中載入 style.css 我正在學習UdemyWordPress課程來建立自訂WordPress區塊主題。我成功在function.php中註冊了區塊類型，並且可以在古騰堡編輯器中選擇我的區塊。教學建議使用...
來自於 2023-11-12 20:37:50
0
2
261
是否可以將 :nth-child() 或 :nth-of-type() 與任何選擇器結合使用？ 是否有辦法選擇與任意選擇器匹配（或不匹配）的第n個子元素？例如，我想選擇每個奇數表行，但在行的子集中：table.myClasstr.row:nth-child(odd){...}...
來自於 2023-10-20 17:04:56
0
2
347
解碼 CSS 選擇器的優先權/特異性 我想了解CSS選擇器如何處理屬性衝突。如何選擇一個屬性而不是另一個屬性？ div{background-color:red;}div.my_class{background-col...
來自於 2023-10-19 22:58:19
0
2
175
學習如何在CSS偽類函數中有效運用複合選擇器:host-context(<選擇器>) 在MDN文件中，:host-context()定義為：:host-context()CSS偽類函數選擇包含它所在的CSS的影子DOM的影子主機（因此您可以從其影子DOM中選擇自訂元...
來自於 2023-09-16 15:49:33
0
1
621
CSS 顏色變數 - 定義 CSS 顏色時需要規則或選擇器 您好，我遇到以下問題：「定義CSS顏色時需要at-rule或選擇器。」我正在使用VS代碼，並且我已在https://jigsaw.w3.org/css-validator/vali...
來自於 2023-09-13 11:02:07
0
1
259
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！