本次课程讲CSS中的选择符

1.基本选择符

基本选择符有三个

　　1.标记名选择符

　　　　所谓的标记名选择符就是直接在样式中使用标记名定义，譬如以下代码：

　　　　(此种选择符的特点是所有相同的标记名可以同时定义不需要单独写，比如下列第二段代码)

p{

     font-size:15pt;

     color：#FF0000；

}
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style type="text/css">

         p{

             font-size:15px;

             color:#FF0000;

         }

     </style>

 </head>

 <body>

     <p>这是第一段文字</p>

     <p>这是第二段文字</p>

     <p>这是第三段文字</p>

 </body>

 </html>

　　

　　2.ID选择符

　　　　所谓ID，即唯一，每个元素都有一个唯一的ID，就像每个人都有唯一的一个身份证一样，用来标识身份。ID需要在标记名内部定义，CSS中使用#定义的ID名称来定义样式。

　　　　（此选择符的特点是唯一性，只有唯一定义的ID才有样式效果。）以下是例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style type="text/css">

         #p1{

             font-size:15px;

             color:#FF0000;

         }

     </style>

 </head>

 <body>

     <p id="p1">这是第一段文字,有样式效果</p>

     <p>这是第二段文字，无样式效果</p>

 </body>

 </html>

　　3.class类选择符

　　　 所谓类选择符，即定义为一个类的样式效果相同。比如你一个班的班级名称都是一样的，班级名称就是这个班里所有同学的一个类。

　　   （此选择符是定义在同一个类下的显示效果是相同的，而没有定义在同一个类中的将不会显示相同的效果。定义时需要在CSS中以.class_name定义）以下给出案例代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style type="text/css">

         .p1{

             font-size:15px;

             color:#FF0000;

         }

     </style>

 </head>

 <body>

     <p class="p1">这是第一段文字,有样式效果</p>

     <p>这是第二段文字，无样式效果</p>

 </body>

 </html>

这时候有同学想到了，如果一个标记名中定义两个class类选择符改怎么办呢？我们可以是使用一下方法定义

多个class之间用空格隔开，来实现一次引用两个类

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style type="text/css">

         .p1{

             color:#00FF00;

         }

         .p2{

             font-size:18px;

         }

     </style>

 </head>

 <body>

 <p>这是第一段文字,没有引用样式效果的</p>

 <p class="p1 p2" >这是第二段文字，是引用两个类样式效果的</p>

 <p class="p2">这是第三段文字，引用一个类样式效果的</p>

 </body>

 </html>

现在给出三种选择符一起使用的效果会有什么不同呢？

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style type="text/css">

         p{

             font-size:12px;

             color:#00FF00;

         }

         .p1{

             font-size:15px;

             color:#FF0000;

         }

         #p2{

             font-size:18px;

             color:#0000FF;

         }

     </style>

 </head>

 <body>

     <p>这是第一段文字,是标记名的样式效果</p>

     <p class="p1">这是第二段文字，是class类的样式效果</p>

     <p id="p2">这是第三段文字，是ID选择符的效果</p>

 </body>

 </html>

这是执行效果如果把颜色值都改成相同的我们来看一下效果

有些同学就发现了，这个颜色值一样，标记名相同。应该显示效果是完全相同，为什么字体不同呢？

那是因为这三个基本选择符是有优先级的。

优先级由高到低分别是：ID选择符 > Class类选择符 > 标记名选择符

优先级高的选择符定义的样式如果与优先级低的选择符样式冲突会把低级的覆盖掉。这是选择符优先级的问题，后面我会单独讲解选择符优先级的问题。

2.群组选择符与通用选择符

1.群组选择符

何为群组，即多个标记名选择符，ID选择符，class类选择符等使用逗号隔开来定义相同样式

下面举个例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style type="text/css">

         .p1 , #p2 , p{

             font-size: 15px;

             color:#00FF00;

         }

     </style>

 </head>

 <body>

     <p>这是第1段文字</p>

     <p class="p1">这是第2段文字</p>

     <p id="p2">这是第3段文字</p>

 </body>

 </html>

2.通用选择符

通用选择符使用*号定义，定以后所有的标记名都会有里面定义的样式也不需要你单独去指定。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style type="text/css">

         *{

             font-size: 15px;

             color:#00FF00;

         }

     </style>

 </head>

 <body>

 <p>这是第1段文字</p>

 <span id="p2">这是第2段文字</span><br />

 <a class="p1">这是第3段文字</a>

 </body>

 </html>

3.包含选择符（又称为派生选择符）

包含选择符即多个选择符用空格隔开的组合，仅对包含在指定父元素内符合条件的子元素有效。就好比你爹的钱只能给你花，不能给别人家的孩子花。下面给大家举个例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style type="text/css">

         p span{

             font-size: 15px;

             color:#00FF00;

         }

     </style>

 </head>

 <body>

     <p><span>这是第1段文字,有样式效果</span></p>

     <p>这是第2段文字，无样式效果</p>

     <span>这是第3段文字,无样式效果</span>

 </body>

 </html>

有的同学就想问了为什么第一段效果而第三段没有效果呢？

其实包含选择符必须要在父元素下有指定的子元素才可以显示定义的样式效果。第三段并不是p标记的子元素，所以不会有样式效果。如果是相邻选择符就会有效果

4.相邻选择符

刚才提到了这个相邻选择符我就讲一下吧，其实到此为止，主要的选择符已经讲完了。

所谓相邻选择符就是以前一个标记名为标记，定义下一个选择符的样式。给你个例子你就明白了：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style type="text/css">

         p + span{

             font-size: 15px;

             color:#00FF00;

         }

     </style>

 </head>

 <body>

     <p><span>这是第1段文字,有样式效果</span></p>

     <p>这是第2段文字，无样式效果</p>

     <span>这是第3段文字,无样式效果</span>

 </body>

 </html>

自己仔细观察一下这个代码与上面的包含选择符的区别之处你就会明白！

5.不常用的三种选择符

1.子对象选择符

2.属性选择符

3.伪对象（伪元素）选择符

这三个不常用，有兴趣的可以去W3C上自己去学习一下。

6.！important提高样式的优先级

!important只是用来提高样式的优先级的，可以将优先级提升到最高。下面是例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style type="text/css">

         p{

             color: #0000FF !important;

         }

         .p1{

             color:#00FF00 ;

         }

         #p2{

             color: #FF0000;

         }

     </style>

 </head>

 <body>

     <p>这是第1段文字</p>

     <p class="p1">这是第2段文字，无样式效果</p>

     <p id="p2">这是第3段文字,无样式效果</p>

 </body>

 </html>

7.样式规则的优先级原则

按照情况给大家介绍

1.如果只有内联样式。在标记名内部定义，不需要考虑样式的优先级。定义的什么样式会显示什么样的效果。

2.如果只有内嵌样式

*{规则0}

p{规则1}

.p1{规则2}

#p2{规则3}

其优先级顺序由高到低是：#p2{规则3}--->.p1{规则2}--->p{规则1}--->*{规则0}

如果定义的样式有冲突，以优先级高的为主。（其实大家可以记住一句话，后定义的优先级高（前提是相同级别的选择符））

3.如果有内嵌样式和内联样式，首先内联的样式优先级会永远高于内嵌中定义的样式。其他内嵌中的样式按2中的顺序

4.如果有外部样式表定义和内联与内嵌三种同时使用：

这种情况内联的样式优先级最高，然后分情况，看是外部定义在前还是内嵌定义在前。那个在前那个里面定义的优先级低（如果冲突以优先级高的为准），后定义的优先级高（需要好好体会如何才是后定义的优先级高）。

这次内容就算讲完了，下次会讲盒子模型。本次内容主要就是讲选择符，以及选择符的优先级。

　 　　

HTML第三讲（选择符）的更多相关文章

  1. CSS基础篇之选择符2

    属性选择符: 选择符 版本 描述 E[att] CSS2 选择具有att属性的E元素. E[att="val"] CSS2 选择具有att属性且属性值等于val的E元素. E[at ...

  2. CSS基础篇之选择符

    关系选择符 E F 包含选择符(Descendant combinator) CSS1 选择所有被E元素包含的F元素. <html> <head> <meta chars ...

  3. 30个你必须记住的CSS选择符

    所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性.在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用. 1. ...

  4. DOM扩展-Selectors API(选择符 API)、元素遍历

    DOM扩展 对DOM的两个主要扩展是SelectorsAPI(选择符API)和HTML5 SelectorsAPI(选择符API)是由W3C发起制定的一个标准,致力于浏览器原生支持CSS查询,Sele ...

  5. html基本选择符的使用

    一.选择符在运用在CSS设计样式时对HTML的指定有至关重要的作用! 二.研究 普通选择符: 1.类型选择符:它可以选择同一个类型的元素! 例如:h1,h2 {              color: ...

  6. CSS属性选择符

    属性选择符: E[att] 选择具有att属性的E元素. <style type="text/css"> a[class]{ background-color: red ...

  7. css选择符

    E>F:子选择符,选择所有作为E元素的子元素F.<style type="text/css">li>a {color: #ccc;}</style&g ...

  8. CSS高级选择符

    2016-11-07 <css入门经典>第八章 1.属性选择器 选择器 描述 [attribute] 用于选取带有指定属性的元素. [attribute=value] 用于选取带有指定属性 ...

  9. #8.10.16总结# 属性选择符 伪对象选择符 CSS的常用样式

    属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val ...

随机推荐

  1. Egret引擎开发基础（一）

    显示图片 var batman:egret.Bitmap = new egret.Bitmap( RES.getRes('hexo-huaheshang_png')); batman.x = 0; b ...

  2. Object.defineProperty和Object.defineProperties

    添加属性到对象,或修改现有属性的特性   用法:     Object.defineProperty(object, propertyName, descriptor); 参数:     object ...

  3. (转载)Ubuntu 16.04+1080Ti机器学习基本环境配置

    转载自:https://blog.csdn.net/mahonesun/article/details/80808930 一.设置网络 机器有两张网卡,将当前正在使用的"有线连接1" ...

  4. Android 旋转、平移、缩放和透明度渐变的补间动画

    补间动画就是通过对场景里的对象不断进行图像变化来产生动画效果.在实现补间动画时,只需要定义开始和结束的“关键帧”,其他过渡帧由系统自动计算并补齐.在Android中,提供了以下4种补间动画. **1. ...

  5. android 官方demo地址

    android官方demo地址都放在了github上:https://github.com/googlesamples

  6. Angular2 表单验证相关

    angular4响应式表单与校验http://blog.csdn.net/xiagh/article/details/78360845?locationNum=10&fps=1 How to ...

  7. n人围圈报数,报3出圈

    题目:有n个人围成一圈,顺序排号.从第一个人开始报数(从1到3报数),凡报到3的人退出圈子,问最后留下的是原来第几号的那位. Scanner scanner = new Scanner(System. ...

  8. UVA-11419 SAM I AM （最小点覆盖）

    题目大意:在一个n*m的网格中,有k个目标,现在可以任选一行或列消除在其上的所有目标,求出最少选择次数及选法. 题目分析:经典的最小点覆盖问题,并且输出一个最小点覆盖集.在求出最大匹配之后,以未覆盖的 ...

  9. STL中的map

    map 容器 提供 1 对 1 的关系 定义方式: map<string,int>mp; 写在前面的是关键字. 数据插入: 1.使用 insert 插入 pair 数据 mp.insert ...

  10. 235.236. Lowest Common Ancestor of a Binary (Search) Tree -- 最近公共祖先

    235. Lowest Common Ancestor of a Binary Search Tree Given a binary search tree (BST), find the lowes ...