经常看见css的后代选择器是这样的写法：

div.class   和 .class div 的形式两者的区别：

div.class  是选中的类名为class 的div元素，与直接使用类选择器.class不同，因为可能有其他的元素使用了class类名，比如<p class=""></p>,就不会被div.class选中；

.class div 是后代选择器的一种，表示选中 类名为class的元素包含的所有的div元素；

代码演示：使用内联样式，方便查看；

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            div.se {

                border: 1px dashed gray;

            }

            .se div {

                background-color: #008000;

            }

        </style>

    </head>

    <body>

        <div id="first" class="se">

            你好我是first

            <div class="se">woshi</div>

        </div>

        <div id="second" class="se">

            你好我是second

        </div>

        <p class="se">你好我是段落</p>

    </body>

</html>

效果：

可以看到：div.se 选中的是类名为"se"的div元素；而.se div选中的，类名为se的元素后代元素div。

css后代选择器 .属性 元素 与 元素.属性的区别的更多相关文章

  1. CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  2. 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  3. CSS 后代选择器

    后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起 ...

  4. css后代选择器（div.class中间不带空格）

    如果我要查找<div>上用了.class的元素,查找方法:div.class:中间是不空格的. 以上这种形式为css后代选择器 参考:http://www.w3school.com.cn/ ...

  5. CSS后代选择器,子选择器和相邻兄弟选择器

    平时在代码练习中,经常用到后代选择器,子选择器也会用到,这里做个总结: 1,后代选择器和子选择器区别: ①写法不一样:后代选择器的标识为:空格 如:ul li{width:150px;} [ul和li ...

  6. 小tip: CSS后代选择器可能的错误认识——张鑫旭

    一.关于类选择器的一个问题 假设有下面一个面试题,CSS代码如下: .red { color: red; } .green { color: green; } HTML如下: <div clas ...

  7. CSS系列(8) CSS后代选择器和子选择器详解

    一.CSS后代选择器详解 1,  生动介绍基本概念 一个标签嵌B在另一个标签A内部,B就是A的后代. 而且,B的后代也是A的后代,这就叫“子子孙孙无穷尽也”. 比如: <div> < ...

  8. CSS后代选择器可能的错误认识

    一.关于类选择器的一个问题 CSS代码: .red { color: red; } .green { color: green; } HTML代码: <div class="red&q ...

  9. css后代选择器

    后代选择器: <p><em>CSS</em>层叠样式</p> 使用后代选择器设置,之间用空格隔开: p em{font-size:40px;} 例子: ...

随机推荐

  1. 突然的明白--public static 类名 函数名()

    public static ImageUtilEngine getImageEngine() { return imageEngine; } 这个是什么啊........纠结了一个多星期的东西 忽然间 ...

  2. ASP.NET Response.Redirect 丢失 Session的问题（作废，仅供参考）

    以前在做ASP.NET开发时一直没注意到一个问题,就是广泛使用的Response.Redirect方法并不会将服务器端在Response中新增或修改的Cookie返回给客户端浏览器,而网站的Sessi ...

  3. C# WPF xml序列化 反序列化

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...

  4. RocEDU.课程设计2018 第六组 第三周进展 博客补交

    RocEDU.课程设计2018第六组 第三周进展 博客补交 小组成员:20155211解雪莹,20155217杨笛,20155227辜彦霖 计划完成任务:完成课设所有内容 实际完成任务:跑通老师uco ...

  5. 20155234 昝昕明《基于ARM实验箱的国密算法应用》课程设计个人报告

    20155234 昝昕明<基于ARM实验箱的国密算法应用>课程设计个人报告 个人贡献 参与课设题目讨论及完成全过程: 资料收集: SM1算法及和ARM之间通信 负责串口代码调试: 协调完成 ...

  6. frameset的各个frame之间互相访问的方法

    工作中很少使用到frameset,对其了解也是十分有限,这里在网上找了点资料,摘抄了部分内容. (1)获得html页面上的frame window.frames可以获得本页面上所有frame集合,用法 ...

  7. Luogu P2483 【模板】k短路（[SDOI2010]魔法猪学院）

    说实话,看到这道题的洛谷评级我傻了(传说中的最高难度) 然后看完题目才确定这真的是一道k短路的裸题. 也就敲了个A*吧,15分钟竟然没有调试一遍过. 欧洲玄学. 看题目,主要是找几条从1走到n的路加起 ...

  8. lm393

    电压比较芯片,供电电压和输出电压一致.

  9. Promise 执行顺序

    加深印象 setTimeout(function() { console.log("timeout-start"); }, 200) // 改为100呢 console.log(& ...

  10. Redis发布订阅和事物笔记

    Redis 发布订阅 Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息. Redis 客户端可以订阅任意数量的频道. 下图展示了频道 cha ...