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. nodejs 5.2.0文档自翻译——Path模块

    模块方法概览 Path path.basename(p[, ext]) path.delimiter path.dirname(p) path.extname(p) path.format(pathO ...

  2. BootStrap入门教程 (二) ：BASE CSS（排版(Typography),表格(Table),表单(Forms),按钮(Buttons)）

    上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...

  3. Bmob第三方登录详解

    Bmob第三方登录详解 Bmob 第三方登录 简介 本文主要介绍新浪微博,QQ,微信的登录接入以及如何配合BmobSDK中的第三方登录功能实现第三方登录. 在使用之前请先按照快速入门创建好可以调用Bm ...

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

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

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

    不是傻,就是因为人太好了,我宁愿相信是我人太好了,好吧,我就是对人都挺好,这是病吗. 昨天一起吃的饭一起AA了,挺好,这种事就得AA,玩的挺happy. 还有.感觉自己好傻,老是遇事焦虑,以后试着改变 ...

  6. Visual Studio 2013智能提示失效解决办法

    各种解决VS2013智能提示失效办法: 1.重置所有设置    工具->导入导出设置->重置所有设置 2.智能提示开关: 工具->选项->文本编辑器->C#->常规 ...

  7. [iOS 多线程 & 网络 - 1.0] - 多线程概述

    A.进程 什么是进程进程是指在系统中正在运行的一个应用程序 每个进程之间是独立的,每个进程均运行在其专用且受保护的内存空间内 比如同时打开QQ.Xcode,系统就会分别启动2个进程 通过"活 ...

  8. UVA10361 - Automatic Poetry

    “Oh God”, Lara Croft exclaims, “it’s one of these dumb riddles again!” In Tomb Raider XIV, Lara is, ...

  9. JPA project Change Event Handler问题解决[转]

    转至:http://my.oschina.net/cimu/blog/278724 这是Eclipse中的一个GUG: Bug 386171 - JPA Java Change Event Handl ...

  10. MPAndroidChart 的实现

    效果图: 代码实现: package com.jiahao.me; import java.util.ArrayList; import java.util.List; import android. ...