1.

(1)HTML文件

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>选择器</title>

 6 <link rel="stylesheet" type="text/css" href="style.css"/>

 </head>

 <body>

 <p> Specificity is determined  by now specific the selector is.

    <span id="specific"> A specific  selector wins</span>

    over a <span> more general one </span>.

 </p>

 <p>

     Order isn't important until there are one or more elememts of the same specificty referring to the same elememt.In

     which case,<span> the last one wins</span>

 </p>   

 </body>

 </html>

（2）CSS文件

@charset "utf-8";

/* CSS Document */

body {

    font:Verdana, Geneva, sans-serif;

}

span#specific {

    background:pink;

}

span {

    background:red;

}

span {

    background:yellow;

}

这里CSS文件中有两个span{}，这两个选择器针对性都是1，因此后面的那个优先适用，这导致后面连个<span>元素都是黄色背景

效果图：

css笔记06：层叠样式选择器的更多相关文章

  1. CSS层叠样式选择器归纳

     常用选择器 1.1 类型选择器:用来寻找特定类型的元素  标签 { 声明 } p { color:black; } h1 { font-weight:bold; } 1.2 后代选择器: 选择一个元 ...

  2. html中css三种常见的样式选择器 zz

    1:标签选择器 标签选择器,是所有带有某种标签的都生效.这里以p为例,也就是所有的带有p标记的都会这样的样式 <html><head><styletype="t ...

  3. css笔记04：属性选择器

    1.属性选择器: 带有 title 属性的所有元素设置样式: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  4. html中css三种常见的样式选择器

    1:标签选择器 标签选择器,是所有带有某种标签的都生效.这里以p为例,也就是所有的带有p标记的都会这样的样式 复制代码 代码如下: <html><head><stylet ...

  5. css笔记07：通配符选择器

    通配符选择器: * { margin:10px ;//默认四个位置参数全为零 margin-top:10px;//分别设置四个参数 margin-left:10px; margin-right:0px ...

  6. CSS 基础知识点 样式 选择器 伪类

    CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...

  7. JS实战 · 仿css样式选择器

    代码如下: <html> <head>     <meta http-equiv="Content-Type" content="text/ ...

  8. CSS样式选择器优先级

    CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...

  9. CSS样式选择器

    <!-- css样式选择器 HTML选择器 类选择器 ID选择器 关联选择器 组合选择器 伪元素选择器 selector{ /* selector是样式选择器 property:value; / ...

随机推荐

  1. GridView控件 Reapter控件 DataList控件 的区别和用法

    ASP.NET三大控件: 1.GridView控件:表格视图控件,可以用来绑定结果集或者视图,用起来比较方便和灵活,三个控件中使用最多的控件 用法--- this.gridview1.DataSour ...

  2. 恒天云单节点部署指南--OpenStack H版本虚拟机单节点部署解决方案

    本帖是openstack单节点在虚拟机上部署的实践.想要玩玩和学习openstack的小伙伴都看过来,尤其是那些部署openstack失败的小伙伴.本帖可以让你先领略一下openstack的魅力.本I ...

  3. 第二百八十一、二、三天 how can I 坚持

    又是三天,真搞不懂人到底是是什么,到底想要啥,好压抑. 周五,李东勇他们来北京开年会,晚上下班,去了趟团结湖公园,好冷,快冻死了,等着他们来了,见面,感觉好亲切,晚上一块吃了个火锅,玩的很happy. ...

  4. Spark SQL概念学习系列之Spark SQL 架构分析（四）

    Spark SQL 与传统 DBMS 的查询优化器 + 执行器的架构较为类似,只不过其执行器是在分布式环境中实现,并采用的 Spark 作为执行引擎. Spark SQL 的查询优化是Catalyst ...

  5. Struts2 文件上传

    一:表单准备 ① 要想使用HTML 表单上传一个或多个文件     –须把 HTML表单的 enctype属性设置为multipart/form-data     –须把HTML 表单的method ...

  6. HDU 5826 physics （积分推导）

    physics 题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5826 Description There are n balls on a smoo ...

  7. 乐观锁--CAS

    悲观锁与乐观锁的区别 悲观锁会把整个对象加锁占为已有后才去做操作,Java中的Synchronized属于悲观锁.悲观锁有一个明显的缺点就是:它不管数据存不存在竞争都加锁,随着并发量增加,且如果锁的时 ...

  8. Unity3D之空间转换学习笔记（三）：3D数学

    3D数学基础 向量 向量可以看做具有方向和大小的一条线段. 比如:我们如果用点A减去点B,则可以得到一个向量,该向量的方向为点B面向点A的方向,而大小为两点的距离.这个方法在游戏开发中经常用到,比如我 ...

  9. CSS 的 appearance 属性

    在 Firefox 1.0+,Chrome 1.0+ 和 Safari 3.0+ 中,我们可以使用 -moz-appearance 或者 -webkit-appearance 属性让元素模仿系统原生控 ...

  10. Linux 下监控用户最大进程数参数（nproc）是否到达上限

    Linux 下监控用户最大进程数参数(nproc)是否到达上限的步骤: 1.查看各系统用户的进程(LWP)数: 注意:默认情况下采用 ps 命令并不能显示出所有的进程.因为 Linux 环境下执行多线 ...