经常看见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. day66

    今日内容: 1 orm介绍  1 tools--->Run manage.py Task     python3 manage.py makemigrations    只需要敲命令:makem ...

  2. Altium 拼板方法以及 注意的 地方

    1.修改软件设置, 即工具→优先选项→覆铜重建 对号去掉,如下,否则 拼板复制 覆铜 会变形导致拼板错误!!! 2.拼板方法,Ctrl+A全部复制(不要漏掉),选择特殊粘贴的方式,快捷键 E→A  去 ...

  3. 运放参数的详细解释和分析-part3，输入失调电压Vos及温漂

    运放参数的详细解释和分析-part3,输入失调电压Vos及温漂 在运放的应用中,不可避免的会碰到运放的输入失调电压Vos问题,尤其对直流信号进行放大时,由于输入失调电压Vos的存在,放大电路的输出端总 ...

  4. IE6 select穿透问题(div 定位无法遮盖select)!

    此问题,早有耳闻,可是一直都没有亲身碰到过,也就没有过多的去在意这些问题. 这一回总算是见识到了ie的厉害.虽是在ie选项中大大的写着ie版本号是ie11 .可是有些部分确实走的ie6的内核.怪不得微 ...

  5. centos7 sentry部署指南

    依赖说明 sentry官方推荐docker方式安装,使用到了docker-compose.docker至少是1.10.3以上的版本.为此需要使用centos7. 安装docker #添加yum 源 # ...

  6. 利用备份技术获取apk本地存储数据

    即使设备没有root,我们也可以通过物理访问设备来获取应用程序的数据,我们还可以通过此方法改变一个应用程序的数据.如果一个应用程序将数据存储在客户端, 使用简单的密码或pin检查,攻击者有可能使用这种 ...

  7. 20155338《网络对抗》Exp3 免杀原理与实践

    20155338<网络对抗>Exp3 免杀原理与实践 实验过程 一.免杀效果参考基准 Kali使用上次实验msfvenom产生后门的可执行文件,上传到老师提供的网址http://www.v ...

  8. WPF应用

    代码 private void button1_Click(object sender, RoutedEventArgs e) { calculate sa = new calculate(int.P ...

  9. [COCI2017-2018#6] Alkemija

    题意 一共有 \(n\) 种物质,已知开始你有 \(m\) 种物质且数量足够多,再给出 \(K\) 个物质的转化规则(一堆物质变成另一堆),问一共能够得到多少种物质. 分析 对 \(n\) 种物质和 ...

  10. java实现基于关键字的文件夹(文件）的搜索、文件夹（文件）的复制、删除

    最近在做一个项目,需要实现这几项功能,上网查了很多资料,自己研究了好几天终于实现了,现在与大家分享一下. 一.JAVA实现文件夹的搜索   在百度搜索N个技术文章,从哪些大牛们共享的资料中终于写出了我 ...