简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home> List of blog posts> CSS的上下文选择器
Blogger Information
Blog 16
fans 0
comment 0
visits 12101
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS的上下文选择器
大碗宽面
Original
455 people have browsed it

CSS 四种上下文选择器

类型 描述 示例
父子选择器> 选择当前元素的所有子元素 div > li
后代选择器空格 选择当前元素的所有后代元素 div p, body *
同级相邻选择器+ 选择拥有共同父级且相邻的元素 li.red + li
同级所有选择器~ 选择拥有共同父级的后续所有元素 li.red ~ li

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

1. 父子选择器示例

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

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

2. 后代选择器示例.

       
    
        
  1. class="nav">
    2. 
        
  2. class="list">item1
    3. 
        
  3. class="list">item2
    4. 
        
  4. class="list">item3
    5. 
        
  5. class="list">item4
    6. 
        
  6. class="list">item5
    7. 
        
  7. class="list">item6
    8. 
        
  8. class="list">item7
    9. 
        
    10. 
        
    10. 
        
      • 
        
    • class="list one">item11
      • 
        
    • class="list two">item22
      • 
        
    • class="list">item33
      • 
        
    11. 
        
    12. 
        
  12. class="list">item8
    13. 
        
  13. class="list">item9
    14. 
        
    15. 
       
       
    
        
  1. /* 空格 后代选择器 */
    2. 
        
  2. .nav.list{
    3. 
        
  3. /* .nav 后面的 .list 元素都赋予下面的属性 （包括 子级 孙级 重孙级....）*/
    4. 
        
  4. color:brown;
    5. 
        
  5. border:1pxsolid black;
    6. 
        
  6. }
    7.

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

3. 同级相邻选择器示例

       
    
        
  1. class="nav">
    2. 
        
  2. class="list">item1
    3. 
        
  3. class="list">item2
    4. 
        
  4. class="list">item3
    5. 
        
  5. class="list">item4
    6. 
        
  6. class="list">item5
    7. 
        
  7. class="list">item6
    8. 
        
  8. class="list">item7
    9. 
        
    10. 
        
    10. 
        
      • 
        
    • class="list one">item11
      • 
        
    • class="list two">item22
      • 
        
    • class="list">item33
      • 
        
    11. 
        
    12. 
        
  12. class="list">item8
    13. 
        
  13. class="list">item9
    14. 
        
    15. 
       
       
    
        
  1. /* + 兄弟相邻选择器 */
    2. 
        
  2. /* 选择拥有共同父级且相邻的元素 */
    3. 
        
  3. .nav.list.one+.list{
    4. 
        
  4. color:blue;
    5. 
        
  5. }
    6.

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

4. 同级所有选择器示例

       
    
        
  1. class="nav">
    2. 
        
  2. class="list">item1
    3. 
        
  3. class="list">item2
    4. 
        
  4. class="list">item3
    5. 
        
  5. class="list">item4
    6. 
        
  6. class="list">item5
    7. 
        
  7. class="list">item6
    8. 
        
  8. class="list">item7
    9. 
        
    10. 
        
    10. 
        
      • 
        
    • class="list one">item11
      • 
        
    • class="list two">item22
      • 
        
    • class="list">item33
      • 
        
    11. 
        
    12. 
        
  12. class="list">item8
    13. 
        
  13. class="list">item9
    14. 
        
    15. 
       
       
    
        
  1. /* ~ 同级所有选择器 */
    2. 
        
  2. /* 选择拥有共同父级的后续所有元素 */
    3. 
        
  3. .nav.list~.list{
    4. 
        
  4. color:blueviolet;
    5. 
        
  5. }
    6.

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

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：条理清晰，完成的很好
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply withNews Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！