CSS与SCSS的选择器总结

CSS与SCSS的选择器总结选择器可以选择类(或ID)标签类(或ID)与标签组合表示方式为:||类|标签|ID||::|:-:|:-:|::||HTML|class=”cla”|la

选择器可以选择

  1. 类(或ID)
  2. 标签
  3. 类(或ID)与标签组合
    表示方式为:
    标签 ID
    HTML class=”cla” <lab> id=”num”
    CSS .cla lab #num

注意:类与ID类似,下面的例子的也可以换成ID

一、CSS的选择器

1、多(类)选择器

(1)类或标签

选择含有”cla1 cla2″的标签,改变【内容2】、【内容3】

.cla1.cla2 {
    width: 100%;
}
<div class="cla1">
   内容1
</div>

<div class="cla1 cla2">
   内容2  <!-- 改变 -->
</div>

<div class="cla1 cla2 cla3">
   内容3  <!-- 改变 -->
</div>

(2)标签与类的组合

table.cla1.cla2 {
    width: 100%;
}
<table class="cla1 cla2">
   内容  <!-- 改变 -->
</table>

2、群组选择器

(1)类或标签

选择含有cla1、cla2、cla3任一个class的标签,改变【内容1】、【内容2】、【内容3】

.cla1, .cla2, .cla3 {
    width: 100%;
}
<div class="cla1">
   内容1  <!-- 改变 -->
</div>

<div class="cla1 cla2">
   内容2  <!-- 改变 -->
</div>

<div class="cla1 cla2 cla3">
   内容3  <!-- 改变 -->
</div>

(2)标签与类的组合

table, .cla1, .cla2 {
    width: 100%;
}
<div class="cla1">
   内容1  <!-- 改变 -->
</div>

<div class="cla2">
   内容2  <!-- 改变 -->
</div>

<table>
   内容3  <!-- 改变 -->
</table>

3、相邻选择器

(1)类或标签

选择cla1后面紧接的cla2(同一父级),改变【内容2】

.cla1 + .cla2 {
    width: 100%;
}
<div class="cla0">
    <div class="cla1">
     内容1 
  </div>
    <div class="cla2">
     内容2  <!-- 改变 -->
  </div>
</div>

(2)标签与类的组合

h1 + cla1 {
    width: 100%;
}
<div class="cla0">
    <h1>
     内容1 
  </h1>
    <div class="cla1">
     内容2  <!-- 改变 -->
  </div>
</div>

4、子代(类)选择器

(1)类或标签

选择 cla1>cla2>cla3 这种嵌套结构的全部cla3标签(直接后代),改变【内容1】

.cla1
>.cla2
>.cla3 {
    width: 100%;
}
<div class="cla1">
    <div class="cla2">
        <div class="cla3">
        内容1  <!-- 改变 -->
       <div class="cla3">
           内容2 
            </div>
        </div>
    </div>
</div>

(2)标签与类的组合

table
>.cla1
>td {
    width: 100%
}
<table>
    <div class="cla1">
        <td>
       内容  <!-- 改变 -->
     </td>
    </div>
</table>

5、后代(类)选择器

(1)类或标签

选择 cla1后代里面的全部cla3标签(不管后代嵌套得有多深),改变【内容1】、【内容2】

.cla1 .cla3 {
    width: 100%;
}
<div class="cla1">
    <div class="cla2">
        <div class="cla3">
        内容1  <!-- 改变 -->
            <div class="cla3">
           内容2  <!-- 改变 -->
            </div>
        </div>
    </div>
</div>

(2)标签与类的组合

.cla1 h1 {
    width: 100%;
}
<div class="cla1">
    <td>
        <h1>
       内容  <!-- 改变 -->
     </h1>
    </td>
</div>

6、伪类选择器

伪类必须配合正常的类来使用,改变未访问的链接【内容】

a:link {
    color: #fff
}
<a>
   内容  <!-- 改变 -->
</a>

二、SCSS的选择器

1、多(类)选择器

.cla1.cla2.cla3 {
    width: 100%;
}
.cla1 {
    &.cla2.cla3 {
        width: 100%;
    }
}

2、群组选择器

.cla1, .cla2, .cla3 {
    width: 100%;
}
.cla1 {
    &, .cla2, .cla3 {
        width: 100%;
    }
}

3、相邻选择器

.cla1 + .cla2 {
    width: 100%;
}
.cla1 {
    + .cla2 {
        width: 100%;
    }
}

//或者是反过来写
.cla2 {
    .cla1 + & {
    	width: 100%;
    }
}

4、子代(类)选择器

.cla1>.cla2>.cla3 {
    width: 100%;
}
.cla1 {
    >.cla2>.cla3 {
        width: 100%;
    }
}

//或者是从子类写到父类(根据自己实际需要)
.cla2 {
    .cla1>&>.cla3 {
        width: 100%;
    }
}

5、后代(类)选择器

.cla1 .cla3 {
    width: 100%;
}
.cla1 {
    .cla3 {
        width: 100%;
    }
}

//或者是从子类写到父类(根据自己实际需要)
.cla3 {
    .cla1 & {
        width: 100%;
    }
}

6、伪类选择器

a:link {
    color: #ffffff;
}
a {
    &:link {
        color: #ffffff;
    }
}

7、自定义类(BEM)的选择

.cla1 {
    width: 100%;
}

.cla2 {
    width: 100%;
}
//以前的用法
.cla {
    @at-root #{&}1 {
        width: 100%;
    }
    @at-root #{&}2 {
        width: 100%;
    }
}

//新支持的用法(后面最好不要跟【标签】或【属性】名)
.cla {
    &1 {
        width: 100%;
    }
    &2 {
        width: 100%;
    }
}

8、属性的选择

.cla1 {
    border-width: 1px;
    border-style: soild;
    border-color: #ffffff;
}
.cla1 {
//特别注意,下面需要写冒号(:)
    border: {
        width: 1px;
        stlye: soild;
        color: #ffffff;
    }
}

今天的文章CSS与SCSS的选择器总结分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/21086.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注