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. 只有IE能上网，其他浏览器均不可以！

    今天起来,高高兴兴的来到实验室,发现电脑打开上不了网.本人平时喜欢用Chrome,发现上不了网,就开始ping.发现可以ping通,但是网页打不开! 第一反应是DNS的问题,可以发现DNS没问题,能正 ...

  2. 《Genesis-3D开源游戏引擎完整实例教程-2D射击游戏篇04：碰撞检测》

    4.碰撞检测 碰撞概述: 游戏世界里,游戏对象不能做出如同在真实世界里的物理运动效果.对于大部分游戏来说,都要为其添加物理系统,让其可以模拟真实世界发生的物理运动.但是在这个打飞机游戏Demo中,是用 ...

  3. 运行时环境（The Runtime Environment）

    App Engine应用响应网络请求.当一个客户端(典型的是用户的Web浏览器)使用HTTP请求(比如获取在URL上的网页)连接上应用的时候,网络请求就开始了.当App Engine接收到请求时,它会 ...

  4. PC问题-(仅供备用)取消磁盘的自动扫描

    问题现象:有一次整个单位停电了,之后再开机,每次电脑都自检.现在不想让电脑自检了. 问题原因:可能是因为停电,造成了系统文件的破坏. 问题处理:禁用电脑自检功能(注册表方法). Windows Reg ...

  5. POJ 2236 Wireless Network （并查集）

    Wireless Network 题目链接: http://acm.hust.edu.cn/vjudge/contest/123393#problem/A Description An earthqu ...

  6. #elif

    http://baike.sogou.com/v72031124.htm?fromTitle=%23elif #else指令用于某个#if指令之后,当前面的#if指令的条件不为真时,就编译#else后 ...

  7. DATASNAP为支持FIREDAC而增加的远程方法的数据类型TFDJSONDataSets

    前面的博客提到用FIREDAC全面替代COM那一套东西:DATAPROVIDER,OLEVARIANT,CLIENTDATASET,DBEXPRESS... 显然,DATASNAP的远程方法必须增加对 ...

  8. ASP.NET Web Api返回对象类型为JSON还是XML

    在Umbraco平台上开发过程中,我用WebApi返回JSON result给前端 前端使用React调用这个web api来获取JSON result 我写的web api方法是返回JSON 类型的 ...

  9. HDU 4489 The King’s Ups and Downs （DP+数学计数）

    题意:给你n个身高高低不同的士兵.问你把他们按照波浪状排列(高低高或低高低)有多少方法数. 析:这是一个DP题是很明显的,因为你暴力的话,一定会超时,应该在第15个时,就过不去了,所以这是一个DP计数 ...

  10. JS 命名空间 实现方式 收集

    一. 对象注册式 // 声明一个全局对象Namespace,用来注册命名空间Namespace = new Object(); // 全局对象仅仅存在register函数,参数为名称空间全路径,如&q ...