python 46 css组合选择器 及优先级 、属性选择器

2021-06-20 20:06

阅读:460

标签:onclick   精确   spl   tle   col   图片   section   sed   head   

一:css组合选择器

  特性:每个选择器位可以为任意基本选择器或选择器组合

           选择器分为以下几类:

    群组选择器,子代(后代)选择器,相邻(兄弟)选择器,交集选择器,多类名选择器

1、群组选择器:

  • 一次性控制多个选择器
  • 选择器之间以 ,(逗号) 隔开,每一个选择器位均可以任意合法选择器或选择器组合

2、子代(后代)选择器:

  • 一次性控制一个选择器(逻辑最后的那个选择器),前置位的选择器为修饰性选择器
  • 每一个选择器位均可以 为任意合法选择器或选择器组合
  • 子代选择器必须为一个父级嵌套关系,后代选择器可以为一级或多级父子嵌套关系

3、相邻(兄弟)选择器:

  • 一次性控制一个选择器(逻辑最后的那个选择器),前置位的选择器为修饰性选择器
  • 每一个选择器位均可以为任意合法选择器或选择器组合
  • 相邻选择器必须为直接相邻关系,兄弟选择器可以为直接相邻或间接相邻关系

4、交集选择器:

  • 既可以是选择器1,也可以是选择器2

5、多类名选择器:

  • 例:
    红红火火恍恍惚惚
  • 精确查找class,更好的确认类名,详见下列代码
技术分享图片技术分享图片
DOCTYPE html>
html>
head>
    meta charset="UTF-8">
    title>组合选择器title>
    style type="text/css">
        /*组合选择器*/
        /*特性:每个选择器位可以为任意基本选择器或选择器组合*/

        /*群组选择器: ,隔开
          控制多个*/
        div, .s, section {
            color: red;
        }
        /*子代选择器: >连接*/
        body > div {
            color: orange;
        }
        /*div > a {
            text-decoration: none;
        }*/
        /*后代选择器: 空格连接*/
        /*包含子代选择器*/
        body a {
            text-decoration: none;
        }
        /*相邻选择器: +连接*/
        span + section {
            background-color: pink;
        }
        /*兄弟选择器: ~连接*/
        /*包含相邻选择器*/
        div ~ section {
            background-color: brown;
        }
        
        /*交集选择器*/
        /*即是选择器1又是选择器2*/
        i.s {
            color: yellow;
        }
        
        /*多类名选择器*/
        .d1 {
            color: blue;
        }
        .d1.d2 {
            color: tan;
        }
        .d1.d2.d3 {
            color: #780;
        }
    style>
head>
body>
    
    div>divdiv>
    span class="s">spanspan>
    section>sectionsection>
    div>
        a href="">a标签a>
    div>
    i class="s">iiiii>
    div class="d1 d2 d3">呵呵div>

body>
html>
五种选择器

 

 

 

二:组合选择器优先级

 

三:属性选择器

python 46 css组合选择器 及优先级 、属性选择器

标签:onclick   精确   spl   tle   col   图片   section   sed   head   

原文地址:https://www.cnblogs.com/zedong/p/9687487.html


评论


亲,登录后才可以留言!