经常看见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. 第18章 SysTick—系统定时器

    第18章     SysTick—系统定时器 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/ ...

  2. 学习ASP.NET Core，你必须了解无处不在的“依赖注入”（转载）

    ASP.NET Core的核心是通过一个Server和若干注册的Middleware构成的管道,不论是管道自身的构建,还是Server和Middleware自身的实现,以及构建在这个管道的应用,都需要 ...

  3. ASP.NET Core的Kestrel服务器（转载）

    Kestrel是一个基于libuv的跨平台ASP.NET Core web服务器,libuv是一个跨平台的异步I/O库.ASP.NET Core模板项目使用Kestrel作为默认的web服务器.Kes ...

  4. 王立平--查看SQLite中的数据信息

    Eclipse菜单Window - Open Perspective - DDMS进入DDMS视图. 然后File Explorer View中依次展开路径/data/data/package_nam ...

  5. WPF 嵌入winform 控件

    引入 WindowsFormsIntegration.dll   和   System.Windows.Forms.dll <Window x:Class="wgscd.Window1 ...

  6. 2017-2018 Exp3 MAL_免杀原理与实践 20155214

    目录 Exp3 MAL_免杀原理与实践 实验内容 对msf生成后门程序的检测 Veil-Evasion应用 Visual Studio2017 + shellcode生成后门 主要思路 知识点 最后的 ...

  7. 20155325 Exp5 MSF基础应用

    目录 实验内容 遇到的问题 基础问题问答 老师!!!我实验三的C代码已经删除了,请求评分~~~ 实验内容 1.Windows服务渗透攻击--MS08-067 系统 虚拟机 参考博客 Windows X ...

  8. 20155328 《网络攻防》 实验一：PC平台逆向破解（5）M

    20155328 <网络攻防> 实验一:PC平台逆向破解(5)M 实践目标 实践对象:linux可执行文件pwn1. 正常执行时,main调用foo函数,foo函数会简单回显任何用户输入的 ...

  9. 【Win32 API】利用SendMessage实现winform与wpf之间的消息传递

    原文:[Win32 API]利用SendMessage实现winform与wpf之间的消息传递 引言    有一次心血来潮,突然想研究一下进程间的通信,能够实现消息传递的方法有几种,其中win32ap ...

  10. LOJ#2799. 「CCC 2016」生命之环

    题意 给你一个 \(n\) 个 \(\rm 01\) 组成的环,每次操作之后每个位置为1当且仅当他的左右恰好有1个1.输出进行 \(T\) 次操作之后的环. \(n\leq 10^5, T\leq 1 ...