高级选择器:
1后代选择器: 儿子孙子重孙子
举例: div ul li p{ color:red; }
<style>
<!--.father p{-->
<!--color:green;-->
<!--} /* 德玛西亚之力 和wuoeiqi都变成绿色 wuoeiq前面的原点显示黑色 */-->
.father .wu {
color: yellow;
} /*只是把wuoeiqi变成了黄色 */
</style>
</head>
<body>
<div class="father">
<p>德玛西亚之力</p>
<ul>
<li>
<p class="wu">wuoeiqi</p>
</li>
</ul>
</div>
</body>
2子代选择器: 只能是亲儿子 div>p{}
<title>Title</title>
<style>
<!--五个雨蝶变黄色-->
.father>p{
color: yellow;
}
/*理论上赵薇变红 实际上赵薇wusir都变红*/
.father>ul>li{
color: red;
}
/*日天变成蓝色*/
.container{color:blue;}
</style>
</head>
<body>
<div class="father">
<p>雨蝶</p>
<p>雨蝶</p>
<p>雨蝶</p>
<p>雨蝶</p>
<p>雨蝶</p>
<div class="content">
<p>wusir</p>
</div>
<ul>
<li>赵薇
<ul>
<li>wusir</li>
</ul>
</li>
</ul>
</div>
<div class="container">
<p>日天</p>
</div>
</body>
3组合选择器:多个选择器组合到一起共同设置样式
举例: div,p,a,li,span,{font-size:14px;}
<title>Title</title>
<style>
body,div,p,a,span{
color: lightgoldenrodyellow;
}
</style>
</head>
<body>
<div>
alex
</div>
<p>alex2</p>
<a href="#">ritian</a>
<span>wusir</span>
</body>
4交集选择器:第一个标签必须是标签选择器，第二个标签必须是类选择器
div.active{ }
1 h4{ 2 100px; 3 font-size: 14px; 4 } 5 .active{ 6 color: red; 7 text-decoration: underline; 8 } 9 /* 交集选择器 */ 10 h4.active{ 11 background: #00BFFF; 12 }
5属性选择器:
input[type='text']
<title>Title</title>
<style>
form input[type='password']{
background-color: red;
}
</style>
</head>
<body>
<form action="">
<input type="text" id="user">jaja
<input type="password">123
</form>
</body>
伪类选择器:LoVe HAte
a:link 没有被访问的
a:visited 访问过后的
a:hover 鼠标悬停的时候
a:active 摁住的时候
<title>Title</title>
<style>
a:link{
color: blue;
}
a:visited{
color: #b3b3b3;
}
a:hover{
color: #f2f2f2;
}
a:active{
color: chartreuse;
}
/*给变形金刚做修饰*/
span:hover{
color: blue;
font-size: 30px;
text-decoration: underline;
}
/*修饰alex*/
.father:hover .child{
color:red;
display: block;
}
</style>
</head>
<body>
<a href="#">百度一下</a>
<span>变形金刚</span>
<div class="father">
小猪佩奇
<p class="child">alex</p>
</div>
</body>
伪元素选择器:
p:before 在...的前面添加内容 一定要结合content
p:after 在....的后面添加内容 与后面的布局有很大的关系
<title>Title</title>
<style>
/*修改p元素的第一位*/
p:first-letter{
color:red;
font-size: 26px;
}
p:before{
content: '$';
}
p:after{
content: 'hou';
}
/* 隐藏元素,不占位置*/
/*.box2{*/
/*display: none;*/
/**/
/*}*/
/* 隐藏元素,不占位置*/
/*.box2{*/
/*display: block;*/
/*visibility: hidden;*/
/*height: 0;*/
/*}*/
</style>
</head>
<body>
<p class="box">
<span>alex</span>
</p>
<span class="box2">alex1</span>
<div>wusir</div>
css的继承性和层叠性
继承性:color text-xxxx font-xxxx line-xxxx的属性可以继承下来.盒模型的属性是不可以继承的
a标签有特殊情况,设置a标签的字体颜色一定要选中a不要使用继承性
<title>Title</title>
<style>
.box{
color: red;
}
.box a{
color: #f2f2f2;
}
.box p{
color: green;
font-size: 30px;
line-height: 30px;
background-color:red;
text-align: right;
}
span{
background-color:transparent;
}
</style>
</head>
<body>
<div class="box">
ritian
<a href="#">百度</a>
<p>
wusir
<span>alex</span>
</p>
</div>
层叠性:覆盖
1 行内>id>class>标签 1000>100>10>1
2数数 按顺序数id class 标签
3先选中标签,权重一样 以后设置的为主
4如果都是继承来的属性,保证就近原则
5都是继承来的属性,选择的标签一样近,再去数权重
<style>
/*看权重 数数选择器 id>class>标签*/
/* 1 0 0*/
#box{
color:red;
}
/* 0 1 0*/
.box{color: green}
/* 0 0 1*/
div{color: blue}
/* 最终结果为红色 */
</style>
</head>
<body>
<div class="box" id="box">猜猜我是什么颜色</div>
</body>
<style>
/*1 3 0 */
#father1 .box2 #father3 p{
color: yellow;
}
/*0 4 0*/
/*.box1 .box2 .box3 .box4{
color: red;
}*/
/*2 1 1*/
#father1 #father2 .box3 p{
color: green;
}
</style>
</head>
<body>
<div class="box1" id="father1">
<ul class="box2" id="father2">
<li class="box3" id="father3">
<p class="box4" id="child">猜猜我的颜色</p>
</li>
</ul>
</div>
</body>
<style>
/*继承来的属性 它的权重为0，跟选中的标签没有可比性*/
#father1 #father2 #father3{
color: red;
}
#father1 .box2 .box3 p{
color: green;
}
</style>
</head>
<body>
<div class="box1" id="father1">
<ul class="box2" id="father2">
<li class="box3" id="father3">
<p class="box4" id="child">猜猜我的颜色</p>
</li>
</ul>
</div>
盒模型:
属性: 内容的宽度
heigth:内容的高度
padding:内边距 内容到边框的距离
border:边框
margin:外边距
<style> .box{ 200px; height: 200px; background-color:chartreuse; padding: 50px; border: 10px solid green; } </style> </head> <body> <div class='box'>有点意思</div> </body>
盒模型的计算:
总结:保证盒模型的大小不变,加padding就一定要减去width或者heigth
前提是在标准文档流 padding:父子之间调整位置 margin:兄弟之间调整位置
布局的方式:浮动:
浮动能实现元素并排
盒子一浮动就脱离了标准文档流,不占位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding:0; margin: 0; } .top-Bar{ 100%; height: 40px; background-color: #333; } .container{ 1226px; height: 40px; /*background-color: red;*/ margin-right: auto; margin-left: auto; } .top-Bar .top-l{ 550px; height: 40px; background-color: green; float: left; } .top-Bar .top-shop{ 100px; height: 40px; background-color: yellow; float: right; } .top-Bar .top-info{ 200px; height: 40px; background-color: purple; float: right; margin-right: 20px; } </style> </head> <body> <div class="top-Bar"> <div class="container"> <div class="top-l"> </div> <div class="top-shop"></div> <div class="top-info"></div> </div> </div> </body> </html>