复合选择器
为什么要应用复合选择器？
- 可能疾速高效的选中指标元素标签
- 复合选择器是由一个或者多个根本选择器 通过不同的组合形式组合而成的
后辈选择器
父级 子级 {属性1:属性值1；属性2:属性值2； }注意事项
- 后辈选择器又被称为蕴含选择器 能够选中指标元素的子孙后代
- 父元素写在后面 子元素写在前面 两头用空格隔开
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .item a { color: red; } </style> </head> <body> <div class="item"> <a href="#">外部链接</a> <a href="#">外部链接</a> <a href="#">外部链接</a> <a href="#">外部链接</a> </div> <a href="#">链接</a> <a href="#">链接</a> <a href="#">链接</a> <a href="#">链接</a> </body></html>子元素选择器
父级>子级 {属性1:属性值1；属性2:属性值2；}注意事项
- 子元素选择器只能抉择指标元素的亲儿子元素
- 父元素写在后面 子元素写在前面 两头用>隔开
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> ul>li { color: yellow; } </style> </head> <body> <ul> <li><a href="#">链接</a></li> <li><a href="#">链接</a></li> <li><a href="#">链接</a></li> <li><a href="#">链接</a></li> </ul> </body></html>交加选择器
交加选择器是由两个选择器组成的 。 找到的标签必须满足：既有标签一的特点，又有标签二的特点。
标签1.标签2 {属性1:属性值1；属性2:属性值2；}注意事项
- 两个标签选择器之间用.连贯，且不能有空格
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> p.red { color: #0000FF; } </style> </head> <body> <p class="red">段落</p> <p class="red">段落</p> <p class="red">段落</p> <p class="red">段落</p> <div class="red">宰割 分区</div> <div class="red">宰割 分区</div> <div class="red">宰割 分区</div> <div class="red">宰割 分区</div> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> </body></html>并集选择器
并集选择器能够抉择多个款式雷同的标签元素，两头用逗号隔开
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> p,div,span { color: #0000FF; } </style> </head> <body> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <div>宰割 分区</div> <div>宰割 分区</div> <div>宰割 分区</div> <div>宰割 分区</div> <span>跨度 跨距</span> <span>跨度 跨距</span> <span>跨度 跨距</span> <span>跨度 跨距</span> </body></html>测试
1.将登录改为红色 2.将所有的主导航栏的链接改为橙色 3.将主导航和测导航栏的字体改为14px且为楷体 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .site-r>a { color: red; } .nav a { color: orange; } .nav,.site-nav { font:14px "楷体"; } </style> </head> <body> <!-- 主导航栏 --> <div class="nav"> <ul> <li><a href="#">公司首页</a></li> <li><a href="#">公司产品</a></li> <li><a href="#">公司简介</a></li> <li><a href="#">分割咱们</a></li> </ul> </div> <!-- 侧导航栏 --> <div class="site-nav"> <div class="site-1">左侧导航栏</div> <div class="site-r"><a href="#">登录</a></div> </div> </body></html>链接伪类选择器
a:link:为拜访的链接 a:visited:拜访过的链接 a:hover:鼠标通过时选定的链接 a:active:鼠标选定时的链接记忆小窍门: 依照love hate来记忆
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> a { text-decoration: none; } a:link { color:blanchedalmond; } a:visited { color: yellow; } a:hover { color: red; } a:active { color: #0000FF; } </style> </head> <body> <a href="#">链接</a> <a href="#">链接</a> <a href="#">链接</a> <a href="#">链接</a> </body></html>复合选择器总结
标签显示模式
在前端中 成千上万的标签分为大略三类 块级元素 行内元素 行内块元素
块级元素block
比拟常见：h1~h6 div ul li p 等等特点
- 比拟王道 本人独占一行
- 度 高度 外边距 内边距都能够管制
- 宽度是默认容器的100%
- 以包容其它块级元素和行内元素
注意事项
文字类块级标签请勿放其它的块级元素
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> h2 { width: 200px; height: 200px; background-color: #0000FF; } </style> </head> <body> <h2></h2> </body></html>行内元素inline
常见的行内元素：<a> <u> <s> <del> <span> <b> <strong>等等特点
- 和其它的行内元素在同一行内
- 宽高默认不失效
- 默认宽度是它本人的宽度
- 只能包容文本和其它的行内元素
注意事项
- 链接不能再放链接
- 在非凡状况下 a标签能够放块级元素 然而a要转换下显示模式
行内块元素
常见的行内块元素：<input /> <img /> <td /> 特点
- 能够和其它的行内块元素在同一行上
- 能够设置宽 高 内边距以及外边距
- 默认宽度是它自身的宽度
总结
标签显示模式转换
display:block 转换成块级元素display:inline 转换成行内元素
display:inline-block 转换成行内块元素
行高
行高的测量方法
行高的计算
上间隔+内容的高度+下间隔
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> a { display: inline-block; height: 50px; width: 50px; background-color: pink; color: white; text-decoration: none; line-height: 50px; text-align: center; } </style> </head> <body <a href="#">百度</a> </body></html>单行文本垂直居中
高度等于行高 可让单行文本实现垂直居中的关系
高度与行高的关系
- 行低等于高度 实现单行文本垂直居中
- 行高大于高度 文字偏下
- 行高小于高度 文字偏上
简略导航栏案例
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> body { font-size: 16px; } a { display: inline-block; height: 50px; width: 50px; color: white; background-color: pink; text-decoration: none; line-height: 50px; text-align: center; } a:hover { background-color: yellow; color: green; } </style> </head> <body> <a href="#">百度</a> <a href="#">网易</a> <a href="#">腾讯</a> <a href="#">谷歌</a> <a href="#">微软</a> <a href="#">小米</a> <hr /> <a href="#">百度</a> <a href="#">网易</a> <a href="#">腾讯</a> <a href="#">谷歌</a> <a href="#">微软</a> <a href="#">小米</a> <hr /> <a href="#">百度</a> <a href="#">网易</a> <a href="#">腾讯</a> <a href="#">谷歌</a> <a href="#">微软</a> <a href="#">小米</a> <hr /> <a href="#">百度</a> <a href="#">网易</a> <a href="#">腾讯</a> <a href="#">谷歌</a> <a href="#">微软</a> <a href="#">小米</a> </body></html>css背景
background-color
background-color:背景色彩 默认值：none
background-image
background-image：背景图片
- transparent:通明（默认值）
- url：背景图片的默认地位
bakground-repeat
bakground-repeat:背景平铺
bakground-position
bakground-position:背景地位
背景附着
background-attachment:scroll | fixed
背景简写
背景半透明
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .transparent { width: 200px; height: 200px; background: rgba(0, 0, 0, 0.3); } </style> </head> <body> <div class="transparent"></div> </body></html>留神 CSS3的个性 所以有兼容问题
背景总结
综合案例1
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .icon { width: 1920px; height: 1080px; background-color: transparent; background-image: url(../../WEB照片/ms.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: center top; } </style> </head> <body> <div class="icon"></div> </body> </html>综合案例2
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> div { width: 200px; height: 50px; background-color: pink; background-image: url(../../WEB照片/sina.png); background-repeat: no-repeat; background-position: 10px center; } </style> </head> <body> <div></div> </body></html>'
综合案例3
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .nav { width: 100%; text-align: center; } .nav a { display: inline-block; width: 120px; height: 50px; line-height: 50px; text-decoration: none; background-image: url(../../WEB照片/bg.png); } .nav a:hover { background-image: url(../../WEB照片/bgc.png); } </style> </head> <body> <div class="nav"> <a href="#">百度</a> <a href="#">腾讯</a> <a href="#">新浪</a> <a href="#">网易</a> <a href="#">360</a> <a href="#">知乎</a> </div> </body></html>CSS三大个性
CSS层叠性
当一个标签领有多个雷同的款式时 以就近准则为准
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> div { color: blue; } div { color: green; } </style> </head> <body> <div>长江后浪推前浪 前浪死在沙滩上</div> </body></html>注意事项
- 款式抵触时 以就近准则为准
- 款式不抵触 不会层叠
css继承性
子元素会继承父元素的某些款式。如text-结尾 font-结尾 line-结尾以及文本色彩
记忆口诀
龙生龙 风生风 老鼠生儿会打洞<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> div { color: blue; } </style> </head> <body> <div> <p>段落</p> </div> </body></html>css优先性
注意事项
- 选择器雷同及款式雷同时 则执行层叠性
- 选择器不雷同及款式雷同时 则会呈现优先级问题
- 数位之间没有进制 级别不可逾越
权重计算公式
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> body { background-color: rgba(0,0,0,0.6); } div { color: #0000FF!important; } .nav { color:red; } #nav { color: yellow; } </style> </head> <body> <div class="nav" id="nav" style="color: #808080;">尧子陌</div> </body></html>权重叠加
选择器的权重是能够叠加的，标签选择器加一个类选择器的权重为0 0 1 1 类选择器加id选择器的权重为0 1 1 0<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> a { text-decoration: none; } .nav a { text-decoration: line-through; color: #00B5E2; } </style> </head> <body> <div class="nav"> <a href="#">百度</a> <a href="#">新浪</a> <a href="#">腾讯</a> <a href="#">网易</a> </div> </body></html>上面选择器的权重比下面选择器权重大 所以下面设置的款式便生效
继承的权重为0
- 如果选中元素 则按下面的公式计算
- 如果没选中元素 继承的权重为0
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> body{ background: rgba(0,0,0,.6); } .nav { color: #018BD3; } p { color: red; } </style> </head> <body> <div class="nav"> <p>段落</p> </div> </body></html>权重6个精髓题
第一题
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="keywords" content="关键词1,关键词2,关键词3" /> <meta name="description" content="对网站的形容" /> <title>第1题</title> <style type="text/css"> div div { color: blue; } div { color: red; } </style></head><body> <div> <div> <div> 试问这行字体是什么色彩的？ </div> </div> </div></body></html>两个标签选择器相加的权重：0 0 2 0,所以是蓝色。
![]
第二题
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="keywords" content="关键词1,关键词2,关键词3" /> <meta name="description" content="对网站的形容" /> <title>第2题</title> <style type="text/css"> #father { color: red; } p { color: blue; } </style></head><body> <div id="father"> <p>试问这行字体是什么色彩的？</p> </div></body></html>在没有选中元素的状况下，继承的权重为0，所以是蓝色
第三题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> div div div div div div div div div div div div { color: red; } .me { color: blue; } </style></head><body> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div class="me">试问这行文字是什么色彩的</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div></body></html>数位之间没有进制 级别之间不可逾越 故类选择器的权重较高，所以选蓝色
第四题
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="keywords" content="关键词1,关键词2,关键词3" /> <meta name="description" content="对网站的形容" /> <title>第4题</title> <style type="text/css"> div p { color: red; } #father { color: red; } p.c2 { color: blue; } </style></head><body> <div id="father" class="c1"> <p class="c2"> 试问这行字体是什么色彩的？ </p> </div></body></html>选中的状况下，则计算权重公式，所以选蓝色
第五题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> .c1 .c2 div{ color: blue; } div #box3 { color:green; } #box1 div { color:yellow; } </style></head><body> <div id="box1" class="c1"> <div id="box2" class="c2"> <div id="box3" class="c3"> 文字 </div> </div> </div></body></html>在选中元素的状况下，查看权重，如果权重统一，则查看离选中元素的间隔，间隔近则款式失效，故yellow
第六题
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="keywords" content="关键词1,关键词2,关键词3" /> <meta name="description" content="对网站的形容" /> <title>第6题</title> <style type="text/css"> #father #son { color: blue; } #father p.c2 { color: black; } div.c1 p.c2 { color: red; } #father { color: green !important; } </style></head><body> <div id="father" class="c1"> <p id="son" class="c2"> 试问这行字体是什么色彩的？ </p> </div></body></html>在选中元素的状况下，计算权重公式，故蓝色