CSS高级选择器
高级选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>高级选择器</title>
<style>
.h2 {
color: red;
}
body {
font-size: 30px;
}
/*选择器高级：基础选择器的各种组合*/
/*查询顺序，由内至外*/
/*1.、后代(子代)选择器：只控制一个选择器，前方的都是修饰*/
/*更习惯用后代，因为css2就出现了，而后面因为后代不能够满足需求，css3中推出子代*/
/*后代选择器：只要是后代就可以，需要用空格隔开*/
/*body .h2 {*/
/*font-size: 40px;*/
/*}*/
/*子代选择器：必须为子代，其他不可以，使用 > 隔开*/
body > .h2 {
font-size: 40px;
}
/*2、兄弟(相邻)选择器：只控制一个选择器，前方的都是修饰*/
/*兄弟 ~，可相邻也可不相邻，但必须通过上方修饰下方*/
/*.h3 ~ .h4 {*/
/*color: pink;*/
/*}*/
/*相邻 +，必须相邻，但必须通过上方修饰下方*/
.h3 + .h4 {
color: pink;
}
/*3、群组选择器：控制多个选择器，全部都会进行修改*/
/*注：每一个选择器位，可以为id、class、标签、选择器组合*/
.h2, body h3, h4 {
text-align: center;
}
/*4.选择器的优先级：通过权重（个数）*/
/*
无限大于：!important > id > class(伪类) > 标签
种类相同：比个数
个数相同：比定义的顺序，和标签写的前后位置无关
注意：高级选择器种类不影响优先级
*/
#h6 {
color: black;
}
.d1 div h6 {
color: pink;
}
.d2 h6 {
color: brown;
}
body h6 {
color: cyan;
}
div > h6 {
color: orange;
}
h6 {
font-size: 100px;
text-align: center;
color: red;
}
</style>
<style>
/*5、交叉选择器，权值高，提升优先级*/
h6#h6.h.hh {
color: chartreuse;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">
<h6 id="h6" class="h hh">css高级选择器优先级</h6>
</div>
</div>
<h3 class="h3">第1个h3</h3>
<h4 class="h4">第1个h4</h4>
<h4 class="h4">第2个h4</h4>
<h3 class="h3">第1个h3</h3>
<div>
<h4 class="h4">第1个h4</h4>
<h4 class="h4">第2个h4</h4>
</div>
<h2 class="h2">h2标签</h2>
<div>
<h2 class="h2">div下的h2</h2>
</div>
<p>p标签的内容不水平居中</p>
</body>
</html>
伪类选择器，属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*()内填的是编号，所以从1开始*/
/*1.伪类选择器可以单独出现，相当于省略了通配*/
/*2.:nth-child先匹配层级位置，再匹配标签(更常用)*/
/*3.:nth-of-type先匹配标签类型，再匹配层级位置*/
i:nth-child(1) {
color: orange;
}
i:nth-child(4) {
color: red;
}
i:nth-of-type(1) {
color: brown;
}
i:nth-of-type(2) {
color: blue;
}
</style>
<style>
.box {
width: 150px;
}
.pp {
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
float: left;
text-align: center;
line-height: 50px;
}
/* 2n偶数 2n-1|2n+1奇数 3n最后一列 3n+1|3n-2第一列 3n-1中间列*/
/* 不可以丛判断 */
.pp:nth-child(3n-1) {
color: orange;
}
.a1.a2 {
color: red;
}
.a1:nth-child(1) {
color: orange;
}
/*id > class=:nth- > 标签*/
/*总结：
1、伪类选择器优先级与类相同
2、nth-child在同一结构下都是相同选择器时使用
3、nth-of-type在同一结构下不全是相同选择器时使用
*/
</style>
<style>
/*属性选择器*/
/*总结：
1、属性选择器优先级同类
2、[属性名]查找所有有该属性的标签
3、[属性名=属性值]精确查找
4、[属性名^=值]以某某值开头
4、[属性名*=值]包含某某值(模糊查询)
*/
p[a] {
color: crimson;
}
</style>
</head>
<body>
<a class="a1 a2" href="">aaaaaaaaaaaaaa</a>
<hr>
<!--p.pp.p${p$}*9-->
<div class="box">
<p class="pp p1" a>p1</p>
<p class="pp p2" b>p2</p>
<p class="pp p3">p3</p>
<p class="pp p4">p4</p>
<p class="pp p5">p5</p>
<p class="pp p6">p6</p>
<p class="pp p7">p7</p>
<p class="pp p8">p8</p>
<p class="pp p9">p9</p>
</div>
<hr>
<i class="i3">iiii1</i>
<p class="p3">pppp</p>
<div class="div3">dddd</div>
<i class="i3">iiii2</i>
<hr>
<div>
<i class="i3">iiii1</i>
<p class="p3">pppp</p>
<div class="div3">dddd</div>
<i class="i3">iiii2</i>
</div>
</body>
</html>
a标签的四大伪类
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>a标签的四大伪类</title>
<style>
/*一、a的四大伪类*/
a {
font-size: 30px;
}
/*1、标签没有被访问过*/
a:link {
color: orange;
}
/*2、标签被悬浮*/
a:hover {
/*鼠标样式*/
/*wait row-resize none text pointer default*/
cursor: pointer;
}
/*3、标签被激活*/
a:active {
color: pink;
cursor: wait;
}
/*4、标签已被访问过*/
a:visited {
color: brown;
}
</style>
<style>
/*二、reset操作*/
/*在开发中往往用不到四种伪类，且要清除掉系统的默认样式*/
/*就可以如下对a标签进行样式设置：清除系统默认样式 - reset操作*/
a {
color: black;
/*去掉下划线*/
text-decoration: none;
}
</style>
<style>
/*三、普通标签的伪类运用*/
.btn {
width: 80px;
height: 45px;
/*background-color:背景色*/
background-color: orange;
}
/*字体*/
.btn {
/*bold 加粗 字体大小 行高 字体*/
font: bold 20px/45px 'STSong';
/*水平居中*/
text-align: center;
}
/*边界圆角*/
.btn {
border-radius: 5px;
}
/*不允许文本操作*/
body {
user-select: none;
}
/*伪类：悬浮*/
.btn:hover {
cursor: pointer;
background-color: orangered;
}
/*伪类：激活*/
.btn:active {
background-color: brown;
}
/*只是div，没有访问过和未访问过一说*/
</style>
</head>
<body>
<div class="btn">按钮</div>
<!--
标签没有被访问过
标签被悬浮
标签被激活
标签已被访问过
-->
<a href="https://www.baidu.com">前往百度</a>
</body>
</html>
基础样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本属性</title>
<style>
.box {
width: 300px;
height: 300px;
background-color: orangered;
}
.box {
/*大小*/
font-size: 30px;
/*颜色*/
color: blue;
/*字族*/
/*第一个是首选字体，其余是备用字体*/
font-family: "STSong", "新宋体", "Arial";
/*字重: lighter | normal | bold | 100 ~ 900*/
font-weight: 500;
/*字体样式*/
font-style: oblique;
}
.box {
/*文本划线: underline line-through overline*/
text-decoration: none;
/*文本水平位置: left center right*/
text-align: center;
/*行高*/
line-height: 300px;
}
.box {
/*整体设置*/
font: bold 20px/300px '黑体', 'Arial';
color: darkcyan;
text-align: left;
/*首行缩进*/
text-indent: 20px;
/*字间距*/
letter-spacing: 10px;
}
</style>
</head>
<body>
<div class="box">
文本ABC ab
</div>
</body>
</html>
边界圆角
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边界圆角</title>
<style>
.box {
width: 300px;
height: 300px;
background-color: orangered;
}
.box {
/*固定值 | 百分比*/
/*border-radius: 10%;*/
/*一共四个角，左上为第一个角，顺时针编号*/
/*border-radius: 10px 20px 30px 40px;*/
/*不足找对角*/
/*border-radius: 10px 50px 100px;*/
/*border-radius: 10px 50px;*/
/*横纵分离,先横后纵*/
/*border-radius: 50px / 50%;*/
/*border-radius: 50px 100px / 50%;*/
border-radius: 60%;
}
</style>
<style>
.b {
width: 300px;
height: 150px;
background-color: orangered;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="b"></div>
</body>
</html>
背景图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景图片</title>
<style>
.box {
width: 300px;
height: 300px;
background-color: orangered;
}
.box {
/*显示比屏幕大的图片：缩放尺寸*/
/*background-image: url("img/kj.gif");*/
/*尽量只设置宽，高等比缩放，不失真*/
/*background-size: 300px 300px;*/
}
.box {
/*显示比屏幕小的图片：处理平铺与位置*/
background-image: url("img/lss.jpg");
/*平铺: repeat-x repeat-y repeat no-repeat*/
background-repeat: no-repeat;
/*位置*/
/*1.只设置x轴，y轴默认center*/
/*2.x轴：left center right 具体像素 百分百*/
/*2.y轴：top center bottom 具体像素 百分百*/
background-position: center center;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
精灵兔
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>精灵图案例</title>
<style>
/*精灵图就是操作大图在显示区域的位置*/
.box {
width: 500px;
height: 100px;
background-color: orangered;
border: solid;
}
.box {
background-image: url("img/bg.png");
background-position-y: -150px;
}
.box:hover {
cursor: pointer;
background-position-y: -250px;
}
</style>
<style>
.b1 {
width: 155px;
height: 48px;
border: solid;
background-image: url("img/bg.png");
}
.b1:hover {
cursor: pointer;
background-position-y: -48px;
}
</style>
<style>
.b2 {
width: 157px;
height: 48px;
border: solid;
background-image: url("img/bg.png");
background-position: -155px 0;
}
.b2:hover {
cursor: pointer;
background-position: -155px -48px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="b1"></div>
<div class="b2"></div>
</body>
</html>
显示方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>显示方式</title>
<style>
.box {
width: 500px;
height: 100px;
background-color: orangered;
}
</style>
<style>
/*显示方式：display
block：
1.支持设置宽高
2.自带换行
重点：所有有宽高、参与位置布局的都是block
inline：
1.不支持设置宽高，宽高只能有文本撑开
2.不带换行，一行显示不下会自动换行(保留数据的整体性)
注：自定义的标签，默认display都是inline
重点：存放文本的
inline-block:
1.支持设置宽高
2.不带换行，一行显示不下会自动换行(以标签整体换行，标签左右有间距)
重点：不去主动设置该显示方式，系统的两个img、input都设置为了单标签(不会嵌套任何东西)
注：如果要用inline-block参与布局，为了标签布局不受内容影响，设置vertical-align: top
*/
a {
width: 500px;
height: 100px;
display: block;
background-color: pink;
}
owen {
width: 100px;
height: 100px;
display: inline-block;
background-color: cyan;
font-size: 30px;
/*文本垂直对齐方式: baseline top bottom*/
vertical-align: top;
}
owen:nth-of-type(2) {
font-size: 20px;
}
img {
width: 100px;
height: 100px;
background-color: tan;
}
input {
width: 100px;
height: 100px;
background-color: tan;
vertical-align: top;
}
</style>
</head>
<body>
<a href="5.边界圆角.html" class="box"></a>
<div>div1</div>
<div>div2</div>
<a href="">a1</a>
<a href="">a2</a>
<owen>html/css</owen>
<owen>javascript</owen>
<owen></owen>
<owen></owen>
<owen></owen>
<img src="img/lss.jpg" alt="">
<input type="text">
<div></div>
</body>
</html>
盒模型布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒模型布局</title>
<style>
body {
margin: 0;
padding: 100px 0 0 200px;
}
/*盒模型组成部分： */
/*margin + border + padding + content
1.每部分都有自己的独立区域
2.content是宽x高，作为内容或子标签的显示区域
3.padding是内边距，没有自身颜色，完成内容的内移(保证显示区域大小不变，可以响应减小content)
4.border是边框，有宽度、样式、颜色，自身透明(transparent)时，是可以透出背景颜色的
5.margin是外边距，控制盒子的显示位置，left、top控制自身，right、bottom影响兄弟
注：margin的偏移依据当前所在位置
*/
div {
width: 100px;
height: 100px;
background-color: red;
}
owen {
/*margin: 10px;*/
margin-top: 50px;
margin-left: 10px;
/*margin-right: 10px;*/
/*margin-bottom: 100px;*/
}
owen {
/*border-color: black;*/
/*border-width: 3px;*/
/*none：无样式 solid：实线 dashed：虚线 dotted：点线*/
/*border-style: solid;*/
border: red dashed 10px;
}
owen {
/*padding: 上右下左，不足找对边*/
/*padding: 10px 20px 30px;*/
padding: 10px;
}
owen {
display: block;
/*width: 100px;*/
width: 80px;
/*height: 100px;*/
height: 80px;
background-color: orange;
}
</style>
</head>
<body>
<!--
盒模型：
概念：广义上页面中所有的标签都称之为盒子，狭义上布局的盒子指的是display:block
-->
<owen>123</owen>
<div></div>
</body>
</html>
浮动布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动布局</title>
<style>
.wrap {
border: 10px solid yellow;
width: 300px;
/*父级在宽度不固定时高度不能设置死*/
/*height: 300px;*/
}
/*清浮动：父级清浮动，就是在自己宽度是否确定下，都能保证父级的高度刚刚好包裹子集*/
/*清浮动，让高度不受子集的浮动影响，如果宽度确定，把高度写死，这样也叫清浮动
清浮动的方式有很多种，但是推荐使用父级清浮动*/
.wrap:after {
content: '';
display: block;
clear: both;
}
.box {
width: 100px;
height: 100px;
background-color: orange;
border-radius: 50%;
font: 20px/100px 'Arial';
color: blue;
text-align: center;
}
.box {
float: left;
}
.b {
width: 500px;
height: 100px;
background-color: red;
}
/*浮动布局：
1.子集浮动参照父级宽度
2.子集浮动不再撑开父级高度
3.父级高度需要自己处理，否则会影响兄弟布局，采用清浮动处理
*/
</style>
<style>
h1:before {
content: '123';
}
/*当控制的控制自身完成所有布局（包含所有子集布局），再执行该时间点*/
h1:after {
content: '000';
}
</style>
</head>
<body>
<h1>内容</h1>
<!--.wrap>.box{$}*9-->
<div class="wrap">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
</div>
<div class="b"></div>
</body>
</html>
两种布局案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>两种布局总结</title>
<style>
body, h1 {
margin: 0;
}
</style>
<style>
.header {
width: 1210px;
height: 100px;
background-color: orange;
/*自动获取留白区域*/
/*margin-left: auto;*/
/*margin-right: auto;*/
margin: 0 auto;
}
.header:after {
content: '';
display: block;
clear: both;
}
.header a {
display: block;
width: 500px;
height: 100px;
background-color: red;
float: left;
}
.header form {
/*background-color: pink;*/
float: right;
/*父子级顶端产生距离，建议使用padding*/
padding-top: 30px;
}
.header input {
/*margin-right: 20px;*/
width: 220px;
height: 30px;
border: none;
font-size: 17px;
vertical-align: top;
}
.header button {
width: 32px;
height: 32px;
border: none;
background-color: red;
/*outline：外边框*/
outline: none;
color: white;
margin-right: 30px;
vertical-align: top;
}
</style>
</head>
<body>
<!--盒模型:margin、padding协调操作，能用padding尽量用padding，再考虑用margin-->
<!--浮动:需要左右排列的block采用浮动布局，且父级一定要清浮动-->
<div class="header">
<h1>
<a href=""></a>
</h1>
<form method="get" action="https://www.baidu.com/s">
<input type="text" name="wd">
<button type="submit">Go</button>
</form>
</div>
</body>
</html>
一个标签如果是浮动的，那么他的宽和高都可以被子集撑开
