经常看见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. XML 的4种解析方式

    在上一篇博客中,我们介绍了什么是 XML ,http://www.cnblogs.com/ysocean/p/6901008.html,那么这一篇博客我们介绍如何来解析 XML . 部分文档引用:ht ...

  2. [Lydsy1805月赛]quailty 算法 BZOJ5362

    分析: 题目中描述了一个二分图,让我们求最小权最大匹配,实际上其实是求n个点,在n*(n-1)/2中选n条边的权值和最小,形成一个每个点都有出边的体系,也就是基环树,(证明:因为我们需要二分图最大匹配 ...

  3. static成员函数不能调用non-static成员函数

    1 一般类静态成员函数不能调用非静态成员函数 2 static成员函数可以调用构造函数吗? 答案是肯定的,由于static成员函数没有this指针,所以一般static成员函数是不能访问non-sta ...

  4. 【LeetCode9】Palindrome Number★

    题目描述: 解题思路: 求回文数,并且要求不能使用额外的空间.思路很简单,算出x的倒置数reverse,比较reverse是否和x相等就行了. Java代码: public class LeetCod ...

  5. ccf201703-2学生排队

    问题描述 体育老师小明要将自己班上的学生按顺序排队.他首先让学生按学号从小到大的顺序排成一排,学号小的排在前面,然后进行多次调整.一次调整小明可能让一位同学出队,向前或者向后移动一段距离后再插入队列. ...

  6. JS 01 变量_数据类型_分支循环_数组

    点击直通车↓↓↓ 数据类型及数据类型的手动转换 数组 一.概念 JavaScript(JS)是一种基于对象和事件驱动.且可以与HTML标记语言混合使用的脚本语言,其编写的程序可以直接在浏览器中解释执 ...

  7. c# 限制同时启动多个实例程序运行

    using System; using System.Collections.Generic; using System.Text; using System.Diagnostics; using S ...

  8. vb6/ASP FORMAT MM/DD/YYYY

    VB6或者ASP 格式化时间为 MM/dd/yyyy 格式,竟然没有好的办法, Format 或者FormatDateTime 竟然结果和系统设置的区域语言的日期和时间格式相关.意思是尽管你用诸如 F ...

  9. 20155307《网络对抗》Web安全基础实践

    20155307<网络对抗>Web安全基础实践 基础问题回答 SQL注入攻击原理,如何防御? 原理:SQL注入攻击指的是通过构建特殊的输入作为参数传入Web应用程序,而这些输入大都是SQL ...

  10. springmvc 结合 自动封装异常信息输出为json 报错 500内部服务器错误的原因

    补充:还有一个原因是因为spring的对象没有被成功注入,例如 mapper没有被成功注入,抛出异常时在这种封装场景下将会抛出 500 服务器内部错误, 这种情况下要排查还是靠debug然后看看到底是 ...