1.

（1）

<!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>

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

</head>

<body>

你好，北京！

   <span class="style1"  id="special_new">新闻1</span>

   <span class="style1">新闻2</span>

   <span class="style1">新闻3</span>

   <span class="style1">新闻4</span>

   <span class="style1">新闻5</span>

   <span id="style2">这是一则<span>非常重要</span>的新闻</span><br />

   <a href="#">goto sohu</a><br />

   <a href="#">goto sina</a><br />

</body>

</html>

(2).my.css文件如下：

@charset "utf-8";

/* CSS Document */

/*html的选择器*/

body {

    color:orange;

}

a:link {

    color:black;

    text-decoration:none;

}

a:hover {

    text-decoration:underline;

}

a:visited {

    color:red;

}

/*.style1 就是类选择器*/

.style1 {

    font-weight:bold;

    font-size:20px;

    background-color:pink;

    color:black;

}

#special_new {

    font-style:italic;

    color:red;

}

/*#style2就是id选择器*/

#style2 {

    font-size:30px;

    background-color:silver;

    color:black;

}

/*#style2 span 就是父子选择器, #style2是父,span是子*/

#style2 span {

    font-style:italic;

    color:red;

}

/*#style2 span 就是父子选择器, #style2是父,span是子,也包含层次关系*/

#style2 span span{

    font-size:50px;

}

如果一个元素被id和class同时修饰时，id选择器的优先级>class选择器

2.一个元素最多有一个id选择器，但是可以有多个类选择器

（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>

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

</head>

<body>

你好，北京！

   <span class="style1" id ="special_new">新闻1</span>

   <span class="style1">新闻2</span>

   <span class="style1 style4">新闻3</span>

   <span class="style1">新闻4</span>

   <span class="style1">新闻5</span>

   <span id="style2">这是一则<span>非常重要</span>的新闻</span><br />

   <a href="#">goto sohu</a><br />

   <a href="#">goto sina</a><br />

</body>

</html>

这里"新闻3"修饰的是两个.class类，如果修饰发生冲突，到底哪个为准呢？

（2）my.css文件

@charset "utf-8";

/* CSS Document */

/*html的选择器*/

body {

    color:orange;

}

a:link {

    color:black;

    text-decoration:none;

}

a:hover {

    text-decoration:underline;

}

a:visited {

    color:red;

}

/*.style1 就是类选择器*/

.style1 {

    font-weight:bold;

    font-size:20px;

    background-color:pink;

    color:black;

    font-style:normal;

}

.style4 {

    font-style:italic;

    text-decoration:underline;

    color:green;

}

#special_new {

    font-style:italic;

    color:red;

}

/*#style2就是id选择器*/

#style2 {

    font-size:30px;

    background-color:silver;

    color:black;

}

/*#style2 span 就是父子选择器, #style2是父,span是子*/

#style2 span {

    font-style:italic;

    color:red;

}

/*#style2 span 就是父子选择器, #style2是父,span是子,也包含层次关系*/

#style2 span span{

    font-size:50px;

}

这里基准是：在css文件中，那个.class文件在后面定义的，就显示它的效果：比如这里的.style4定义在.style1后面，所以以.style4效果为准

3.

--->在引用多个class选择器时候，用空格隔开

--->当class选择器发生冲突时候，在css文件中，最后出现的class选择器样式为准

css笔记09：选择器优先级的更多相关文章

  1. CSS学习之选择器优先级与属性继承

    CSS学习之选择器优先级与属性继承 选择器优先级 其实选择器是具有优先级的,我们来看下面这一组案例: <!DOCTYPE html> <html lang="en" ...

  2. 第17天：CSS引入、选择器优先级（中级）

    一.CSS 位置 1.行内式  css <div class="fr" style="color:red;">aa</div> 2. 内 ...

  3. CSS笔记——属性选择器

    1.存在和值(Presence and value)属性选择器这些属性选择器尝试匹配精确的属性值:[attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何.[attr=val ...

  4. CSS中选择器优先级与!important权重使用

    CSS中的选择器优先级与!important权重使用 .class选择器要高于标签选择器. #id选择器要高于.class选择器. 标签选择器是优先级最低的选择器. !important的属性它的权重 ...

  5. CSS：CSS样式表及选择器优先级总结

    我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式.内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢? 也会遇到这样的情况,在样式表中,对同一个HTML元素,我们有可能既用到了 ...

  6. CSS选择器优先级总结

    CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...

  7. css知多少——选择器的优先级

    1. 引言 上一节<css知多少(5)--选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的 ...

  8. CSS样式选择器优先级

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

  9. 【CSS系列-选择器优先级总结】

    转:http://www.cnblogs.com/dolphinX/p/3511300.html 容易被忽略CSS特性   CSS初学感觉很简单,但随着学习的深入才感觉CSS的水由多深,平常总会遇到各 ...

随机推荐

  1. GDB中应该知道的几个调试方法

    七.八年前写过一篇<用GDB调试程序>,于是,从那以后,很多朋友在MSN上以及给我发邮件询问我关于GDB的问题,一直到今天,还有人在问GDB的相关问题.这么多年来,有一些问题是大家反复在问 ...

  2. elisp语法

    http://stackoverflow.com/questions/3855862/setq-and-defvar-in-lisp defvar, let, setq的语法分析: defvar in ...

  3. 第二百五十九天 how can I 坚持

    晚上,弟弟给我说了下他前几天发生的事,这孩子,有事就不知道说下,自己闷在心里. 刘松打算最近买房了,弟弟和建哥也考虑买,让他俩商量着来吧,早晚都得买. 有点揪心.想结婚不知道该和谁结... 睡觉.烦.

  4. POJ 1860 Currency Exchange （bellman-ford判负环）

    Currency Exchange 题目链接: http://acm.hust.edu.cn/vjudge/contest/122685#problem/E Description Several c ...

  5. Java IO (4) - Writer

    Java IO (4) - Writer 前言 JavaIO一共包括两种,一种是stream,一种是reader/writer,每种又包括in/out,所以一共是四种包.Java 流在处理上分为字符流 ...

  6. Linux vmstat：报告虚拟内存统计的工具

    众所周知,计算机必须有称之为RAM(随机访问内存)的存储器使得计算机工作.RAM指的是插在计算机主板上的物理存储.这里的RAM被用于加载像浏览器.文字处理器这类的程序,实际上,你使用的程序都运行在内存 ...

  7. HDU 3668 Volume (数学，积分)

    题意:求图中交叉圆柱体的体积! 析:大体思路很明确,把两个圆柱的体积加起来 减去中间公共部分的即可!第一步首先得想到公共部分是一个怎样的图形.这个在高数下册例题中有讲到! 中间实线部分就是第一卦限内的 ...

  8. 关于三目运算符与if语句的效率与洛谷P2704题解

    题目描述 司令部的将军们打算在N*M的网格地图上部署他们的炮兵部队.一个N*M的地图由N行M列组成,地图的每一格可能是山地(用“H” 表示),也可能是平原(用“P”表示),如下图.在每一格平原地形上最 ...

  9. 对.NET的认识

    .NET其实就是一个软件平台,这个平台和Java平台有许多的相似之处,主要表现在 1.二者编写的程序都是可以跨平台执行的   2.二者编写的程序编译后生成的都是一种中间码(IL),需要经过第二次编译才 ...

  10. c++未指定返回值

    int foo() { } foo返回的是随机数 函数的返回值在函数堆栈的参数后面,由一个指向寄存器的指针决定,函数返回时,调用者取指针取寄存器中的值作为返回值. 如果指定返回值,函数在返回前会将返回 ...