一、组合选择器
群组选择器
可以将任意多个选择器分组到一起，并用逗号分隔。
div,.s,section{
color:red;
}
子代选择器
如果只希望影响到某个标签下的第一级标签，可以用子代选择器。
x > y。只会影响到x标签下的y标签，不会影响到x标签下的z标签里的y标签。
div>strong{
color:red;
}
后代选择器
又称包含选择器。只要是在这个标签里的某种标签都会被影响
x 空格 y。x标签下所有的y标签
div a {
text-decoration: none;
}
相邻选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
x + y。x标签左右的y标签
span+section{
background-color:pink;
}
兄弟选择器
x ~ y。x标签附近的所有的y标签。兄弟选择器包括相邻选择器。
span~section{
background-color:brown;
}
交集选择器
相交的部分就是要设置属性值的标签
xy。即有x又有y
i.s{
color: yellow;
}
<i class='s'>iiii</i>
组合选择器的优先级
同目录结构下
子代与后代优先级相投。相邻与兄弟优先级相同。
最终的样式采用逻辑后的样式根据选择器权值进行比较
不同目录结构下
根据选择器权值进行比较
权值为标签权重之和
权重： *:1
div:10
class:100
id:1000
!important:10000
权值比较时，关心的是值的大小，不关心位置和具体选择器名
权值相同时，靠位置决定
id永远比class大，class永远比标签大
控制的是同一目标才具有可比性
二、属性选择器
属性选择器权重与class选择器一样
有属性class的所有标签
[class]{
color: orange;
}
有属性class且值为d2的所有标签
[class='d2']{
color: pink;
}
div且class='d2',权重增加
div[class='d2']{
color: blue;
}
属性以什么开头：^=
[class^='he']{
color: yellow;
}
属性以什么结尾：$=
[class^='rd']{
color: tan;
}
属性模糊匹配：*=
[class^='llo']{
color: cyan;
}
三、盒模型
盒模型概念
- 广义盒模型：文档中所有功能性及内容性标签，及文档中所有显示性标签
- 侠义盒模型：文档中以块级形式存在的标签（块级标签拥有盒模型100%特性且最常用）
- 盒模型组成：margin + border + padding + content
盒模型成员介绍
content
- 通过设置width与height来规定content
- 块级标签可以设置自身宽高，默认宽为父级宽(width=auto)、高为0，高度可以由内容决定
- 内联标签不可以设置自身宽高，默认宽高均为0，宽高一定由内容决定
border
- border(边框)由border-width(宽度)、border-color(颜色)、border-style(风格)三部分组成
- border成员：border-left、border-right、border-top、border-bottom
- border-width成员：border-left-width、border-right-width、border-top-width、border-bottom-width
- border-color成员：border-left-color、border-right-color、border-top-color、border-bottom-color
- border-style成员：border-left-style、border-right-style、border-top-style、border-bottom-style
| 风格 | 解释 |
|---|---|
| solid | 实线 |
| dashed | 虚线 |
| dotted | 点状线 |
| double | 双实线 |
| groove | 槽状线 |
| ridge | 脊线 |
| inset | 内嵌效果线 |
| outset | 外凸效果线 |
padding
- padding成员：padding-left、padding-right、padding-top、padding-bottom
- padding整体设置
| 值得个数 | 方位 |
|---|---|
| 1 | 上下左右 |
| 2 | 上下 | 左右 |
| 3 | 上 | 左右 | 下 |
| 4 | 上 | 右 | 下 | 左 |
margin
- margin成员：margin-left、margin-right、margin-top、margin-bottom
- margin整体设置
| 赋值个数 | 方位 |
|---|---|
| 1 | 上下左右 |
| 2 | 上下 | 左右 |
| 3 | 上 | 左右 | 下 |
| 4 | 上 | 右 | 下 | 左 |
四、边界圆角
单角设置
border-top-left-radius
一个固定值:表示横纵
border-top-left-radius: 100px;
两个固定值:表示横与纵
border-top-left-radius: 100px,50px;
百分比赋值
border-top-left-radius: 100%;
整体赋值
border-radius
不分方位
左上为第一个角,顺时针,不足找对角
border-radius: 30px;
区分横纵
1.控制横向/控制纵向
2.横向又可以分为1,2,3,4个值;纵向亦然
border-radius: 10px 100px 50px /50px;
左上横10 右上横100 右下横50 左下横100/纵向全为50
五、常用标签
超连接标签a
语法
<a href="链接地址" title='鼠标悬浮的文本提示' target='目标位置'></a>
target:_self 当前页面打开 | _blank 新开空白标签为来打开目标网页
基本使用
<a href="https://www.baidu.com">百度</a>
注：如果是在本地的链接。当前目录./ 上一级目录..
其他应用场景
- mailto：邮件给...
- tel：电话给...
- sms：信息给...
a标签默认属性的清除
a {
color: #333;
text-decoration: none;
outline: 0
}
锚点
通过锚点名与#锚点名建起关联
name='tag'|href='#tag'
前往底部
<a href="#tag">前往底部</a>
设置一个锚点
<div class="bottom">
<a name="tag">底部</a>
</div>
图片标签img
语法
<img src="图片地址" alt="加载错误提示文字" title="鼠标悬浮的文本提示">
列表标签list
reset操作
<style>
ol,ul{
margin: 0;
padding:0;
list-style: none;
}
</style>
有序列表
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
无序列表
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
六、伪类选择器
a标签的四大伪类
- :link 初始状态
- :hover 鼠标悬停
- :active 活动状态
- :visited 访问过后的状态
注:鼠标样式
{
cursor: pointer | wait | move;
}
内容伪类
- :before：内容之前
- :after：内容之后
.txt:before{
content: '我是前缀```'
}
.txt:after{
content: '```我是后缀'
}
索引伪类
- :nth-child(n)：位置优先，再匹配类型。找到所有结构下的第N个标签,如果刚好是所选类型,那么匹配成功。
- :nth-of-type(n)：类型优先，再匹配位置。先将页面中的所有的所选类型找出,在匹配那些在自己结构层次下的第N个。
注：位置从1开始
取反伪类
- :not(selector)：对selector进行取反
七、盒模型布局
做页面必备reset操作
*{
margin: 0
}
盒模型布局基本介绍
-
布局方位：margin-left、margin-right、margin-top、margin-bottom
-
影响自身布局：margin-left、margin-top
-
影响兄弟布局：margin-right、margin-bottom
margin-bottom影响上下兄弟,尽量别对margin-right进行设置
margin-right影响上下兄弟,尽量别对margin-bottom进行设置
display:显示方式
- 块:block
- 内联:inline
- 内联块:inline-block
兄弟坑
<!-- 坑1 -->
<section class="s1"></section>
<section class="s2"></section>
盒模型布局的坑只出现在和margin-top相关的地方
.s1,.s2{
100px;
height: 100px;
background-color: pink;
}
和左右不一样,上下top会重叠取大值
.s1{
margin-bottom: 20px;
}
.s2{
margin-top: 20px;
}
父子坑
<!-- 坑2 -->
<div class="sup">
<div class="sub"></div>
</div>
.sup{
200px;
height: 200px;
background-color:cyan;
}
.sub{
100px;
height: 100px;
background-color:orange;
}
父子top重叠,取大值
.sup{
margin-top: 50px;
}
.sub{
margin-left: 50px;
/*margin-top:100px;*/
}
解决方案
1.将父级固定
.sup{
/border-top: 1px solid black;/
/border-top: 1px solid transparent;/
/保证显示区域不变200200/
/height: 199px/
}
2.通过padding
.sup{
padding-top:50px;
height: 150px;
}