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. Android Environment 类详解

    Android应用开发中,常使用Environment类去获取外部存储目录,在访问外部存储之前一定要先判断外部存储是否已经是可使用(已挂载&可使用)状态, 并且需要在AndroidManife ...

  2. 【hadoop代码笔记】Hadoop作业提交中EagerTaskInitializationListener的作用

    在整理FairScheduler实现的task调度逻辑时,注意到EagerTaskInitializationListener类.差不多应该是job提交相关的逻辑代码中最简单清楚的一个了. todo: ...

  3. leetcode@ [355] Design Twitter (Object Oriented Programming)

    https://leetcode.com/problems/design-twitter/ Design a simplified version of Twitter where users can ...

  4. Struts2在Action中访问WEB资源

    什么是WEB资源? 这里所说的WEB资源是指:HttpServletRequest, HttpSession, ServletContext 等原生的 Servlet API. 为什么需要访问WEB资 ...

  5. Codeforces 626A Robot Sequence

    A. Robot Sequence time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...

  6. DATASNAP多表提交之事务控制之通用方法

    ERP系统的单据,总是些主从表结构,有一个主表,N个子表,子表又有子表,形成N层,单据数据提交时,主从表数据都要提交,为了保证数据的完整性,必须提供事务控制,要么都提交成功,有一个提交失败所有的提交都 ...

  7. MVC神韵---你想在哪解脱！（十一）

    为了实现这一处理,我们需要在MoviesController类中追加第二个Create方法.这个Create方法具有一个[HttpPost]属性,它意味着我们将要用它来处理提交到“/Movies/Cr ...

  8. thttpd的定时器

    运用了static函数实现文件封装 提升变量访问效率的关键字register,该关键字暗示该变量可能被频繁访问,如果可能,请将值存放在寄存器中 内存集中管理,每个节点在取消后并没有立即释放内存,而是调 ...

  9. 让sublime text 3默认新建GBK文件

    想让sublime text支持显示或者保存中文,需要安装插件convertToUTF8,具体安装可以问度娘. 安装插件以后,想让保存的html文件支持中文,可以通过ctrl+shift+C来完成.但 ...

  10. cocos2d-x Mask的实现及优化

    转自:http://blog.ch-wind.com/cocos2d-x%E4%B8%ADmask%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8F%8A%E4%BC%98%E5%8C ...