Bootstrap基础:选择器

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Bootstrap基础:选择器相关的知识,希望对你有一定的参考价值。

1.CSS属性选择器

[arrt=value]   该属性有指定的确切值

[arrt~=value]  该属性值必须是多个空格隔开的值,比如,class=“title featured home”,而且这些值中的一个必须是指定的值“value”

[arrt|=value]  属性的值就是“value”或者以“value”开始并立即跟上一个“-”字符,也就是“value-”,比如lang=“zh-cn”

<div class="container">
        <div class="row">
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
        </div>
        <div class="row">
            <div class="col-md-8">col-md-8</div>
            <div class="col-md-4">col-md-4</div>
        </div>
        <div class="row">
            <div class="col-md-4">col-md-4</div>
            <div class="col-md-4">col-md-4</div>
            <div class="col-md-4">col-md-4</div>
        </div>
        <div class="row">
            <div class="col-md-6">col-md-6</div>
            <div class="col-md-6">col-md-6</div>
        </div>
</div>

[class|="col-md"]{
      background: red;
 }

[arrt^=value]  该属性的值必须以指定的值开始

[arrt$=value]  该属性的值必须包含特定值(而无论其位置怎么样)

[arrt*=value]  改属性的值必须以特定值结束

 

2.子选择器用符号”>“表示

如:.table > thead >tr >th{

    border-bottom:2px solid #ccc

  }

3.兄弟选择器用”+“表示

如:ul > li +li{

    margin-left:23px;

  }

 

技术分享
技术分享
技术分享

 

以上是关于Bootstrap基础:选择器的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段6——CSS选择器

Bootstrap 时间和日期选择器设置最小日期

Android - 片段中的联系人选择器

使用 Angular 和 bootstrap 5 beta 找不到 VS 代码 CSS 类选择器

日期选择器不工作/显示 - Bootstrap 5

在 Vuejs 2 中使用 bootstrap-datetime 选择器