css，又称样式重叠表，如今的网页的样式基本是div+css写出来的，功能十分强大，要想在html文件中引入css文件需要在<head></head>标签内输入一行：<link  rel=" stylesheet "  type=" text/css "  href=" XXX.css ">

　　css的一些基本样式也不一 一做介绍了，这个在手册以及一些学习网站上都会有，大家可以自行查阅；

　　css中有四种不同的选择器：1.类选择器（class选择器）；2.id选择器；3.html元素选择器；4.通配符选择器；

　　1.class选择器的使用：

　　. 类选择器名{                                           //类选择器前面的  .   一定要加

　　　　属性名：属性值；

　　　　...

　　}

　　2.id选择器的使用：

　　# id选择器名{　　　　　　　　　　　//在样式表中，id选择器的优先级最高

　　　　属性名：属性值；

　　　　...

　　}

　　3.html元素选择器：

　　html标签名{　　　　　　　　　　　　//  eg：   a{    }     img{    }     body{  }   等等

　　　　属性名：属性值；　　　　　　　//当定义一个html元素选择器后，所有该元素的样式都会发生改变

　　　　...

　　}

　　//同一html元素选择器中也可进行分类处理

　　html标签名.类名{　　　　// eg:   a . cls1 {                a . cls2 {

　　　　属性名：属性值；　　　　  　　　　 属性名：属性值； 　　　　属性名：属性值；　　　　　

　　　　...　　　　　　　　　　　    　　　　...　　　　　　　　　　　　...

　　}　　　　　　　　　　　　　     　　}　　　　　　　　　　　　　}

　　/* 应用到页面中   <a  class="cls1">    这个会渲染出a.cls1的样式

　　　　　　　　　 <a  class="cls2">     这个会渲染出a.cls2的样式 */

　　4.通配符选择器：

　　* {　　　　　　　　　　　　　//通配符选择器会作用于所有的样式，大部分用来定义初始化所有内外页边距，但是其优先级是最低的

　　　　属性名：属性值；　　　　//通常一些有经验的web前端工程师习惯性把页边距清零

　　　　...　　　　　　　　　　　　//margin：0px ；   padding：0px；

　　}

　　四个选择器的优先级：  id选择器 > class选择器 > html元素选择器 > 通配符选择器 ；

　　父子选择器：                                //eg：   <span="id">我<span>这里</span>有<span>一段</span>代码</span>

　　# id {　　　　　　　　　　　　　　　// " 我 "，“ 有 ” ，“ 代码 ”  会渲染这个样式

　　　　属性名：属性值；　　　　　　　　　　　　

　　}

　　# id  span{　　　　　　　　　　　　// “ <span>这里</span>”  会渲染这个样式

　　　　属性名：属性值；

　　}

　　# id span span {　　　　　　　　　// “ <span>一段</span> ”  会渲染这个样式

　　　　属性名：属性值；　

　　}

　　父子选择器总结：父子选择器中可以有多层级（但在实际开发中不建议超过三层），

　　　　　　　　　　父子选择器有严格的层级关系；

　　　　　　　　　　任何类型的选择器都可以有父子选择器；

　　多个css文件可以相互引用，使用@import  url（“被引入的路径和文件名”）指令引入 ；

有关css的选择器优先级以及父子选择器的更多相关文章

  1. css引入方式优先级以及不同选择器的优先级区别

    我们都知道css有3种基本设置方式即 1.行内也叫嵌入式 例如: <div style='background:red'></div> 2.内联式,在html文件中用style ...

  2. 深入理解CSS选择器优先级

    题外话 今天把 <CSS REFACTORING>(中文名叫<CSS重构:样式表性能调优>)电子书粗略的浏览了一遍,这本书很薄,150页左右,首先是介绍了什么是重构并举了两个简 ...

  3. CSS学习之选择器优先级与属性继承

    CSS学习之选择器优先级与属性继承 选择器优先级 其实选择器是具有优先级的,我们来看下面这一组案例: <!DOCTYPE html> <html lang="en" ...

  4. 伪元素选择器，选择器优先级，CSS修改文字属性，CSS修改字体属性，CSS修改其他属性

    伪元素选择器 未使用元素选择器的效果 第一行:伪元素选择器:选择部分内容 第二行:伪元素选择器:选择部分内容 伪元素选择器:选择部分内容 伪元素选择器:选择部分内容 ::selection:选择指定元 ...

  5. CSS选择器优先级

    1.类的覆盖顺序和应用的时候引用的顺序没关系,覆盖顺序取决于类定义的顺序     例如: .a{ color:red } .b{ color:green }     由于b晚于a定义,所以b覆盖a,反 ...

  6. css几个优先级测试和!important

    css样式不加!important情况下的有默认优先级 ,用!important提高优先级,最常见的css样式选择器的优先级测试.之前博文里也用到了提升优先级的方法: 测试结果:加了!importan ...

  7. css笔记09：选择器优先级

    1. (1) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  8. python 46 css组合选择器 及优先级 、属性选择器

    一:css组合选择器 特性:每个选择器位可以为任意基本选择器或选择器组合 选择器分为以下几类: 群组选择器,子代(后代)选择器,相邻(兄弟)选择器,交集选择器,多类名选择器 1.群组选择器:    d ...

  9. css知多少（6）——选择器的优先级

    1. 引言 上一节<css知多少(5)——选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的 ...

随机推荐

  1. Luogu 2951 捉迷藏Hide and Seek

    P2951 [USACO09OPEN]捉迷藏Hide and Seek 题目描述 Bessie is playing hide and seek (a game in which a number o ...

  2. UID中RUID、EUID和SUID的区别

    看UNIX相关的书时经常能遇到这几个概念,但一直没有好好去理清这几个概念,以致对这几个概念一直一知半解.今天好好区分了一下这几个概念并总结如下.说白了这几个UID引出都是为了系统的权限管理. 下面分别 ...

  3. 【模板】树链剖分求LCA

    洛谷3379 #include<cstdio> #include<algorithm> using namespace std; ,inf=1e9; int n,m,x,y,r ...

  4. clock()函数的使用

    **clock()捕捉从程序开始运行到clock()被调用时所耗费的时间,这个时间单位是clock tick, 即"时钟打点." 常数CLK_TCK:机器时钟每秒所走的时钟打点数* ...

  5. 【Codeforces 466C】Number of Ways

    [链接] 我是链接,点我呀:) [题意] 让你把数组分成3个连续的部分 每个部分的和要一样 问你有多少种分法 [题解] 先处理出来num[i] 表示i..n这里面有多少个j 满足aft[j] = af ...

  6. hpu第六次周赛Problem F

    Problem F Time Limit : 3000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Sub ...

  7. [bzoj1131][POI2008]Sta_树形dp

    Sta bzoj-1131 POI-2008 题目大意:给定一棵n个点的树,求一个根,使得深度和最大. 注释:$1\le n \le 10^6$. 想法:扭一扭即可. 扭的时候看看这个点当没当过根. ...

  8. bootstrap-table设置height后表头与内容无法对齐的问题

    bootstrap-table项目官网:https://github.com/wenzhixin/bootstrap-table bootstrap-table各版本下载:https://github ...

  9. 关于Activiti的工作流选型

    1. 引言 由于Activiti面世出现也比较早,加上是Java领域的开源工作流,自然而然也被很多企业个人拿来使用,有做做简单的或有深入的二次开发使用的.作为一个资深的BPM领域技术专家,貌似如果没有 ...

  10. FOJ 10月赛题 FOJ2198~2204

    A题. 发现是递推可以解决这道题,a[n]=6*a[n-1]-a[n-2].因为是求和,可以通过一个三维矩阵加速整个计算过程,主要是预处理出2^k时的矩阵,可以通过这道题 #include <i ...