python css功能补充讲解
###########总结####
标签选择器 标签名 id选择器 #box1 类选择器.box2
css高级选择器
*子选择器*
子选择器用 大于号
.box1>.box2{
width: 100px;
height: 100px;
background-color: yellow;
} .box1>div{
width: 100px;
height: 100px;
background-color: yellow;
} .box1>.box2>.box3{
width: 100px;
height: 100px;
background-color: green;
}
.box1>.box2>p{
color: red;
} 后代选择器
后代选择器用 空格
.box2 p{
color: green;
} 通用选择器
*{
margin: 0;
} 并集选择器 or的意思
body, h1, p{
margin:0;
} 交集选择器 表示2者选中之后共有的特征
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.box {
color: red;
} p {
font-size: 20px;
} /*两个交集的部分给他设置黄色背景颜色*/
p.active {
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1" id="wrap1">
<div class="box2" id="wrap2">
<div class="box3" id="wrap3">
<p class="box active ">倚天屠龙记</p>
</div>
<p>天龙八部</p>
</div>
</div>
<span>射雕英雄传</span>
</body>
</html>
属性选择器
[type]{
color:red;
}
[type='submit']{
color:red;
} [type='text']{
color: green;
} [for^='test']{
color:red;
}
伪类选择器
body标签里面写
<a href="http://www.baidu.com" target="_blank">点我</a> /*未被访问的链接*/
a:link{
color: green;
} /*访问过的链接*/
a:visited{
color: red;
} /*鼠标悬浮的时候的颜色*/
a:hover{
color:blue;
} /*鼠标按下时的样式*/
a:active{
color: yellow;
}
################
ul li:first-child{#选择第一个孩子变颜色
color: green;
} ul li:last-child{ #选择最后一个孩子
color: yellow;
} ul li:nth-child(0){#选择指定的孩子
color: red;
} ul li:nth-child(3n){#间隔
color: red;
}
################# p:first-letter{#选择第一个字符内容改变大小 颜色
font-size: 32px;
color: red;
}
p:before{#在标签前边添加一个标签内容
content: 'alex';
}
p:after{#在标签后面添加一个标签内容
content: '叫小宝宝';
}
继承性
字标签可以继承父标签的样式: color, font-, text- line-
层叠性
(选择器权重一样的时候)后边添加的样式会覆盖前边的样式
权重
id 权重100
类 权重10
标签 权重 1
!important 权重无限大
都有!important 的时候,比较权重
<div id='box1' class="wrap1">
<div id="box2" class="wrap2">
<div id="box3" class="wrap3">
<p>再来猜猜我是什么颜色？</p>
</div>
</div>
</div>
.box1{
color: blue;
}
.box1 p{
color: red;
}
p{
color: yellow;
}
#pid{
color: green;
}
.pclass{
color: blue;
}
权重问题
/*2 0 1*/
#box1 #box2 p{
color: yellow;
}
/*1 1 1 */
#box2 .wrap3 p{
color: red;
}
/*1 0 3*/
div div #box3 p{
color: purple;
}
/*0 3 1*/
div.wrap1 div.wrap2 div.wrap3 p{
color: blue;
}
/*权重相同的*/
/*1 1 1 */
#box1 .wrap2 p{
color: red;
}
/*1 1 1 */
#box2 .wrap3 p{
color: yellow;
}
/*2 1 0 */
#box1 #box2 .wrap3{
color: red;
}
/*1 1 0 */
.wrap1 #box2{
color: green;
}
/*2 0 0 */
#box1 #box2{
color: red ;
}
/*1 2 0 */
.wrap1 #box2 .wrap3{
color: green;
}
#box1 #box2 .wrap3{
color: red !important;
}
#box2 .wrap3{
color: blue !important;
}
#box3{
color: yellow;
}
python css功能补充讲解的更多相关文章
- Shiro 核心功能案例讲解 基于SpringBoot 有源码
Shiro 核心功能案例讲解 基于SpringBoot 有源码 从实战中学习Shiro的用法.本章使用SpringBoot快速搭建项目.整合SiteMesh框架布局页面.整合Shiro框架实现用身份认 ...
- 使用C++扩展Python的功能 转自：http://blog.csdn.net/magictong/article/details/8897568#comments
使用C++扩展Python的功能 环境 VS2005Python2.5.4 Windows7(32位) 简介 长话短说,这里说的扩展Python功能与直接用其它语言写一个动态链接库,然后让Python ...
- EBS OAF开发中的Java 实体对象(Entity Object)验证功能补充
EBS OAF开发中的Java 实体对象(Entity Object)验证功能补充 (版权声明,本人原创或者翻译的文章如需转载,如转载用于个人学习,请注明出处:否则请与本人联系,违者必究) EO理论上 ...
- 第八十五节，css布局补充一
css布局补充一 图片边框问题 注意css布局时img图片标签默认有的浏览器有边框,所以大多时候需要去除图片的边框 CSS各种居中方法 水平居中的text-align:center 和 margin: ...
- python/数据库操作补充—模板—Session
python/数据库操作补充—模板—Session 一.创建一个app目录 在models.py只能类进行进行创建表 class Foo: xx= 字段(数据库数据类型) 字段类型 字符串 Email ...
- css杂项补充
css杂项补充 一.块与内联 1.块 独行显示 支持宽高,宽度默认适应父级,高度默认由子级或内容撑开 设置宽高后,采用设置的宽高 2.内联 同行显示 不支持宽高 margin上下无效果,左右会起作用, ...
- 十一. Python基础(11)—补充: 作用域 & 装饰器
十一. Python基础(11)-补充: 作用域 & 装饰器 1 ● Python的作用域补遗 在C/C++等语言中, if语句等控制结构(control structure)会产生新的作用域 ...
- 019——VUE中v-for与computer结合功能实例讲解
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Python常用功能函数
Python常用功能函数汇总 1.按行写字符串到文件中 import sys, os, time, json def saveContext(filename,*name): format = '^' ...
随机推荐
- [UOJ455][UER #8]雪灾与外卖——堆+模拟费用流
题目链接: [UOJ455]雪灾与外卖 题目描述:有$n$个送餐员(坐标为$x_{i}$)及$m$个餐厅(坐标为$y_{i}$,权值为$w_{i}$),每个送餐员需要前往一个餐厅,每个餐厅只能容纳$c ...
- java 对象转JSON字符串 $ref 错误
顾名思义,这个是对象转Json时,发生的引用错误. 比较简单的方法是: 使用 帮助方法 https://www.cnblogs.com/hanjun0612/p/9779781.html Conver ...
- Android学习第6天
创建一个新的activity 四大组件需要在清单文件中配置 可在清单文件中配置多个启动图标过单个启动图标 Activity下的lable和icon属性可以和Application节点的属性不一样,默认 ...
- Minimum number of steps CodeForces - 805D（签到题）
D. Minimum number of steps time limit per test 1 second memory limit per test 256 megabytes input st ...
- atcoder NIKKEI Programming Contest 2019 E - Weights on Vertices and Edges
题目链接:Weights on Vertices and Edges 题目大意:有一个\(n\)个点\(m\)条边的无向图,点有点权,边有边权,问至少删去多少条边使得对于剩下的每一条边,它所在的联通块 ...
- 【BZOJ2431】【HAOI2009】逆序对数列 DP
题目大意 问你有多少个由\(n\)个数组成的,逆序对个数为\(k\)的排列. \(n,k\leq 1000\) 题解 我们考虑从小到大插入这\(n\)个数. 设当前插入了\(i\)个数,插入下一个数可 ...
- BZOJ 4833: [Lydsy1704月赛]最小公倍佩尔数（数论 + 最值反演）
题面 令 \({(1+\sqrt 2)}^n=e(n)+f(n)*\sqrt2\) ,其中 \(e(n),f(n)\) 都是整数,显然有 \({(1-\sqrt 2)}^n=e(n)-f(n)*\sq ...
- BUG关闭原因
已解决:缺陷已经修复. 重复缺陷:是指在系统里相同原因的缺陷已经被其他人报告.在此缺陷被作为重复缺陷返回时,先不要立即取消.必须等到核查修复后,才在系统里取消.这是因为有些缺陷被误认为是重复缺陷,实际 ...
- dns配置文件
/etc/resolv.conf 该文件是DNS域名解析的配置文件,它的格式很简单,每行以一个关键字开头,后接配置参数. resolv.conf的关键字主要有四个,分别是: nameserver ...
- 【git】git一些命令使用记录
目前git版本控制很多公司都在用,我把平时的使用做些记录,防止忘记. 1. 有时候分支比较多,我们会基于master建立一个新分支开发,有时候也会基于别的分支建立,但时间长了可能会忘记当前分支是基于哪 ...