一 高级选择器
1,class的便捷使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*#p1{ font-size: 30px; color: green; } #p2{ color: green; text-decoration: underline; } #p3{ font-size: 30px; text-decoration: underline; }*/ .lg{ font-size: 30px; } .lv{ color: green; } .un{ text-decoration: underline; } </style> </head> <body> <!-- 娃哈哈1 30px green 娃哈哈2 green text-decoration:underline; 娃哈哈3 30px 下划线 --> <!-- 公共类 --> <p id="p1" class="lg lv">娃哈哈1</p> <p id="p2" class="lv un">娃哈哈2</p> <p id="p3" class="lg un">娃哈哈3</p> </body> </html>
2 后代选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*<!--wusir 和alex 都会变红 .wu 类继承了p标签的颜色,-->*/ .father p{ color: red; } /*#选中 类father下的类wu*/ .father .wu{ #中间一定要有空格,才是后代选择器的语法 color: green; } .wu{ color: green; } </style> </head> <body> <div class="father"> <p>alex</p> <ul> <li> <p class="wu">wusir</p> #. father.wu ///// wusir 变成绿色的了 </li> #.father p /////alex 和wusir 都变成红色了,继承P标签 </ul> </div> <p class="wu">日天</p> </body> </html>
3 ,子代选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .father>p{ color: red; } /*.father>ul>li{*/ /*width: 100px;*/ } .container{ color: red; } </style> </head> <body> <div class="father"> <p>alex1</p> #.father >p (只选中father下的p标签即儿子) 那只有alex1-alex4 会变红 <p>alex2/p> <p>alex3</p> <p>alex4</p> <div class="content"> <p>wusir</p> </div> <ul> <li> alex5 #.father>ul>li 只会选中此处的alex5 <ul> <li>wusir</li> </ul> </li> </ul> </div> <div class="container"> <p>日天</p> </div> </body> </html>
4 组合选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*body{ font-size: 12px; #body内的所有字体设置为统一格式 }*/ /**{ padding: 0; #* 通配符选择器 margin: 0; }*/ body,div,p,a,span{ #常见的组合选择器用逗号隔开 padding: 0; margin: 0; } </style> </head> <body> <div> alex </div> <p>alex2</p> <a href="#">日天</a> <span>wusir</span> </body> </html>
5, 交集选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> /*div{ font-size: 30px; } .active{ color: green; } div.active{ text-decoration: underline; }*/ div{ color: red; } div.active{ color: green; } </style> </head> <body> <!-- div.active 交集选择器,中间没有空格, alex 字体为绿色 --> <div class="active">alex</div> </body> </html>
6, 属性选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> form input[type='text']{ #属性选择器一般和form表单连用 background-color: red; } form input[type='password']{ background-color: yellow; } form #user{ background-color: green; } </style> </head> <body> <form action=""> <input type="text" id="user"> <input type="password"> </form> </body> </html>
7 ,伪类选择器
伪类选择器一般只和a 标签联合使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*<!--没有被访问时的a标签的颜色-->*/ a:link{ color:red; } /*访问过后a标签的颜色*/ a:visited{ color:lightseagreen; } /*鼠标悬停时a标签的颜色*/ a:hover{ color:pink; } /*鼠标摁住时的颜色*/ a:active{ color:yellowgreen; } </style> </head> <body> <a href="#"> 百度一下 #根据顺序变颜色 </a> </body> </html>
7.2 伪类选择的hover和后代选择器 的连用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .child{ display: none; #将.child 不显示 隐藏元素不占空间 } .father:hover .child{ # 鼠标悬停在父类上时,father类下的child类会显示出来,颜色为红色,如果不悬浮在父类上时,看不到子类. color: red; display: block; } </style> </head> <body> <div class="father"> wusir <p class="child">alex777</p> </div> </body> </html>
7.3 伪类选择的hover与span 标签的连用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> span:hover{ color: red; font-size: 24px; text-decoration: underline; } </style> </head> <body> <span>alex</span> #鼠标悬浮在 alex上时,字体会变成红色,且有下划线,字体变大 </body> </html>
8 伪元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:first-letter{ #
color:red;
font-size: 26px;
}
/*伪元素的属性一定只能用content */
p:before{
content:"$"
}
p:after{
content:"*"
}
.box2{
display:block;
visibility: hidden; #隐藏元素占空间,但是阔以把行内标签转化为块级标签,进行设置高为0 就不占用空间了
height:0;
}
</style>
</head>
<body>
<p class = "box">happy
<span>
spring #显示结果是$happy在第一个字母位置,且变红色,字体变大.如果没有hanppy,则页面显示结果为$spring,$变为红色,且字体变大
</span>
</p>
<span class="box2">
alex3
</span>
<div>
wusir
</div>
</body>
</html>
9 继承性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box { color: red; } </style> </head> <body> <div class="box"> 日天 <a href="#">百度</a> <p> wusir <span>alex</span> #日天 wusir alex 均继承 box 类变成红色,百度没有变他不继承 </p> </div> </body> </html>
9.1继承
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box a{ color: yellow; } .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"> 日天 <a href="#">百度</a> <p> wusir <span>summer</span> #summer 会继承p标签的特点 </p> </div> </body> </html>
10 层叠性的几个例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*css层叠性 权重 谁的权重大就会显示谁的样式*/ /*如何看权重 数数选择器 id class 标签*/ /*1 0 0*/ /*#box{ color: yellow; }*/ /*0 1 0*/ .box{ color: green; } /*0 0 1*/ div{ color: red; } /* id > 类 > 标签*/ </style> </head> <body> <div class="box" id="box">祖国我爱你</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> </title> <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> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> </title> <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> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> </title> <style> /*继承来的属性 权重为0*/ /*如果是继承来的熟悉，就近原则，谁更深入谁厉害*/ /*#father1 .box2{ color: red; } .box1{ color: green; }*/ /*都是继承来的 ，都一样深*/ #father1 #father2 .box3{ color: red; } #father1 .box2 .box3{ 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> </html>
综上所述层叠性和继承性的特点
继承性
color / text-xxx / font-xxx / line-xxx的属性阔以被继承,其他的例如盒模型的属性是继承不下来的
a 标签有特殊情况,设置a 标签的字体颜色,一定要选中a ,不能使用继承性
层叠性-覆盖
(1)行内标签>id>class>标签 (比较权重)
(2)一组是继承来的属性,一组是选中的属性,那选中的属性优先级最高
(3)如果都是继承来的属性,接近程度不一样,近的优先级最高
(4)如果接近吃程度一样,那就计算权重,数id class 标签.权重大的优先级最高
(5) 如果都是继承来的,接近程度一样,权重一样,那就后面的优先级最高
11,盒子模型
属性：
width:内容的宽度
height:内容的高度
padding:内边距 内容到边框的距离
border:边框
margin:外边距 另一个边到另一个边的距离
盒模型的计算：
总结：如果保证盒模型的大小不变，加padding 就一定要减width或者减height
前提是：在标准文档流
padding：父子之间调整位置
margin: 兄弟之间调整位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 200px; height: 200px; background-color: red; padding: 50px; border: 10px solid green; /*margin-left: 50px;*/ } </style> </head> <body> <!-- width:内容的宽度 height:内容的高度 padding:内边距 border:边框 margin:外边距 --> <div class="box"></div> </body> </html>
12 浮动--布局方式
浮动能实现元素并排
盒子一浮动 就脱离了标准文档流，不占位置。