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. Hive1.3 JDBC连接-代码片段

    package com.hive.jdbc; import java.sql.Connection; import java.sql.DriverManager; import java.sql.Re ...

  2. hadoop2.7【单节点】单机、伪分布、分布式安装指导

    问题导读 1.从本文部署实际部署,总结本地模式.伪分布.分布式的区别是什么?2.单机是否是伪分布?3.本地模式是否可以运行mapreduce? 来源:about云 http://www.aboutyu ...

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

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

  4. 通过源码学Java基础：InputStream、OutputStream、FileInputStream和FileOutputStream

    1. InputStream 1.1 说明 InputStream是一个抽象类,具体来讲: This abstract class is the superclass of all classes r ...

  5. FIREDAC连接SQLITE乱码的解决

    在好多群里面都碰到问“FIREDAC连接SQLITE乱码的”的问题的同仁,遂将解决方法贴出来: 如上图所示设置 stringFormat为unicode即可

  6. C/C++ 不带参数的回调函数 与 带参数的回调函数 函数指针数组 例子

    先来不带参数的回调函数例子 #include <iostream> #include <windows.h> void printFunc() { std::cout<& ...

  7. HDU 3974 Assign the task (DFS序 + 线段树)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3974 给你T组数据,n个节点,n-1对关系,右边的是左边的父节点,所有的值初始化为-1,然后给你q个操 ...

  8. IntelliJ IDEA 开发工具项目maven管理

    今天自己重新部署一下intellij下的项目开发环境,顺便把maven管理项目jar包的方法梳理一下 (1)首先下载apache-maven-3.0.4版本的maven,我自己解压在D:\maven\ ...

  9. Mysql,JDBC封装

    1.完成对数据库的表的增删改的操作 2.查询返回单条记录 3.查询返回多行记录 4.可以使用反射机制来封装,查询单条记录 5.反射机制,查询多条记录 package myjdbc; import ja ...

  10. V​M​W​a​r​e​里​安​装​6​4​位​L​i​n​u​x​ ​的​方​法

    1.CPU AMD系列的CPU略过 Intel系列的CPU芯片需要支持EM64T和VT技术才行,并且BIOS也要支持才可以. 为了确定你的Intel CPU是否支持VT,请查看: http://com ...