本次课程讲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. 20145325张梓靖 《Java程序设计》第16周课程总结

    20145325张梓靖 <Java程序设计>第16周课程总结 实验报告链接汇总 实验一 "Java开发环境的熟悉" 实验二 "Java面向对象程序设计&quo ...

  2. 通过FISH和下一代测序检测肺腺癌ALK基因融合比较

    ALK FISH探针是FDA批准的用于检测肺癌患者中ALK重排的方法,这些患者可能受益于ALK激酶抑制剂.FISH测定在技术上可能具有挑战性并且难以解释.已经有研究者提出以ALK免疫组织化学和下一代测 ...

  3. SDK manager 中 Done loading packages 问题

    1.在选项栏中点击tools,选择Optons… 在弹出的设置窗口中勾选Force https://…sources to be fetched using http://… 然后点击Close 4． ...

  4. Tensorboard 的使用笔记

    参考的教程: https://www.tensorflow.org/guide/summaries_and_tensorboard 遇到的错误: File "/usr/local/lib/p ...

  5. REST服务使用@RestController实例，输出xml/json

    REST服务使用@RestController实例,输出xml/json 需要用到的服务注解 org.springframework.web.bind.annotation.RestControlle ...

  6. Educational Codeforces Round 23C

    超级坑的水题!!!想了两天没一点思路,看了题解第一段话就做出来了 刚开始一直在想找到通项就是例如an*10^n+...+a0*10^0-an-...-a0>=s,然后从这个里面找到规律,结果走进 ...

  7. C# 简单生成双色球代码

    红球篮球产生代码 public class TestD { //产生几组数据 public void getzhu( int num) { ; m < num; m++) { getred(); ...

  8. WIN8.1 PRO RTM VOL.2013.09.18

    文件名:cn_windows_8_1_pro_vl_x64_dvd_2791218.isoSHA1:61C002551763E22B64EB1BACEFFE83620114C3D6 文件名:cn_wi ...

  9. 【Ubuntu14】Nginx+PHP5+Mysql记录

    这次因为工作原因,需要在Linux下进行开发.推荐的环境是Ubuntu14+Nginx+PHP+Mysql.环境搭建好之后,装上GIT,装上IDE,觉得Mysql命令界面麻烦又装了个Navicat.总 ...

  10. 2018.12.25 SOW

    1. Understanding Customer Requirements 11.1. Project Overview 21.2. System Requirements 21.3. Indust ...