复合选择器
为什么要应用复合选择器?
- 可能疾速高效的选中指标元素标签
- 复合选择器是由一个或者多个根本选择器 通过不同的组合形式组合而成的
后辈选择器
父级 子级 {属性 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>
在选中元素的状况下,计算权重公式,故蓝色