###########总结####

标签选择器 标签名     id选择器  #box1   类选择器.box2

css高级选择器

  1. *子选择器*
  2. 子选择器用 大于号
  3. .box1>.box2{
  4.     width: 100px;
  5.     height: 100px;
  6.     background-color: yellow;
  7. }
  8.  
  9. .box1>div{
  10.     width: 100px;
  11.     height: 100px;
  12.     background-color: yellow;
  13. }
  14.  
  15. .box1>.box2>.box3{
  16.     width: 100px;
  17.     height: 100px;
  18.     background-color: green;
  19. }
  20. .box1>.box2>p{
  21.     color: red;
  22. }
  23.  
  24. 后代选择器
  25. 后代选择器用 空格
  26. .box2 p{
  27.     color: green;
  28. }
  29.  
  30. 通用选择器
  31. *{
  32.     margin: 0;
  33. }
  34.  
  35. 并集选择器  or的意思
  36. body, h1, p{
  37.     margin:0;
  38. }
  39.  
  40. 交集选择器  表示2者选中之后共有的特征
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.  
  7. <style>
  8.     .box {
  9.         color: red;
  10.     }
  11.  
  12.     p {
  13.         font-size: 20px;
  14.     }
  15.  
  16.     /*两个交集的部分给他设置黄色背景颜色*/
  17.     p.active {
  18.         background-color: yellow;
  19.     }
  20. </style>
  21. </head>
  22. <body>
  23. <div class="box1" id="wrap1">
  24.     <div class="box2" id="wrap2">
  25.         <div class="box3" id="wrap3">
  26.             <p class="box active ">倚天屠龙记</p>
  27.         </div>
  28.         <p>天龙八部</p>
  29.     </div>
  30. </div>
  31. <span>射雕英雄传</span>
  32. </body>
  33. </html>
  1. 属性选择器
  2. [type]{
  3.     color:red;
  4. }
  5. [type='submit']{
  6.     color:red;
  7. }
  8.  
  9. [type='text']{
  10.     color: green;
  11. }
  12.  
  13. [for^='test']{
  14.     color:red;
  15. }

伪类选择器

  1. body标签里面写
    <a href="http://www.baidu.com" target="_blank">点我</a>
  2.  
  3. /*未被访问的链接*/
  4. a:link{
  5.     color: green;
  6. }
  7.  
  8. /*访问过的链接*/
  9. a:visited{
  10.     color: red;
  11. }
  12.  
  13. /*鼠标悬浮的时候的颜色*/
  14. a:hover{
  15.     color:blue;
  16. }
  17.  
  18. /*鼠标按下时的样式*/
  19. a:active{
  20.     color: yellow;
  21. }
  22. ################
  23. ul li:first-child{#选择第一个孩子变颜色
  24.     color: green;
  25. }
  26.  
  27. ul li:last-child{ #选择最后一个孩子
  28.     color: yellow;
  29. }
  30.  
  31. ul li:nth-child(0){#选择指定的孩子
  32.     color: red;
  33. }
  34.  
  35. ul li:nth-child(3n){#间隔
  36.     color: red;
  37. }
  38. #################
  39.  
  40. p:first-letter{#选择第一个字符内容改变大小 颜色
  41.     font-size: 32px;
  42.     color: red;
  43. }
  44. p:before{#在标签前边添加一个标签内容
  45.     content: 'alex';
  46. }
  47. p:after{#在标签后面添加一个标签内容
  48.     content: '叫小宝宝';
  49. }

继承性
字标签可以继承父标签的样式: color, font-, text- line-

层叠性
(选择器权重一样的时候)后边添加的样式会覆盖前边的样式

权重
id 权重100
类 权重10
标签 权重 1
!important 权重无限大

都有!important 的时候,比较权重

  1. <div id='box1' class="wrap1">
  2.     <div id="box2" class="wrap2">
  3.         <div id="box3" class="wrap3">
  4.             <p>再来猜猜我是什么颜色？</p>
  5.         </div>
  6.     </div>
  7. </div>
  1. .box1{
  2.     color: blue;
  3. }
  4.  
  5. .box1 p{
  6.     color: red;
  7. }
  8.  
  9. p{
  10.     color: yellow;
  11. }
  12.  
  13. #pid{
  14.     color: green;
  15. }
  16.  
  17. .pclass{
  18.     color: blue;
  19. }
  20.  
  21. 权重问题
  22.  
  23. /*2 0 1*/
  24. #box1 #box2 p{
  25.     color: yellow;
  26. }
  27.  
  28. /*1 1 1 */
  29. #box2 .wrap3 p{
  30.     color: red;
  31. }
  32.  
  33. /*1 0 3*/
  34. div div #box3 p{
  35.     color: purple;
  36. }
  37.  
  38. /*0 3 1*/
  39. div.wrap1 div.wrap2 div.wrap3 p{
  40.     color: blue;
  41. }
  42.  
  43. /*权重相同的*/
  44. /*1 1 1 */
  45. #box1 .wrap2 p{
  46.     color: red;
  47. }
  48.  
  49. /*1 1 1 */
  50. #box2 .wrap3 p{
  51.     color: yellow;
  52. }
  53.  
  54. /*2 1 0 */
  55. #box1 #box2 .wrap3{
  56.     color: red;
  57. }
  58. /*1 1 0 */
  59. .wrap1 #box2{
  60.     color: green;
  61. }
  62.  
  63. /*2 0 0 */
  64. #box1 #box2{
  65.     color: red ;
  66. }
  67.  
  68. /*1 2 0 */
  69. .wrap1 #box2 .wrap3{
  70.     color: green;
  71. }
  72.  
  73. #box1 #box2 .wrap3{
  74.     color: red !important;
  75. }
  76.  
  77. #box2 .wrap3{
  78.     color: blue !important;
  79. }
  80.  
  81. #box3{
  82.     color: yellow;
  83. }

python css功能补充讲解的更多相关文章

  1. Shiro 核心功能案例讲解 基于SpringBoot 有源码

    Shiro 核心功能案例讲解 基于SpringBoot 有源码 从实战中学习Shiro的用法.本章使用SpringBoot快速搭建项目.整合SiteMesh框架布局页面.整合Shiro框架实现用身份认 ...

  2. 使用C++扩展Python的功能 转自：http://blog.csdn.net/magictong/article/details/8897568#comments

    使用C++扩展Python的功能 环境 VS2005Python2.5.4 Windows7(32位) 简介 长话短说,这里说的扩展Python功能与直接用其它语言写一个动态链接库,然后让Python ...

  3. EBS OAF开发中的Java 实体对象(Entity Object)验证功能补充

    EBS OAF开发中的Java 实体对象(Entity Object)验证功能补充 (版权声明,本人原创或者翻译的文章如需转载,如转载用于个人学习,请注明出处:否则请与本人联系,违者必究) EO理论上 ...

  4. 第八十五节，css布局补充一

    css布局补充一 图片边框问题 注意css布局时img图片标签默认有的浏览器有边框,所以大多时候需要去除图片的边框 CSS各种居中方法 水平居中的text-align:center 和 margin: ...

  5. python/数据库操作补充—模板—Session

    python/数据库操作补充—模板—Session 一.创建一个app目录 在models.py只能类进行进行创建表 class Foo: xx= 字段(数据库数据类型) 字段类型 字符串 Email ...

  6. css杂项补充

    css杂项补充 一.块与内联 1.块 独行显示 支持宽高,宽度默认适应父级,高度默认由子级或内容撑开 设置宽高后,采用设置的宽高 2.内联 同行显示 不支持宽高 margin上下无效果,左右会起作用, ...

  7. 十一. Python基础(11)—补充: 作用域 & 装饰器

    十一. Python基础(11)-补充: 作用域 & 装饰器 1 ● Python的作用域补遗 在C/C++等语言中, if语句等控制结构(control structure)会产生新的作用域 ...

  8. 019——VUE中v-for与computer结合功能实例讲解

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. Python常用功能函数

    Python常用功能函数汇总 1.按行写字符串到文件中 import sys, os, time, json def saveContext(filename,*name): format = '^' ...

随机推荐

  1. Codeforces1071C Triple Flips 【构造】【Four Russians】

    题目分析: 这种题目显然可以先考虑哪些无解.我们发现我们不考虑操作次数的时候,我们可以选择连续的三个进行异或操作. 这样我们总能使得一个序列转化为$000...000xy$的形式.换句话说,对于$00 ...

  2. 洛谷P1414又是毕业季二题解

    题目 思想: 首先这个题必定是一个数学题,肯定不是一个一个枚举得到解,这样肯定会T,所以我们就应该想一些别的方法,. 分析: 比如,答案,一定是递减的,因为该答案所满足的条件肯定是越来越苛刻的,所以我 ...

  3. LA3490 Generator(KMP + 高斯消元)

    题意 一开始给你一个长为 \(S\) 的字符串. 从空串开始,不断在后面添加一个 \([A, A + n]\) 的一个字符. 第一次包含 \(S\) 的时候会停止添加.问期望的添加次数. 有 \(T\ ...

  4. AtCoder 瞎做

    目录 ARC 058 E - 和風いろはちゃん / Iroha and Haiku 题意 题解 技巧 代码 ARC 059 F - バイナリハック / Unhappy Hacking 题意 题解 技巧 ...

  5. a span做成按钮样式不选中文字

    a,span做成按钮样式时,文字会被选中.加以下CSS可以让其不选中.测试三大浏览器都可以 .button { display: inline-block; -moz-user-select: non ...

  6. BZOJ3456 城市规划 【多项式求ln】

    题目链接 BZOJ3456 题解 真是一道经典好题,至此已经写了分治\(NTT\),多项式求逆,多项式求\(ln\)三种写法 我们发现我们要求的是大小为\(n\)无向联通图的数量 而\(n\)个点的无 ...

  7. Fiddler 安装配置及使用技巧

    下载最新版即可: https://www.telerik.com/fiddler pc配置: pc端上的配置较为简单,主要是记录一下遇到的一些bug以及解决方法. options>HTTPS  ...

  8. 牛客练习赛43 Tachibana Kanade Loves Probability(快速幂)

    链接:https://ac.nowcoder.com/acm/contest/548/B来源:牛客网 题目描述 立华奏在学习初中数学的时候遇到了这样一道大水题: “设箱子内有 n 个球,其中给 m 个 ...

  9. 生命不息，折腾不止 ～ 旧PC改造之家庭影音

    前言引入 之前把在校园陪伴多年的旧电脑由Win装成了Linux,的确不卡了,基本上日常办公也够了(大项目还是吃不消,日常捣鼓倒是够了),然后把真正的工作游戏本也改成了Linux,那么旧电脑又变成闲置机 ...

  10. 浏览器直接显示html代码，不解析代码

    在某些时候,我们可能因为某些特殊的原因,不想让浏览器解析html代码. 1,把代码放到js中,如下 <script type='text/html' style='display:block'& ...