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. [转]JQuery.Ajax之错误调试帮助信息

    下面是Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求 ...

  2. 最短路径算法（Dijkstra算法、Floyd-Warshall算法）

    最短路径算法具体的形式包括: 确定起点的最短路径问题:即已知起始结点,求最短路径的问题.适合使用Dijkstra算法. 确定终点的最短路径问题:即已知终结结点,求最短路径的问题.在无向图中,该问题与确 ...

  3. CTS FAIL（一）

    首先简单介绍下CTS:全称Compatibility Test Suite,通过CTS测试,来检测android apk与android系统的兼容性. 最近公司release一版新的Image,但在新 ...

  4. Python相关工具清单[持续更新]

    SublimeJEDI : awesome Python autocompletion with SublimeText. Awesome Python : A curated list of awe ...

  5. 用Intellij Idea创建简单的Servlet

    Servlet作为Java服务端程序,使用起来还是挺方便的,下面是具体配置过程,我用的是Intellij Idea. 1. 做好必要准备,Intellij Idea(或者Eclipse for J2E ...

  6. 转载-MySQL 加锁处理分析

    MySQL 加锁处理分析 发表于 2013 年 12 月 13 日 由 hedengcheng 1    背景    1 1.1    MVCC:Snapshot Read vs Current Re ...

  7. 【转】手把手教你利用Jenkins持续集成iOS项目

    前言 众所周知,现在App的竞争已经到了用户体验为王,质量为上的白热化阶段.用户们都是很挑剔的.如果一个公司的推广团队好不容易砸了重金推广了一个APP,好不容易有了一些用户,由于一次线上的bug导致一 ...

  8. CABasicAnimation精讲

    前言 本教程写了这个效果图的demo,同时总结CABasicAnimation的使用方法. 看完gif动画完,看到了什么?平移.旋转.缩放.闪烁.路径动画. 实现平移动画 实现平移动画,我们可以通过t ...

  9. 使用 DllImport 属性

    本主题说明 DllImport 属性的常见用法.第一节讨论使用 DllImport 从托管应用程序调用本机代码的优点.第二节集中讨论封送处理和 DllImport 属性的各个方面. 从托管应用程序调用 ...

  10. 沉金板VS 镀金板

    沉金板VS 镀金板一.沉金板与镀金板的区别1.原理区别FLASH GOLD 采用的是化学沉积的方法!PLANTINGGOLD 采用的是电解的原理!2.外观区别电金会有电金引线,而化金没有.而且若金厚要 ...