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;
}
上一篇:如何参与linux内核开发


下一篇:Linux网卡驱动架构分析