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. POJ 2280&&hdu 1661

    题意:给定平面上的N个点,属性分别标记为0和1,然后找一条直线,直线上的点全部溶解,一侧的1溶解,另一侧的0溶解.求出最多能溶解的点的个数. 思路:暴力枚举每个点,扫描线旋转.先做优化,如果一侧溶解0 ...

  2. c++ 概念及学习/c++ concept&learning(三)

    这一篇继续说说程序设计中的基本语句:控制块 一 if类控制语句 if if else if  , else if ,else if(条件语句){如果条件为真,要做的一些事情}  if(条件语句) {如 ...

  3. Lucene学习笔记： 四，Lucene索引过程分析

    对于Lucene的索引过程,除了将词(Term)写入倒排表并最终写入Lucene的索引文件外,还包括分词(Analyzer)和合并段(merge segments)的过程,本次不包括这两部分,将在以后 ...

  4. JAVA使用jdbc连接MYSQL简单示例

    以下展示的为JAVA使用jdbc连接MYSQL简单示例: import java.sql.DriverManager; import java.sql.ResultSet; import java.s ...

  5. 最大连续子数和问题-homework-03

    一.说明 这次的作业做的不好,一小点怨念ing····· 首先向TA说明下,我的小伙伴“丢下”我后我不知道,以至于发现剩下我一个的时间有点晚,我机智地找到了一个3个人的小组,又叫到了一个小伙伴,但是悲 ...

  6. codeforces 622A Infinite Sequence

    A. Infinite Sequence time limit per test 1 second memory limit per test 256 megabytes input standard ...

  7. angular 管理后台

    http://blog.csdn.net/iamnieo/article/details/50474399

  8. C# 生成解决方案失败，点击项目重新生成报找不到命名空间

    1.点击生成解决方案失败,点击项目“重新生成”找不到“XXX”命名空间. 尝试点击"重新生成解决方案"多次,然后点击项目的"重新生成"即可解决.

  9. java foreach编辑讲解

    foreach语句使用总结 foreach语句是java5的新特征之一,在遍历数组.集合方面,foreach为开发人员提供了极大的方便. foreach语句是for语句的特殊简化版本,但是foreac ...

  10. Codeforces Round #114 (Div. 1) B. Wizards and Huge Prize 概率dp

    B. Wizards and Huge Prize Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest ...