<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

id选择器

        #i1{

            background-color: burlywood;

            height: 48px;

        }

class选择器

        .c{

            background-color: red;

            height: 48px;

        }

        .c2{

            background-color: blue;

            height: 48px;

        }

标签选择器

        span{

            background-color: yellowgreen;

            height: 48px;

        }

        a{background-color: blue;

            height: 48px;

        }

层级选择器（中间有空格）

        div span{

            background-color: black;

            color:white;

            height: 48px;

        }

        .c2 div{

            background-color: yellow;

            font-size: 45px;

            color:red;

            height: 48px;

        }

        .c2 div div{

            background-color: yellow;

            color:black;

            height: 48px;

        }

组合选择器（用逗号隔开）

        #i5,#i6,#i7,.c3,.c4{

            background-color: yellow;

            color:blue;

            height: 48px;

        }

属性选择器

        input[type='text']{

            width:100px;

            height: 200px;

        }

对选择到的标签再通过属性再进行一次筛选

        .c1[type='zq']{

            width:200px;

            height: 200px;

        }

    </style>

</head>

<body>

    <!--/* 第一种 在标签里面加style属性*/-->

    <div style="background-color: burlywood;height: 200px;">ffffffff</div>

    <!--/* 第二种 在title下面加入style属性，里面给对应id设定style属性，比如下面这个标签为#i1，

    那么就会使用上面设定的style,但是每个标签的ID都是唯一的，所以这种方法不太使用，如果要设置多个标签的style那么就要写多个id选择器*/-->

    <div id="i1">id选择器</div>

    <!--/* 第三种 在style标签里面加入class选择器设定style属性，标签用的时候方法如下

    同一个class选择器可以被多个标签应用，这种方法比较广泛*/-->

    <div class="c">class选择器1</div>

    <div class="c">class选择器2</div>

    <div class="c2">class选择器3</div>

    <!--/* 第四种 标签选择器，在style标签里面写对应标签模式的style，那么之后所有的这个模式都会使用此style*/-->

    <span>标签选择器1</span>

    <span>标签选择器2</span>

    <a href="https://www.duba.com">标签选择器3</a>

    <!--/* 第五种 关联选择器（层级选择器）*/-->

    <div>

        <span>关联选择器</span>

    </div>

    <!--/* 或者 关联选择器第二种形式*/-->

    <div class="c2">

        <div>关联选择器第二种形式</div>

    </div>

    <div class="c2">

        <div>

            <div>3层升入</div>

        </div>

    </div>

    <!--/* 第六种 组合选择器*/-->

    <div id="i5">组合选择器1</div>

    <div id="i6">组合选择器2</div>

    <div id="i7">组合选择器3</div>

    <div class="c3">组合选择器4</div>

    <div class="c4">组合选择器5</div>

    <div></div>

    <!--/* 第七种 属性选择器*/-->

    <input class="c1" type="text"/>

    <input class="c1" type="zq"/>

</body>

</html>

　　

style中各种选择器的更多相关文章

  1. CSS中的选择器之类选择器和id选择器

    1.css中的选择器: 1.类选择器,又叫class选择器 2.id选择器 3.html元素选择器(又叫标签选择器) 4.通配符选择器 5.伪类选择器 6.组合选择器(多元素选择器,子元素选择器,后代 ...

  2. 03-CSS中的选择器

    高级选择器分为: 后代选择器 子代选择器 并集选择器 交集选择器 后代选择器 使用空格表示后代选择器 , 顾名思义  父元素的后代(包括儿子,孙子,重孙子) 中间空格隔开 是后代 .container ...

  3. js进阶 11-18 jquery中操作选择器的方法有哪些

    js进阶 11-18 jquery中操作选择器的方法有哪些 一.总结 一句话总结:add().addBack().end() 1.add()方法是干嘛的,举一例? 将add()方法后选择器选择的jqu ...

  4. js进阶 10-4 jquery中基础选择器有哪些

    js进阶 10-4 jquery中基础选择器有哪些 一.总结 一句话总结: 1.群组选择器用的符号是什么? 群组选择器,中间是逗号 2.jquery中基础选择器有哪些? 5种,类,id,tag,群组, ...

  5. jQuery中的选择器<思维导图>

    选择器是jQuery的重要组成部分,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.如果能熟练地使用选择器,不仅能简化代码,而且可以达到事半功倍的效果. 下面是关于jQuery中 ...

  6. HTML5中class选择器属性的解释

    设置有class属性值的元素,可以被css中的选择器调用,也可以在javascript中以getElementsByClassName()方法调用. 可以给各个元素添加class而且名称可以相同与id ...

  7. jQuery中的选择器《思维导图》

    学习jQuery的课程中,我对jQuery中的选择器有了更深的认识,它的简洁写法,完美的兼容性,可靠的处理机制,都让我们省了很多事, 下面是我在学习过程中对jQuery选择器写的思维导图(全屏查看:& ...

  8. js中对style中的多个属性进行设值

    js中对style中的多个属性进行设值: 看一下案例自然就明白: document.getElementById("my_wz1").style.cssText="bac ...

  9. 使用scrapy中xpath选择器的一个坑点

    情景如下: 一个网页下有一个ul,这个ur下有125个li标签,每个li标签下有我们想要的 url 字段(每个 url 是唯一的)和 price 字段,我们现在要访问每个li下的url并在生成的请求中 ...

随机推荐

  1. Mysql 数据库中9大对象

    MySql 数据库9中对象1.表2.索引3.视图4.图表:数据库表之间的关系视图,并不常用5.规则6.缺省值:数据列的默认值7.触发器8.存储过程9.用户

  2. Windows电脑无法识别USB设备怎么办？

    您可能已经注意到,如果您使用USB设备并将其插入计算机,Windows会识别并配置它.然后,如果你拔掉它并将其重新插入另一个USB端口,Windows就会出现一连串的健忘症,并认为这是一个完全不同的设 ...

  3. windows 10 删除资源管理器导航栏 Creative Cloud Files

    安装完Adobe的Photoshop.After Effects等软件后,资源管理器导航栏会出现让人讨厌的Creative Cloud Files目录,稍微修改注册表即可删除. 快捷键Windows ...

  4. HashMap的几种遍历方式（转载）

    今天讲解的主要是使用多种方式来实现遍历HashMap取出Key和value,首先在java中如果想让一个集合能够用for增强来实现迭代,那么此接口或类必须实现Iterable接口,那么Iterable ...

  5. MyBatis 中的#和$的区别

    #相当于对数据 加上 双引号,$相当于直接显示数据 #将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #user_id#,如果传入的值是111,那么解析成sql时的 ...

  6. 用jquery实现图片轮播

    用jquery简单实现图片轮播效果,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  7. BZOJ 3675: [Apio2014]序列分割 动态规划 + 斜率优化 + 卡精度

    Code: #include<bits/stdc++.h> #define N 100006 #define M 205 #define ll long long #define setI ...

  8. Leetcode_395. Longest Substring with At Least K Repeating Characters_[Devide and Conquer]

    题目链接 对一个字符串,找出一个最长的子串长度,这个子串中所有字符出现的次数至少为k. 1.滑动窗口 一开始把题目看成了,子串中每个字符至多出现k次.如果是这样,那么是一道典型的滑动窗口的题目. 然而 ...

  9. 配置自己的CocoaPods库

    序 默认安装的cocoapods确实很好用,可是毕竟自己会写一些库和修改一些第三方库来用.所幸cocoapods确实是一个神器.他可以定义自己的库来用. 如何安装Cocoapods,请参考这篇 从头来 ...

  10. Gym 100917M Matrix, The

    题目链接: http://codeforces.com/gym/100917/problem/M --------------------------------------------------- ...