经常看见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. canvas绘画基础(一)：认识canvas画布

    html5提供了一个<canvas>标签,结合javascript的canvas api接口可以用来绘制图形和动画.最近工作中涉及到画图的任务,下面来了解一下canvas的基础:canva ...

  2. STM32-M0中断优先级介绍

    先解释中断优先级,后面讲代码的实现. 差异:M0的中断优先级相比于M4,没有用到分组,且只用到了2个bit位(即0~3)来设置,数值越小,优先级越高:同等优先级,根据终端号的大小来决定谁先执行. 根据 ...

  3. Python魔术世界 1 如何使用Visual Studio在WIN10中一键安装Python3入门编程环境并测试Django

    本文通过VS安装Python和Django的环境,创建了一个Web程序,前后5分钟的操作,让你快速入门Python的编程世界,各种Python和Django的概念会在实战中给你娓娓道来. Django ...

  4. 机器学习英雄访谈录之 DL 自由职业者：Tuatini Godard

    目录 机器学习英雄访谈录之 DL 自由职业者:Tuatini Godard 正文 对我的启发 机器学习英雄访谈录之 DL 自由职业者:Tuatini Godard Sanyam Bhutani 是 M ...

  5. php OPcache

    众所周知php是一种解释型语言,它的执行可分为如下几个流程: Scanning(Lexing) ,将PHP代码转换为语言片段(Tokens) Parsing, 将Tokens转换成简单而有意义的表达式 ...

  6. LeetCode 606. Construct String from Binary Tree根据二叉树创建字符串 (C++)

    题目: You need to construct a string consists of parenthesis and integers from a binary tree with the ...

  7. Final版本互评——杨老师粉丝群《PinBall》

    基于NABCD评论作品,及改进建议 1.根据(不限于)NABCD评论作品的选题 (1)N(Need,需求) 随着民族自信的觉醒,民主文化越来越受到重视,语文在高考中的比重也不断增加,在这种大环境下,成 ...

  8. Day Seven

    站立式会议 站立式会议内容总结 331 今天完成: 1.主页面 toolbar 菜单修改为点击弹出两个选项:新增计划和书籍 2.点击新增书籍跳转到文件管理器 home按钮为回退至上级目录,后退按钮为c ...

  9. 接上 操作系统java项目设计图纸 一步一步在进化

  10. Beta阶段冲刺-3

    一. 每日会议 1. 照片 2. 昨日完成工作 3. 今日完成工作 4. 工作中遇到的困难 杨晨露:组内图表部分遇到了问题,他们的问题一出来,我就头疼了......因为要调整计划时间,所以我觉得我的困 ...