1. 1. CSS
  2.     CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。
  3.     当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
  4.  
  5. 2.CSS语法
  6.     每个CSS样式由两个组成部分：选择器和样式。样式又包括属性和属性值。每个样式之后用分号结束。
  7.     选择器 {样式1;样式2} 或者 选择器 {属性1：值1  ;  属性2：值2}
  8.         p { color:red ; font-size:18px }
  9. 3.CSS注释
  10.     /*这是注释*/
  11.  
  12. 4.CSS的3种引入方式
  13.     4.1 行内样式
  14.         <p style="color: red">Hello world.</p>
  15.  
  16.     4.2 内部样式: 写在网页的<head></head>标签对的<style></style>标签对中
  17.         <head>
  18.             <meta charset="UTF-8">
  19.             <title>Title</title>
  20.             <style>
  21.                     p{color: red}
  22.             </style>
  23.         </head>
  24.  
  25.     4.3 外部样式
  26.         <link  rel="stylesheet"  href="mystyle.css"  type="text/css"/>
  27.  
  28. 5.CSS选择器：元素选择器、ID选择器、类选择器比较常用
  29.     5.1 基本选择器: 元素选择器、ID选择器、类选择器、通用选择器。
  30.  
  31.         5.1.1 元素选择器 ：适用于 批量的\统一\默认的样式
  32.             html: <body>
  33.                 <p>迈腾2020</p>
  34.                      </body>
  35.             css:   p{color:red}
  36.  
  37.         5.1.2 ID选择器: id与#对应，适用于 给特定标签设置特定样式
  38.             html: <body>
  39.                 <p id="i1">迈腾2020</p>
  40.                      </body>
  41.             css:   #i1{color:red}
  42.  
  43.         5.1.3 类选择器： class与.对应 。可以多条语句都写c1。适用于 给某一些标签设置相同的样式
  44.             html: <body>
  45.                 <p class="c1">迈腾2020</p>
  46.                 <p class="c1">迈腾2019</p>
  47.                 <p class="c1">迈腾2018</p>
  48.                      </body>
  49.             css:   .c1{color:red} 或 p.c1{color:red}
  50.  
  51.         5.1.4 通用选择器：所有标签都使用同样的样式。
  52.             css:  *{color:red}
  53.  
  54.     5.2 组合选择器：后代选择器、儿子选择器、毗邻选择器、弟弟选择器。都是往下找，不会往上找。
  55.  
  56.         5.2.1 后代选择器：
  57.             html: <body>
  58.                     <div id="d1">
  59.                             <p>p儿子</p>
  60.                             <span>span儿子</span>
  61.                             <div>
  62.                                     <p>p孙子</p>
  63.                                    <span>span孙子</span>
  64.                             </div>
  65.                     </div>
  66.                    </body>
  67.             css:   #d1 p{color:red} 所有id为d1的p标签都是相同的样式:p儿子和p孙子都是红色。注意#d1和p中间是空格。
  68.  
  69.         5.2.2 儿子选择器：
  70.             html: <body>
  71.                     <div id="d1">
  72.                             <p>p儿子</p>
  73.                             <span>span儿子</span>
  74.                             <div>
  75.                                     <p>p孙子</p>
  76.                                    <span>span孙子</span>
  77.                             </div>
  78.                     </div>
  79.                    </body>
  80.             css:   #d1 > p{color:red} id为d1的p儿子是红色，而p孙子默认黑色。注意#d1和p中间是>。
  81.  
  82.         5.2.3 毗邻选择器：div和p必须是同级。上面的p孙子和p儿子不同级。
  83.             html: <body>
  84.                     <div>111</div>
  85.                     <p>222</p>
  86.                 <p>333</p>
  87.                    </body>
  88.             css:   div + p {color:red}。222变红色，而111和333还是默认黑色。注意div和p中间是+。
  89.  
  90.         5.2.4 弟弟选择器：div和下面的两个p必须是同级。div是两个p的哥哥。
  91.             html: <body>
  92.                     <div>111</div>
  93.                     <p>222</p>
  94.                 <p>333</p>
  95.                    </body>
  96.             css:   div ~ p {color:red}。222和333都变红色，而111还是默认黑色。注意div和p中间是~。
  97.  
  98.     5.3 属性选择器：sdf为自定义属性，也可以是其他属性，[]中括号是属性的意思。
  99.             html: <body>
  100.                     <p sdf="good">poor</p>
  101.                    <p sdf="1">smart</p>
  102.                    <p sdf="2">desire</p>
  103.                    <p sdf="3">focus</p>
  104.                    </body>
  105.             css:   [sdf]{color:red} 属性为sdf的样式都是红色。
  106.             css:   [sdf = "good"]{color:red} 仅仅属性为sdf = "good"的样式是红色。
  107.  
  108.             不怎么常用的属性选择器：
  109.             /*找到所有title属性以hello开头的元素*/
  110.             [title^="hello"] {color: red;}
  111.  
  112.             /*找到所有title属性以hello结尾的元素*/
  113.             [title$="hello"] { color: yellow;}
  114.  
  115.             /*找到所有title属性中包含（字符串包含）hello的元素*/
  116.                 [title*="hello"] {color: red;}
  117.  
  118.             /*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
  119.                 [title~="hello"] {color: green;}    
  120.  
  121.     5.4 分组选择器：
  122.             html: <body>
  123.                     <div>迈腾</div>
  124.                     <p>psdf</p>
  125.                    </body>
  126.             css:   div,p{color:red} 把div和p分到一组，设置相同的样式。注意div和p中间是逗号，。
  127.  
  128.             html: <body>
  129.                     <div id="d1">迈腾</div>
  130.                     <p>psdf</p>
  131.                    </body>
  132.             css:   #d1,p{color:red} 把id为d1的标签和p分到一组，设置相同的样式。
  133.  
  134.     5.5 嵌套选择器：
  135.             html: <body>
  136.                     <div class="c1">
  137.                             <p>111</p>
  138.                             <p>222</p>
  139.                             <span>333</span>
  140.                     </div>
  141.                    </body>
  142.             css:   .c1 p{color:red} 类c1内部所有p标签都设置红色，这也是后代选择器。
  143.  
  144.             html: <body>
  145.                     <div id="i1">
  146.                             <p>111</p>
  147.                             <p>222</p>
  148.                             <span>333</span>
  149.                     </div>
  150.                    </body>
  151.             css:   #i1 p{color:red} id为i1的标签内部所有p标签都设置红色，这也是后代选择器。
  152.  
  153. 6. 样式文件优先级：内联样式--id选择器--类选择器--元素选择器
  154.         1. 内联样式(直接在标签里面写style) 优先级最高
  155.         2.选择器都一样的情况下,谁靠近标签谁就生效
  156.         3. 选择器不同时, 计算权重来判断,权重计算永不进位，意思是100个id选择器都比不上一个内联选择器的优先级高。
       　　　　　　3.1 内联样式 1000
       　　　　　　3.2 id选择器 100
       　　　　　　3.3 类选择器  10
       　　　　　　3.4 元素选择器 1
  157.         除此之外还可以通过添加 !important方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。
  158.         万不得已可以使用!important
  159.             css: p{color:red !important}只有我生效。

day65-CSS选择器和样式优先级的更多相关文章

  1. Css - 选择器和样式

    Css - 选择器和样式 标签选择器 即使用html标签作为选择对象 <style>     div{ background:red; } </style> <div&g ...

  2. CSS权重及样式优先级问题

    CSS权重值计算 一条样式规则的整体权重值包含四个独立的部分:[A, B, C, D]; (1) A 表示内联样式(写在标签的style属性中),只有 1 或者 0 两个值:对于内联样式,由于没有选择 ...

  3. HTML|CSS之CSS选择器及样式

    知识内容: 1.CSS选择器 2.CSS常用样式 参考:http://www.cnblogs.com/yuanchenqi/articles/5977825.html 一.CSS选择器 1.基础选择器 ...

  4. CSS选择器整理以及优先级介绍

    一.基础选择器 选择器 名称 描述 兼容性 * 通配选择器 选择所有的元素 ie6+ E 元素选择器 选择指定的元素 ie6+ #idName id选择器 选择id属性等于idName的元素 ie6+ ...

  5. CSS - 权重，样式优先级

    关于CSS权重,一套计算公式来去计算,就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS值优先级的一个标准. 遇到样式应用问题,计算一下权重就知道优先级. 具体规 ...

  6. CSS选择器、样式、盒模型

    一.CSS基础选择器 # 1.*(通配选择器):html,body以及body下用于显示的标签 #html和body颜色会被改变,但是div标签不会发生改变,由于不同的选择器具有优先级 # 语法:* ...

  7. 关于css里决定样式优先级的权重

    最近学css样式,优先级有点繁琐,简单记录一下. css中的优先级规则为: 有!important的最优先: 其次权重高的优先: 权重相同则后定义优先,会覆盖前面的. 至于权重: #id 为100: ...

  8. css调试与样式优先级

    如何查看一个标签的当前css样式 如上图所示 先用标签选择器选择某个标签 然后在elements区域就会自动找到该标签 然后在右侧的styles区域整个区域都是该标签的样式,从上到下是显示的优先级,被 ...

  9. css选择器，样式表导入

    css笔记1.选择器(selecter)共9种 a.类型选择器 p{},body{} b.后代选择器 p h1{} c.ID选择 #idname{} d.类选择 .classname{} e.通用选择 ...

随机推荐

  1. StackExchange.Redis.DLL 操作redis简化版

    直接引入StackExchange.Redis.dll来操作redis using Newtonsoft.Json; using StackExchange.Redis; using System; ...

  2. 一、thinkphp安装

    参考:https://www.kancloud.cn/manual/thinkphp5/118006 0.在此之前安装好phpstudy https://www.xp.cn 1.下载composer, ...

  3. 5分钟搞懂：基于token的用户认证

    https://www.qikegu.com/easy-understanding/880 用户认证 用户认证或者说用户登录是确认某人确实是某人的过程,生活中靠身份证,网络上就要靠账号和密码.用户提供 ...

  4. Windows2008R2安装iis和iis下搭建web服务器（9.18 第七天）

    IIS internet information services 互联网信息服务微软开发的运行在windows中的互联网服务,提供了web.ftp.smtp服务 Windows server 200 ...

  5. 【pwnable.kr】coin1

    pwnable从入门到放弃又一发 说是一道pwnable,其实是一道coding... nc pwnable.kr 9007 连接上看看,玩硬币? 老子是来拿flag的,谁来哄孩子来了!!! 算了,f ...

  6. 对于AVL树和红黑树的理解

    AVL又称(严格)高度平衡的二叉搜索树,也叫二叉查找树.平衡二叉树.window对进程地址空间的管理用到了AVL树. 红黑树是非严格平衡二叉树,统计性能要好于平衡二叉树.广泛的在C++的STL中,ma ...

  7. 把a表格的内容读取出来，然后写到b表格

    把a表格的内容读取出来,然后写到b表格 #!/usr/bin/env python3 import sys #控制台要输入的两个参数格式为:python script_name.py 参数1 参数2 ...

  8. aced六类股票问题

    一.状态转移框架 在我们刷题的过程中,很多同学肯定会遇到股票问题这类题目,股票问题有很多种类型,大多数同学都知道要用动态规划去做,但是往往写不对状态转移方程,我刚接触这类问题时也是一头雾水,但是掌握了 ...

  9. 201771010123汪慧和《面向对象程序设计Java》第十七周实验总结

    一.理论部分 1.多线程并发执行中的问题 ◆多个线程相对执行的顺序是不确定的. ◆线程执行顺序的不确定性会产生执行结果的不确定性. ◆在多线程对共享数据操作时常常会产生这种不确定性. 2.线程的同步 ...

  10. 使用svn时出现Can't switch /XXX/XXX because it is not the repository yet

    问题描述 出现的问题如题目所示. 翻译一下:不能选择这个目录,原因是这个目录还不是svn仓库. 解决办法 这个问题出现的原因是你将项目中的.svn文件夹删除了,一般情况你是可以通过撤销将文件恢复的.如 ...