DAY46-前端入门-组合选择器、标签a_img_list、盒模型、伪类、盒模型布局

目录

• 一、组合选择器
  • 群组选择器
  • 子代选择器
  • 后代选择器
  • 相邻选择器
  • 兄弟选择器
  • 交集选择器
  • 组合选择器的优先级
• 二、属性选择器
• 三、盒模型
  • 盒模型概念
  • 盒模型成员介绍
    • content
    • border
    • padding
    • margin
• 四、边界圆角
  • 单角设置
  • 整体赋值
• 五、常用标签
  • 超连接标签a
    • 语法
    • 基本使用
    • 其他应用场景
    • a标签默认属性的清除
    • 锚点
  • 图片标签img
    • 语法
  • 列表标签list
    • reset操作
    • 有序列表
    • 无序列表
• 六、伪类选择器
  • a标签的四大伪类
  • 内容伪类
  • 索引伪类
  • 取反伪类
• 七、盒模型布局
  • 做页面必备reset操作
  • 盒模型布局基本介绍
  • display:显示方式
  • 兄弟坑
  • 父子坑
  • 解决方案

一、组合选择器

群组选择器

可以将任意多个选择器分组到一起，并用逗号分隔。

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;
}