在知道了CSS选择符最基础的知识后，就要综合利用它们了。这里就记录几种常见的用法。

1.针对性的使用类选择符或者ID选择符

　　类选择符在一个页面中可能会在不同的地方应用，那么就需要有针对性地使用类选择符。如下例：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>css-test</title>

     <style>

         .myContent{

             font-size: 12px;

             color: #00f;

         }

         p.myContent{

             font-size: 25px;

             line-height: 5px;

             text-decoration:underline;

             font-weight:bold;

             color: #f00;

         }

     </style>

 </head>

 <body>

 <div class="myContent">css很强大，可以控制页面任何元素的样式</div>

 <p class="myContent">1与世界同步，做一个成功的页面仔</p>

 <span class="myContent">2让我们看看css多么奇妙吧</span>

 </body>

 </html>

　　该例子在style中定义了一个.myContent的css类和组合选择符 p.myContent（注意p和.myContent没有空格），且页面中的div、p和span元素也都引用了myContent类，但是由于存在p.myContent，所以div和span的文字会是蓝色，而p中的文字会是红色，如下图所示：

在此种应用下，ID选择符和类选择符相似，只需将.换成#即可（p#myId），如下例

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>css-test</title>

     <style>

         .myContent{

             font-size: 12px;

             color: #00f;

         }

         p#myId{

             font-size: 25px;

             line-height: 5px;

             text-decoration:underline;

             font-weight:bold;

             color: #f00;

         }

     </style>

 </head>

 <body>

 <!--<p>css很强大，<span>可以控制页面<strong>任何元素</strong>的样式</span><strong>dfd</strong></p>-->

 <div class="myContent">css很强大，可以控制页面任何元素的样式</div>

 <p id="myId">1与世界同步，做一个成功的页面仔</p>

 <span class="myContent">2让我们看看css多么奇妙吧</span>

 </body>

 </html>

运行结果和上图一样。

2.选择符群组

即将多个相同定义的选择符合并，如下例中将p，类选择符.myContent以及id选择符#myId共同定义成红色、加粗、带下划线、字体大小为25px的文字 p,.myContent,#myId {property:value;}，注意它们之间使用逗号隔开的。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>css-test</title>

     <style>

         p,.myContent,#myId{

             font-size: 25px;

             text-decoration:underline;

             font-weight:bold;

             color: #f00;

         }

     </style>

 </head>

 <body>

 <!--<p>css很强大，<span>可以控制页面<strong>任何元素</strong>的样式</span><strong>dfd</strong></p>-->

 <div class="myContent">css很强大，可以控制页面任何元素的样式</div>

 <p>1与世界同步，做一个成功的页面仔</p>

 <span id="myId">2让我们看看css多么奇妙吧</span>

 </body>

 </html>

运行结果如下图

3.CSS的优先级

多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。一般情况下，此时的优先级如下：

标有!important样式>内嵌样式 （HTML元素中的style）> 内部样式表 （head中的style）> 外联样式表（head中外部引入的）>浏览器默认样式

例如：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>css-test</title>

     <style>

         p,.myContent,#myId{

             font-size: 25px;

             text-decoration:underline;

             font-weight:bold;

             color: #f00;

         }

     </style>

 </head>

 <body>

 <div class="myContent">css很强大，可以控制页面任何元素的样式</div>

 <p style="color: blue">1与世界同步，做一个成功的页面仔</p>

 <span id="myId">2让我们看看css多么奇妙吧</span>

 </body>

 </html>

虽然在head的style中设置了p标签内的文字样式颜色为红色，但是在HTML的p元素中又通过style属性对其颜色进行了设置（蓝色）。因为内嵌样式优先级高于内部样式表，所以p标签中的文字最终表现为蓝色，如下图所示。

4.CSS的权重

　　为了在多个样式修饰同一元素时，更准确的判断到底利用哪个CSS，可以使用权重加权的方法，即为每类选择符赋予权重，然后计算出现的选择符组合的加权权重，最终得出的积分最高的就为最终的样式。

  • 标签选择符、伪类与伪对象：权重为1。
  • 类选择符、属性选择符：权重为10。
  • ID选择符：权重为100。
  • 内联style属性：权重为1000。
  • !important：权重为无穷。

例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>css-test</title>

     <style>

         p {

             color:blue;

         }

         /*p * {color: red;}*/

         p.myColor{

             color: black;

         }

         .myColor{

             color: yellow;

         }

         #myId{

             color: green;

         }

     </style>

 </head>

 <body>

 <p>Hello</p>

 <p class="myColor">css很强大，可以控制页面任何元素的样式</p>

 <p class="myColor" id="myId">1与世界同步，做一p st页面仔</p>

 <p style="color: red" class="myColor">2让我们看看css多么奇妙吧</p>

 </body>

 </html>

分析：代码中，各个选择符的权重加权后所得的积分如下

p=1
p.myColor=1+10=11
.myColor=10
#myId=100
style="color: red"=1000

所以，“Hello”为蓝色（p=1）；“css很强大，可以控制页面任何元素的样式”为黑色（p.myColor=1+10=11）；“1与世界同步，做一p st页面仔”为绿色（#myId=100）；“2让我们看看css多么奇妙吧”为红色（style="color: red"=1000），如下图所示。

5.css引入顺序的影响
在head中的style中定义样式（.myColor1和.myColor2）的顺序以及在HTML元素p中引用这些类时的顺序会产生怎样的影响呢？我们做个试验。
a.首先在head的style中首定义.myColor1，再定义.myColor2；然后在p中分别引入两个类，但顺序不同<p class="myColor1 myColor2">css很强大，可以控制页面任何元素的样式</p><p class="myColor2 myColor1">1与世界同步，做一个页面仔</p>，代码如下：
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>css-test</title>

     <style>

         .myColor1{

             color: red;

         }

         .myColor2{

             color: blue;

         }

     </style>

 </head>

 <body>

 <p class="myColor1 myColor2">css很强大，可以控制页面任何元素的样式</p>

 <p class="myColor2 myColor1">1与世界同步，做一个页面仔</p>

 <p>2让我们看看css多么奇妙吧</p>

 </body>

 </html>


运行结果如下图：


b.首先在head的style中首定义.myColor2，再定义.myColor1；然后在p中分别引入两个类，但顺序不同<p class="myColor1 myColor2">css很强大，可以控制页面任何元素的样式</p><p class="myColor2 myColor1">1与世界同步，做一个页面仔</p>，代码如下：






 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>css-test</title>

     <style>

         .myColor2{

             color: blue;

         }

         .myColor1{

             color: red;

         }

     </style>

 </head>

 <body>

 <!--<p>css很强大，<span>可以控制页面<strong>任何元素</strong>的样式</span><strong>dfd</strong></p>-->

 <p class="myColor1 myColor2">css很强大，可以控制页面任何元素的样式</p>

 <p class="myColor2 myColor1">1与世界同步，做一个页面仔</p>

 <p>2让我们看看css多么奇妙吧</p>

 </body>

 </html>






运行结果如下图：




　　通过上述两组实验可以看出，css只与定义的顺序有关系，而与在元素中引用的顺序并没有关系，并且后定义的样式会覆盖之前定义的样式，其实这也是css为什么叫做样式层叠表。
												


											
CSS那些事儿-阅读随笔2（选择符的组合与优先级/权重）的更多相关文章
	

    
								
  1. CSS那些事儿-阅读随笔1（CSS简介与选择符）
		
    最近开始详细钻研CSS有关的知识,参考资料是<CSS那些事儿>.将把在此过程中的收获进行记录,方便以后的学习. 一.CSS简介 1.什么是CSS CSS全称为Cascading Style ...
    
		
    2. 
						
  2. CSS那些事儿-阅读随笔3（清除浮动）
		
    浮动主要是由浮动(float)属性导致的页面错位现象,清除浮动不仅能解决页面错位的现象,还可以解决子元素浮动导致父元素背景无法自适应子元素高度的问题.在CSS样式中,主要利用clear属性中的both ...
    
		
    3. 
						
  3. CSS第二天总结 更多的选择符
		
    CSS的选择符非常多,今天继续总结后面的选择符 1.id和class选择符某些情况下我们用关系选择符或者伪类选择符无法选中一些元素时,我们可以给这些元素起 个名字或者分类,这就是id和class属性. ...
    
		
    4. 
						
  4. css之属性及剩余的选择符
		
    今天的课程加速了,比平时快了些,但觉得很不错.nice~ 属性选择符 E[att]       选择具有att属性的E元素. input[type]{color: #red;} <input t ...
    
		
    5. 
						
  5. CSS 中常用的选择器（选择符）
		
    一.标签选择器:直接将HTML标签(Tag)作为选择器,可以是p.h1.dl.strong等HTML标签.如: p { font:12px;}em { color:blue;}dl { float:l ...
    
		
    6. 
						
  6. CSS选择符、属性继承、优先级算法以及CSS3新增伪类、新特性
		
    CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?CSS新增了哪些特性?下面我整理了一些,仅供参考. CSS 选择符: 1)      id选择器(# myid)  ...
    
		
    7. 
						
  7. CSS和html如何结合起来——选择符及优先级
		
       1.选择符     兼容性 统配选择符 *         元素选择符 body   类选择符 .class   id选择符 #id         包含原则符 p strong     (所有 ...
    
		
    8. 
						
  8. 黑马学习CSS选择器 简单选择器 结合符 选择器组合  选择器优先级
		
    
		
    9. 
						
  9. css那些事儿1 css选择符与管理
		
    结合当下作为一名net程序员,难以找到工作情况下,先学习前端知识,前端现在已成为web和app的一个交叉点,web前端化,app使用h5技术前端化,至于什么后台数据库 缓存 消息队列的路线如果没有大型 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 转发 PHP 资料(一)
			
    WebShell隐藏思路.webshell磁盘读写动态检测.webshell沙箱动态检测(2)   作为WebShell检测.CMS修复.WebShell攻防研究学习的第二篇文章 本文旨在研究Webs ...
    
			
    2. 
						
  2. SQL动态更新表字段 传入字段可能为空
			
    小技巧: 项目组有修改产品的基本信息字段 但有时候传入的字段可能为空 也可能不为空  动态修改表中字段. USE [BetaProductMarket_DB] GO )) BEGIN DROP PRO ...
    
			
    3. 
						
  3. IOS game
			
    App Store真是个金矿,即使是红海一片,黑马也依旧不少,前有愤怒的小鸟,现在出了个Flappy Bird,虽然是去年推出的,但最近爆红App Store和Google Play,越南河内的独立游 ...
    
			
    4. 
						
  4. 闭包(Closures)
			
    浅析 JavaScript 中的闭包(Closures) 一.前言 对于 JavaScript 来说,闭包是一个非常强大的特征.但对于刚开始接触的初学者来说它又似乎是特别高深的.今天我们一起来揭开闭包 ...
    
			
    5. 
						
  5. My97DatePicker{js日历插件}
			
    VS自带了一个日历控件:Calendar,但是它有一个缺陷:即在选择,隐藏,显示的时候都会引起回传 Calendar控件的一些用法:    取值:Calendar1.SelectedDate.ToSh ...
    
			
    6. 
						
  6. bnu 4353 删格游戏（博弈）
			
    http://www.bnuoj.com/bnuoj/problem_show.php?pid=4353 [题意]:每次选择一个小格后,该小格的右上部分就全被删去了,且要求每次至少删去一个格子,选中左 ...
    
			
    7. 
						
  7. MySQL中字符串函数详细介绍
			
    MySQL字符串函数对于针对字符串位置的操作,第一个位置被标记为1. ASCII(str)返回字符串str的 最左面字符的ASCII代码值.如果str是空字符串, 返回0.如果str是NULL,返回N ...
    
			
    8. 
						
  8. 3.8 spring-qualifier 子元素的使用与解析
			
      对于 qualifier 子元素,我们接触的更多的是注解形式,在使用Spring 自动注入时,Spring 容器中匹配的候选 Bean 数目必须有且仅有一个.当找不到一个匹配的 Bean 时, S ...
    
			
    9. 
						
  9. 解决win8 64位提示MSVCP71.DLL等组件缺失
			
    把压缩包里面的DLL解压,只需要把其实缺失DLL复制到C:\Windows\SysWOW64即可.压缩包包含MSVCP70.DLL.MSVCP71.DLL.MSVCR70.DLL.MSVCR71.DL ...
    
			
    10. 
						
  10. "Principles of Reactive Programming" 之<Actors are Distributed> （2）
			
    Actor Path 我们知道actor是有层级的(hierarchical),第.每个actor在它的父actor的名字空间下都有一个名字.这样就构成了一个树状的结构,就像是文件系统.每个actor ...
    
			
    11.