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. Android中Cursor（游标）类的概念和用法

    使用过 SQLite 数据库的童鞋对 Cursor 应该不陌生,如果你是搞.net 开发你大可以把Cursor理解成 Ado.net 中的数据集合相当于dataReader.今天特地将它单独拿出来谈, ...

  2. win7旗舰版通知windows不是正版副本解决方法

    原文转载http://www.cnblogs.com/simple_666/archive/2013/04/13/win7%E6%97%97%E8%88%B0%E7%89%88%E9%80%9A%E7 ...

  3. linux 切换c++版本

    删除gcc-4.6的软连接文件/usr/bin/gcc.(只是删除软连接) 命令:sudo rm /usr/bin/gcc 然后建一个软连接,指向gcc-4.4. 命令:sudo ln -s /usr ...

  4. TopCoder SRM 605 DIV1

    604的题解还没有写出来呢.先上605的. 代码去practice房间找. 说思路. A: 贪心,对于每个类型的正值求和,如果没有正值就取最大值,按着求出的值排序,枚举选多少个类型. B: 很明显是d ...

  5. windwos iis 7.5 使用html 报405错误

    今天遇到了这个问题,网上搜一下基本上都是下面的答案: <form> 没有指定action的话就是文件自身了.  .html本身是不可执行的,如果要修改的话,在IIS中站点属性- 主目录 - ...

  6. jvm所占空间的配置

    http://www.cnblogs.com/mingforyou/archive/2012/03/03/2378143.html

  7. homework6-更加简单的题目

    又把时间搞错了 以为这次要写客户端程序的博客 没想到这次是“怎么吃” 言归正传 cnblog上面有很多技术博客 http://perhaps.cnblogs.com/archive/2005/08/0 ...

  8. C#简单应用spring的例子

    接口定义 namespace SpringDemo { interface IOper { void Say(); } } 此接口的两个实现 实现1 using System; namespace S ...

  9. AutoCAD.NET二次开发：扩展数据之XData

    结果缓存——ResultBuffer 结果缓存即 Autodesk.AutoCAD.DatabaseServices.ResultBuffer 类型,使用 ResultBuffer 对象时需要提供一个 ...

  10. 使用paramiko进行打包操作

    使用paramiko执行ssh命令的时候有一个很坑爹的地方:它无法准确的识别你的系统环境变量,所以使用一些命令的时候会发现,直接在系统中执行该命令的时候可以,但是换成paramiko执行的时候会报错说 ...