代码实现：

 <!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. JQ + PHP + TrackMore物流信息跟踪

    在使用之前,您需要先去trackmore官方网站申请API_KEY,传送门:TrackMore html <script type="text/javascript" src ...

  2. 小白神器 - 一篇博客学会HTML

    小白神器 - 一篇博客学会HTML 一. 简介 1. HTML 定义 htyper text markup language  即超文本标记语言. 超文本: 就是指页面内可以包含图片.链接,甚至音乐. ...

  3. net core 配置Redis Cache

    参考文章地址:https://dotnetcoretutorials.com/2017/01/06/using-redis-cache-net-core/ 具体步骤: 1   Install-Pack ...

  4. 【codeforces 515C】Drazil and Factorial

    [题目链接]:http://codeforces.com/contest/515/problem/C [题意] 定义f(n)=n这个数各个位置上的数的阶乘的乘积; 给你a; 让你另外求一个不含0和1的 ...

  5. 球的序列(formation.*)

      N个编号为1-n的球,每个球都有唯一的编号.这些球被排成两种序列,分别为A.B序列,现在需要重新寻找一个球的序列l,对于这个子序列l中任意的两个球,要求j,k(j<k),都要求满足lj在A中 ...

  6. 51nod——T1267 4个数和为0

    https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1267 题目描述 给出N个整数,你来判断一下是否能够选出4个数,他们的和 ...

  7. N天学习一个linux命令之xz

    前言 最近使用gitbook写接口文档,gitbook需要nodejs执行环境.安装nodejs时,发现安装包使用的是xz后缀,它是使用LZMA无损数据压缩算法生成的文件,压缩率很高.GNU已经内置了 ...

  8. [转]十五天精通WCF——终结篇 那些你需要注意的坑

    终于一路走来,到了本系列的最后一篇了,这一篇也没什么好说的,整体知识框架已经在前面的系列文章中讲完了,wcf的配置众多,如果 不加一些指定配置,你可能会遇到一些灾难性的后果,快来一睹为快吧. 一: 第 ...

  9. Android：解决cannot find zipalign的问题

    如果当前使用的Android SDK是v20的话,在通过Eclipse或者Intellij IDEA打包Android项目时,会出现一个”cannot find zipalign”的错误. 这个错误的 ...

  10. php session自定义处理

    原文:http://www.cnblogs.com/mrcoke/  这个人的博客上转的. 这个博客也好: 学算法和数据结构!!http://blog.csdn.net/21aspnet/articl ...