代码实现：

 <!DOCTYPE html>

 <html lang="en">

     <head>

         <meta charset="utf-8">

         <title>css的综合使用</title>

         <style>

             div {

                 color: #daa520;

             }

             .red {    /*上面点声明，下面class调用。*/

                 color: red;

             }

             #green {

                 color: green;

             }

             * {

                 /*css选择器的优先级：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性*/

                 /*color: orange!important;*/

                 color: green;

             }

             div ul li ol li {

                 color: skyblue;

             }

             .blue {

                 color: blue;

             }

             h4.blue {

                 color: purple;

             }

             h2,h6,hr {

                 text-align: center;

             }

             a:link {

             /*未访问过的链接状态*/

             color: red;

             font-size: 25px;

             text-decoration: none; /*取消下划线*/

             font-weight: 700;    /*字体加粗*/

         }

         a:visited {

             /*已经访问过的链接*/

             color:#0e0e0e;

         }

         a:hover {

                 /*鼠标经过的状态*/

             color: green;

         }

         a:active {

                 /*鼠标按下的状态*/

             color: skyblue;

         }

         </style>

     </head>

     <body>

         <!-- 1.基本选择器：标签选择器、类选择器、id选择器、通配符选择器 -->

         <!-- 标签选择器：可以选择某一类标签 -->

         <div>标签选择器</div>

         <div>标签选择器</div>

         <div>标签选择器</div>

         <div>标签选择器</div>

         <!-- 类选择器:可以选择一个或者多个标签-->

         <div>

             <ul>

                 <li><a href="#" class="red">类选择器</a></li>

             </ul>

             <h5 class="red">类选择器</h5>

         </div>

         <!-- id选择器：#声明，id调用。 -->

         <div id="green">id选择器</div>

         <div id="green">id选择器</div>

         <div>id选择器</div>

         <!-- 通配符选择器 -->

         <span>通配符选择器</span>

         <span>通配符选择器</span>

         <span>通配符选择器</span>

         <span>通配符选择器</span>

         <!-- 2.复合选择器：后代选择器、子代选择器、交集选择器、并集选择器 -->

         <!-- 后代选择器：用空格隔开，选取子孙后代 -->

         <div>

             <ul>

                 <li>

                     <ol>

                         <li>后代选择器</li>

                     </ol>

                             后代选择器

                 </li>

             </ul>

         </div>

         <!-- 交集选择器 -->

         <h4 class="blue">交集选择器</h4>

         <h4>交集选择器</h4>

         <h4>交集选择器</h4>

         <h4>交集选择器</h4>

         <!-- 并集选择器 :用逗号隔开,集体声明,相同样式的时候-->

         <h2>并集选择器</h2>

         <h6>并集选择器</h6>

         <hr />

         <!-- 3.链接伪类选择器：a:link{}、a:visited{}、a:hover{}、a:active{} -->

         <a href="http://www.cnblogs.com/SophiaBlog/">三水舌田心</a>

     </body>

 </html>

代码

运行结果：

具体知识导图：

以上是css最常用的各种选择器，具体的还是需要看手册。css选择器存在优先级，即它的优先级顺序为：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性。通配符选择器中，*代表所有的意思,使用较少。

css选择器的综合使用的更多相关文章

  1. Html 之div+css布局之css选择器

    CSS选择器 什么叫选择器?通俗的来说就是 我想改变html 中某个地方的  字体大小 或者背景色 或者其它属性 内边距 外边距,宽度高度 等等 一些Css 样式. 那么我们如何找到对应的 元素呢? ...

  2. 网站CSS选择器性能讨论

    CSS选择符由一些初始化参数组成,这些参数指明了要应用这个CSS规则的页面元素.作为一个网站的前端开发工程师,应该避免编写一些常见的开销很大的CSS选择符模式,尽量编写高效的CSS选择符,从而加快页面 ...

  3. 第二天（CSS 选择器）

    1.常用的CSS选择器         类型选择器: 例如: p { color : red ; }         后代选择器: 例如: h2 span { font-weight : bold ; ...

  4. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  5. CSS选择器的优化

    前面花了几个篇幅着重介绍了CSS的选择器的使用,我将其分成三个部分:CSS基本选择器.CSS属性选择器以及CSS伪类选择器.那么今天我主要想和大家一起来学习——CSS选择器方面的性能优化.因为对性能这 ...

  6. Html学习之七（CSS选择器的使用--基础选择器优先级问题）

    二.基础选择器的综合使用 优先级顺序:id选择器>class选择器>元素选择器.也就是说,如果这三种选择器同时为某一个元素设定样式,那么冲突的部分按优先级的顺序依次决定. <!DOC ...

  7. css — 选择器、盒子模型

    目录 1. css引入方式 2. css选择器 3. css的盒模型 css: 层叠样式表 1. css引入方式 行内样式 <div style='color:red;'>mjj</ ...

  8. selenium元素定位之css选择器

    在selenium元素定位时会用到css选择器选取元素,虽说xpath在定位元素时能解决大部分问题,但使用css选择器选取元素也是一种不错的选择. css相较与xpath选择元素优点如下: 表达式更加 ...

  9. Day 31：CSS选择器、常用CSS样式、盒子模型

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Whl自助搜索下载器

    本文转载自以下链接:https://github.com/Light-City/AutoDownloadWhl 源码地址: https://github.com/Light-City/AutoDown ...

  2. debian 7 安装

    1. 从 live cd 或者 dvd 进行安装,官方文档已经够用,可以将 live cd 写进 u 盘,也可以将 dvd 放到硬盘上通过 grub 引导启动安装,文档在这里. 2.安装过程中尽量选择 ...

  3. hdu 3500 DFS(限定)

    Fling Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others)Total Submi ...

  4. 53. Maximum Subarray(动态规划）

    Find the contiguous subarray within an array (containing at least one number) which has the largest ...

  5. Anton and Permutation

    Anton and Permutation time limit per test 4 seconds memory limit per test 512 megabytes input standa ...

  6. paste deploy初探

    这段时间刚着手开始研究Openstack Swift源码,为后续开发做准备. Swift依据python WSGI规范.WSGI(Web Server Gateway Interface)是Pytho ...

  7. [bzoj1634][Usaco2007 Jan]Protecting the Flowers 护花_贪心

    Protecting the Flowers 护花 bzoj-1634 Usaco-2007 Jan 题目大意:n头牛,每头牛有两个参数t和atk.表示弄走这头牛需要2*t秒,这头牛每秒会啃食atk朵 ...

  8. UNIX环境编程学习——反思认识

     学习情况: 有关UNIX系统环境编程的学习时间用来非常长的时间.可是感觉效果还是不是太好,在中间经过了期末考试.用来非常长的时间用来学习专业课.就将该过程的学习放到了一边上,放假以后又回家造成了 ...

  9. Git 主要的工作流程

    Git使用个进制字符的SHA- Hash来唯一标识对象 如:e98757d0598ab6eeaf1df0d87dd00826048bd80b git 有种对象 1.blob 表示文本文件,二进制文件或 ...

  10. zoj2676 Network Wars(0-1分数规划，最大流模板)

    Network Wars 07年胡伯涛的论文上的题:http://wenku.baidu.com/view/87ecda38376baf1ffc4fad25.html 代码: #include < ...