一.选择器高级
1.组合选择器:
/*群主选择器 : 同时可以控制多个选择器*/
/*#dd,div,#a{}*/
/* d{ 起相同类名
color: red;
}*/
举例:
.d1,.d2,.d3{
color: red
}
2.子代(后代)选择器:
/*子代(后代)选择器 : 根据父子结构控制目标子标签*/
/*明确选择器书写顺序: 目标inner, 再确定修饰词(哪个父亲,多少个父亲)*/
/*语法:子代>连接*/
举例:
.sub .inner{
color: green
}
.sub >.inner{
color: pink
}
/*语法: 后代 空格连接:*/
.sub .sub{
color: red
}
3.相邻选择器:
/*相邻选择器 : 根据兄弟控制目标下方兄弟标签*/
/*明确目标 => 添加修饰词*/
/*语法: 兄弟 ~ 连接*/
举例:
.ele1~.ele3{
color: blue
}
/*语法:相邻 + 连接*/
.ele1+.ele2{
color: yellow
}
4.交集选择器:
/*交集选择器 : 一个标签有多种选择器修饰,通过多种修饰找得一个目标标签*/
举例:
section#s.ss{
color: green
}
5.补充:
/*注: 每一个选择器位均可以为三个基础选择器中任意一个*/
6.html标签快捷生成式:
6.1 <!-- .d${$$$}*3 -->
<div class="d1">001</div>
<div class="d1">002</div>
<div class="d1">003</div>
6.2 <!-- .sup>.sub>.inner -->
<div class="sup">
<div class="sub">
<div class="inner">inner</div>
</div>
</div>
6.3 <!-- .ele${e$}*3 -->
<div class="ele1">e1</div>
<div class="ele2">e2</div>
<div class="ele3">e3</div>
6.4 <!-- (section.ss#s{块区域}+section.ss{块区域}+.ss{块区域}) -->
<section class="ss" id="s">块区域</section>
<section class="ss">块区域</section>
<div class="ss">块区域</div>
二. 复杂选择器的优先级
1.与修饰符位置无关
2,属性选择器与类选择器权重相同
3.id 无限大于类(属性) 无限大于标签
4.权重只与个数相关,个数(类型)均相同时,最后位置决定
权重:
<!-- 优先级取决于权重,其实就是比较个数 -->
<!-- 1.不同的修饰符(后代/兄弟/交集...)均不影响权重 -->
<!-- 3.权重只和个数有关 -->
<!-- 4.id的权重无限大于class无限大于标签 -->
<!-- 5.属性选择器的权重与类一样 -->
<!-- 复习: 优先级来源(操作的是同一标签同一属性) -->
举例:
/*两个类名的选择器大于单个类名选择器*/
.d5{
font-size: 20px;
}
[aa]{
font-size: 50px;
}
/*模糊匹配*/
[aa*="b"]{
font-size: 60px;
}
/*每个选择器位也可以替换为一个组合选择器*/
.d3.d5{
font-size: 40px;
}
body > .d1.b2.d5{
font-size: 50px;
}
/*.d1 div .d3.d5 优先级等于body > .d1.b2.d5 谁在下面谁起作用*/
.d1 div .d3.d5{
font-size: 70px;
}
#div{
font-size: 100px;
}
标签:
<div class="d1">
<div class="d2">
<div class="d3">
<div class="d4">
<div class="d5 aa="aa" id="div">12345</div>
<div class="d5 aa="bAAb">965746325</div>
</div>
</div>
</div>
</div>
三. 伪类选择器
1. a连接标签的四大伪类:
操作的是a,伪类是修饰词,不影响优先级
:hover (悬浮)
/*链接被鼠标悬浮*/
a：hover{
color: green;
/*鼠标样式 通用 pointer wait*/
cursor: pointer;
}
:active (点击后)
/*链接处于激活状态*/
a:active{
color: red;
}
:link ()
a:link{
color: red;
}
:visited()
/*链接已经被访问过*/
a:visited{
color: #ccc
}
举例:
section{
width: 100px;
height: 100px;
background-color: orange
}
/*同一结构下的第几个:先确定位置再匹配类型*/
section:nth-child(3),section:nth-child(5){
background-color: red
}
a:nth-child(2){
color: yellow
}
/*同一结构下的某选择器的第几个: 先确定类型再匹配位置*/
section:nth-of-type(1),section:nth-of-type(3){
background-color: cyan
}
/*取反*/
section:not(:nth-of-type(2)){
background-color: pink
}
2. 位置相关
:nth-child()|:last-child 先确定位置再匹配类型
1. :nth-child 同一结构下的第几个:先确定位置再匹配类型
举例:
section:nth-child(3),section:nth-child(5){
background-color: red
}
a:nth-child(2){
color: yellow
}
:nth-of-type()先匹配类型再确定位置
2. :nth-of-type 同一结构下的某选择器的第几个: 先确定类型再匹配位置
举例:
section:nth-of-type(1),section:nth-of-type(3){
background-color: cyan
}
取反 选择器 :not(修饰词)|div:not(:nth-of-type(2))
3. :not 取反
举例:
section:not(:nth-of-type(2)){
background-color: pink
}
四. 盒模型
margin+ border + padding + content (width * height)都具有自身区域
margin参与布局 不参与盒子显示,其余都参加盒子显示
border 颜色自身定义,padding和content颜色由背景色填充
<!-- 什么是盒模型 : 通配选择器可以控制的页面标签都是盒模型(一般我们操作的是块级标签) -->
<!-- 为什么使用盒模型 :页面书写的标签初始状态基本都不能满足要求,需要再次修改,修改的就是盒模型的各个属性 -->
<!-- 盒模型的组成部分:margin(外边距)+boder(边框)+padding(内边距)+content(内容) -->
<!-- 注意点: 1.四部分均具有自身独立区域
2.content=width*height,是子标签或子内容的显示区域 -->
1./*content=width*height,颜色由背景色填充,参与盒子显示*/
.box{
width: 100px;
height: 100px;
background-color: red
}
2./*padding:颜色由背景色填充,参与盒子显示*/
.box{
border: 10px solid black;
}
3./*margin,没有颜色,不参与盒子显示,决定盒子布局(位置信息)*/
.box{
margin: 200px;
}
4./*display中如果是inline */
5.标签
<div class="box"></div>
整体设置:
padding : 上 右 下 左(无值取对边)
分开设置:
padding-top : 10px;
padding-right : 10px;
padding-bottom : 10px;
padding-left : 10px;
整体设置;
border : 10px solid #af3;
分开设置:
border-top: 50px solid red;
border-right: 50px solid pink;
border-bottom: 50px solid orange;
border-left: 50px solid blue;
五.盒模型布局:
完成自身布局:margin-left|margin-top
上移|右移 : top取正值|left取正值
下移|左移 : top取负值|left取负值
举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒模型布局</title>
<style type="text/css">
/*body默认有margin:8px,做项目时一定会清除*/
/*清除系统默认(不喜欢)样式,该操作称之为reset操作*/
body{
margin: 0;
}
/*block盒子,宽度自适应父级,高度由子级撑开*/
.box{
height: 200px;
width: 200px;
background-color: orange;
}
.b1{
/*margin: 50px;*/
margin-top: 50px;
margin-left: 50px;
}
/*只有margin-left|top用于完成自身布局*/
.b2{
/*水平居中:在父级水平居中*/
/*display: inline-block;*/
/*auto自适应剩余空白区域*/
margin-left: auto;
margin-right: auto;
/*实现居右50px*/
margin-left: auto;
margin-right: 50px;
/*b2上移与b1并排*/
margin-top: -200px
}
/*a标签的reset操作*/
a{
color: black;
text-decoration: none;
}
/*h1标签的reset操作*/
h1{
margin: 0;
}
/*margin-right|bottom影响兄弟布局*/
.up{
/*bottom会影响之下的兄弟,往下挤*/
/*margin-bottom: 30px;*/
/*right会影响右方的兄弟,往右挤*/
/*margin-right: 30px;*/
}
.down{
/*上下兄弟的距离取最大值 => margin-top的坑*/
margin-top: 30px;
}
</style>
<style type="text/css">
.sup {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 50px;
}
.sub {
/*父子top取最大值 => margin-top的坑(父级只与第一个子级联动)*/
width: 100px;
height: 100px;
background-color: brown;
margin-top: 50px;
}
/*拆散父子(第一子)*/
/*1.设置父级的border-top即可*/
/*2.或者设置父级的padding-top即可*/
</style>
</head>
<body>
<div class="box"></div>
<a href="#">123</a>
<h1>123</h1>
<div class="box b1"></div>
<div class="box b2"></div>
<div class="up"></div>
<div class="down"></div>
<div class="sup">
<div class="sub"></div>
</div>
</body>
</html>
