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;

  }

时间: 2024-10-02 21:14:25

Bootstrap基础:选择器的相关文章

Bootstrap &lt;基础二十一&gt;徽章(Badges)

Bootstrap 徽章(Badges).徽章与标签相似,主要的区别在于徽章的边角更加圆滑. 徽章(Badges)主要用于突出显示新的或未读的项.如需使用徽章,只需要把 <span class="badge"> 添加到链接.Bootstrap 导航等这些元素上即可. 下面的实例演示了这点: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 徽章(Badges)</ti

JQuery基础选择器

jQuery选择器类似css选择器,所以学习起来也更加容易1.基础选择器 1.All Selector("*") 描述:选择所有元素 语法:$("*") 注意:实践证明,由于使用*选择器获取的是全部元素,因此,有些浏览器将会比较缓慢,这个选择器也许谨慎使用 2.Class Selector(".class") 描述:选择给定样式类名的所有元素 语法:$(".class") 3.Element Selector("el

bootstrap基础学习【表单含按钮】(二)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>bootstrap基础学习[表单](二)</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> </head> <body style="padd

Bootstrap &lt;基础二十五&gt;警告(Alerts)

警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个可选的关闭按钮.为了创建一个内联的可取消的警告框,请使用 警告(Alerts) jQuery 插件. 您可以通过创建一个 <div>,并向其添加一个 .alert class 和四个上下文 class(即 .alert-success..alert-info..alert-warning..ale

Bootstrap&lt;基础十五&gt; 输入框组

Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输入添加公共的元素.例如,可以添加美元符号,或者在 Twitter 用户名前添加 @,或者应用程序接口所需要的其他公共的元素. 向 .form-control 添加前缀或后缀元素的步骤如下: 把前缀后后缀元素放在一个带有 class .input-group 的 <div> 中. 接着,在相同的 &

Bootstrap &lt;基础二十六&gt;进度条

Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性,Opera 12 不支持动画. 默认的进度条 创建一个基本的进度条的步骤如下: 添加一个带有 class .progress 的 <div>. 接着,在上面的 <div> 内,添加一个带有 class .prog

Bootstrap&lt;基础十七&gt;导航栏

导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏在您的应用或网站中作为导航页头的响应式基础组件.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开.在 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式. 默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="navigation",有助

BootStrap基础入门

BootStrap基础入门 一.BootStrap概述 1.1什么是BootStrap BootStrap,基于HTML.CSS.JavaScript的前端框架(半成品).其预定义一套CSS样式和与样式对应的jQuery代码,我们只需要提供固定HTML结构,添加固定的class样式,就可以完成指定效果的实现 BootStrap在jQuery的基础工作,可以理解BootStrap就是jQuery的一个插件. BootStrap使得web开发更加快捷,代码优雅,美观大方. 由Twitter公司的设计

Css3之基础-2 Css 基础选择器

一.Css 基础选择器 通用选择器 通用选择器 - 通用选择器,显示为一个星号(*) - 可以与任何元素匹配 - 常用于设置一些默认样式,比如设置整个文档的文本的默认字体和大小 元素选择器 - html文档的元素就是选择器 - 比如<p>.<h1>等 类选择器 - 语法为: .className {color:read;} - 类名称不能以数字开头 - 所有能够附带class属性的元素都可以使用此样式声明 - 将元素的class属性的值设置为样式类名 - 可以将多个类选择器应用于同

Bootstrap &lt;基础二十八&gt;列表组

列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 class .list-group-item. 下面的实例演示了这点: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 基本的列表组</title> <link href="/boo