CSS的上下文选择器

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
CSS 四种上下文选择器 类型 描述 示例 父子选择器> 选择当前元素的所有子元素 div > li 后代选择器空格 选择当前元素的所有后代元素 div p, body * 同级相邻选择器+ 选择拥有共同父级且相邻的元素 li.red + li 同级所有选择器~ 选择拥有共同父级的后续所有元素 li.red ~ li

优先级：
行内样式 > 文档样式 > 外部样式。
important 最高优先级

1. 父子选择器示例

  1.     <ul class="nav">
  2.         <li class="list">item1</li>
  3.         <li class="list">item2</li>
  4.         <li class="list">item3</li>
  5.         <li class="list">item4</li>
  6.         <li class="list">item5</li>
  7.         <li class="list">item6</li>
  8.         <li class="list">item7
  9.             <!-- 这三个不是子级，所以用父子选择器选择不上 -->
  10.             <ul>
  11.                 <!--  -->
  12.                 <li class="list one">item11</li>
  13.                 <li class="list two">item22</li>
  14.                 <li class="list">item33</li>
  15.             </ul>
  16.         </li>
  17.         <li class="list">item8</li>
  18.         <li class="list">item9</li>
  19.     </ul>
  1.         /* > 父子选择器  */
  2.         .nav > .list{
  3.             /* .nav 后面的 .list元素都赋予下面的属性， 只有子级属性有。 */
  4.             /* item7下面的子级=.nav的孙级 所以不能赋与属性 */
  5.            /* border: 1px solid black; */
  6.         }

ps:父子：>（仅限父子）。从运行效果可以看出，虽然 class 名称相同，但父子元素选择器值针对直接后代元素有用，次后代无效果。

2. 后代选择器示例.

  1. <ul class="nav">
  2.         <li class="list">item1</li>
  3.         <li class="list">item2</li>
  4.         <li class="list">item3</li>
  5.         <li class="list">item4</li>
  6.         <li class="list">item5</li>
  7.         <li class="list">item6</li>
  8.         <li class="list">item7
  9.             <!-- 这三个不是子级，所以用父子选择器选择不上 -->
  10.             <ul>
  11.                 <!--  -->
  12.                 <li class="list one">item11</li>
  13.                 <li class="list two">item22</li>
  14.                 <li class="list">item33</li>
  15.             </ul>
  16.         </li>
  17.         <li class="list">item8</li>
  18.         <li class="list">item9</li>
  19.     </ul>
  1.         /* 空格 后代选择器 */
  2.         .nav  .list{
  3.             /* .nav 后面的 .list 元素都赋予下面的属性 （包括 子级 孙级 重孙级....）*/
  4.             color: brown;
  5.             border: 1px solid black;  
  6.         }

ps:后代：空格（后级所有元素，包括子集，孙子，重孙……）

3. 同级相邻选择器示例

  1. <ul class="nav">
  2.         <li class="list">item1</li>
  3.         <li class="list">item2</li>
  4.         <li class="list">item3</li>
  5.         <li class="list">item4</li>
  6.         <li class="list">item5</li>
  7.         <li class="list">item6</li>
  8.         <li class="list">item7
  9.             <!-- 这三个不是子级，所以用父子选择器选择不上 -->
  10.             <ul>
  11.                 <!--  -->
  12.                 <li class="list one">item11</li>
  13.                 <li class="list two">item22</li>
  14.                 <li class="list">item33</li>
  15.             </ul>
  16.         </li>
  17.         <li class="list">item8</li>
  18.         <li class="list">item9</li>
  19.     </ul>
  1.         /* + 兄弟相邻选择器  */
  2.         /* 选择拥有共同父级且相邻的元素 */
  3.         .nav  .list.one + .list{
  4.             color: blue;
  5.         }

ps:兄弟：+（与当前元素同级相邻的下一个元素，紧跟的且只有一个）

4. 同级所有选择器示例

  1. <ul class="nav">
  2.         <li class="list">item1</li>
  3.         <li class="list">item2</li>
  4.         <li class="list">item3</li>
  5.         <li class="list">item4</li>
  6.         <li class="list">item5</li>
  7.         <li class="list">item6</li>
  8.         <li class="list">item7
  9.             <!-- 这三个不是子级，所以用父子选择器选择不上 -->
  10.             <ul>
  11.                 <!--  -->
  12.                 <li class="list one">item11</li>
  13.                 <li class="list two">item22</li>
  14.                 <li class="list">item33</li>
  15.             </ul>
  16.         </li>
  17.         <li class="list">item8</li>
  18.         <li class="list">item9</li>
  19.     </ul>
  1.         /* ~ 同级所有选择器 */
  2.         /* 选择拥有共同父级的后续所有元素 */
  3.         .nav  .list ~.list{
  4.             color: blueviolet;
  5.         }

ps:同级：~（与当前元素同级的后面的全部元素）

【文章转自 武汉网站建设公司 http://www.1234xp.com/wuhan.html 网络转载请说明出处】
更多阅读