"一、组合选择器# 每个选择器位可以是任意基础选择器或选择器组合 1. 群组选择器# 可以一次性控制多个选择器选择器之间用逗号(,) 隔开 Copydiv,.d1,#div{ color:red; } 2. 子代 (后代) 选择器# 一次性控制一个选择器 (逻辑最后的那个选择器)，前置位的选择器是修 ...."

someone1
AI专业者开发社区 1 号成员
AI开发者社区 • 0 回帖 • 5 浏览 • 4 个月前

CSS入门(二)

一、组合选择器#

每个选择器位可以是任意基础选择器或选择器组合

1. 群组选择器#

可以一次性控制多个选择器
选择器之间用逗号(,) 隔开

Copy
div,.d1,#div{
    color:red;
}

2. 子代 (后代) 选择器#

一次性控制一个选择器 (逻辑最后的那个选择器)，前置位的选择器是修饰性选择器
子代选择器必须为一级父子关系，后代选择器可以为一级，也可以多级父子嵌套关系

Copy
子代选择器用>连接
body>div{
    color:red;
}
注：控制body下的div选择器
后代选择器用空格连接
div .d2{
    color:red;
}
注：控制div下只要有d2的选择器

3. 相邻 (兄弟) 选择器#

一次性控制一个选择器 (逻辑最后的那个选择器)，前置位的选择器是修饰性选择器
相邻选择器必须为直接相邻关系，兄弟选择器可以为直接相邻或间接相邻关系

Copy
相邻选择器用+连接
.d11+.d22{
    color:red;
}
注：控制的是d22选择器
兄弟选择器用~连接
.d11~.d33{
    color:yellow;
}
注：控制的是d33选择器

4. 交集选择器#

选择器之间没有任何的连接符
了解即可

Copy
div.s{
    color: yellow;
}
注：既是div选择器又是s选择器
html：
<div class="s">这是交集选择器</div>

5. 多类名选择器#

一次性控制一个选择器 (逻辑最后的那个选择器)，前置位的选择器是修饰性选择器
只是为了更精确

Copy
.d1.d2{
    color: tan;
}
.d1.d2.d3{
    color: #123
}

二、组合选择器的优先级#

1. 同目录结构下#

子代与后代优先级相同

例子：body>div == body div
相邻与兄弟优先级相同

例子：div+span == div~span

2. 不同目录下#

根据选择器的权值进行比较，权值为标签权重之和

选择器	权重
通配 (*)	1
标签 (div)	10
类、属性 (class)	100
id	1000
!import	10000

注：只有控制的是同一目标才具有可比性

权值比较时，关心的是值的大小，不关心位置与具体选择器名
id 永远比 class 大，class 永远比标签大。

Copy
		/*10*/
		div{
			color: red;
		}
		/*20*/
		div div{
			color: yellow;
		}
		.d2{
			color: blue;
		}
		/*.d2 抵消，剩 10*/
		div .d2{
			color: orange;
		}
		/* 等价与 div .d2, 权值相同，位置决定 */
		.d1 div{
			color: pink;
		}
		/* 又多 10*/
		div .d1 div{
			color: tan;
		}
		/* 不具有可比性 */
		div .d1 >div{
			color: green;
		}
		/* 高于一切 class 及标签 */
		#dd1 div {
			color: #000;
		}

三、属性选择器#

属性选择器的权值 == class 选择器的权重

Copy
有属性class的所有标签
[class]{
    color: orange;
}
/* 有属性 class 且值为 d2 的所有标签 (值不影响权重)*/
[class="d2"]{
    color: pink;
}
/是 div 且 class="d2"，增加了权重/
div[class="d2"]{
color: blue;
}

子串匹配属性选择器#

模糊搜索

Copy
[calss ^= 'he']{
    color: yellow;
}
[calss $= 'ld']{
    color: tan;
}
[class *= 'ow']{
    color: cyan;
}

[attr]：匹配拥有 attr 属性的标签
[attr=val]：匹配拥有 attr 属性，属性值为 val 的标签
[attr^=val]：匹配拥有 attr 属性，属性值以 val 开头的标签
[attr$=val]：匹配拥有 attr 属性，属性值以 val 结尾的标签
[attr*=val]：匹配拥有 attr 属性，属性值包含 val 的标签

四、盒模型#

广义：文档中所有功能性及内容性标签，及文档中所有显示性标签
狭义：文档中以块级形式存在的标签

盒模型由四个成员组成：margin+border+padding+content

四个成员均有自身独立显示区域，相互之间不影响 (视觉上感觉有影响)
margin(外边距),padding(内边距)，他们两个负责控制布局
border 控制边框
content 控制内容

块级元素和内联元素#

块级元素：#

总是在新行上开始，占据一整行；
高度，行高以及外边距和内边距都可控制；
宽度缺省是它的容器的 100%，除非设定一个宽度
它可以容纳内联元素和其他块元素。

内联元素：#

和其他元素都在一行上；
高，行高及外边距和内边距部分可改变；
宽度只与内容有关；
行内元素只能容纳文本或者其他行内元素。
外边界只能对左右起作用，内边距都起作用

display: 显示方式#

块：block
内联：inline
内联块：inline-block

1.content#

通过设置 width 与 height 来规定 content
块级标签可以设置自身宽高，默认宽为父级宽、高为 0，高度可以由内容决定
内联标签不可以设置自身宽高，默认均为 0，宽高由内容决定 (可以通过设置 display:block 改成块标签)

2.border#

border 组成：border-width(宽度),border-color(颜色),border-style(风格) 三部分组成。
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	外凸效果线

border 整体设置：border:1px solid red;

设置border-color: transparent;会透出背景颜色

3.padding 和 margin#

padding 和 margin 都具有的成员：X-left、X-right、X-top、X-bottom
整体设置

赋值个数	方位
1	上下左右
2	上下 \| 左右
3	上 \| 左右 \| 下
4	上 \| 右 \| 下 \| 左

规律：从上开始，顺时针赋值，不足找对面

使用谷歌浏览器页面调试工具#

Copy
.box{
    width: 100px;
    height: 100px;
    padding: 10px;
    background: red;
}
html:
<div class="box"></div>

通过上图可以看出：

padding 与 content 公有背景颜色，红色区域为 102*120

content 区域为 100*100

五、边界圆角#

border-radius(含义是“边框半径”)

1. 整体设置#

border-radius 可以同时设置一个到四个值，如果设置 1 个值，表示四个圆角都使用这个值，如果设置 2 个值，表示左上左上角和右下角使用第 1 个值，右上角和左下角使用第二个值。如果设置三个值，左上角第 1 个值，右上角，左下角第 2 个值，右下角第三个值。值设置的是圆角的水平半径和垂直半径，单位可以是任意 css 合法度量值。

赋值个数 (值类型：长度 \| 百分比)	解释
1	左上右上左下右下
2	左上右下 \| 右上左下
3	左上 \| 右上左下 \| 右下
4	左上 \| 右上 \| 右下 \| 左下

border-radius:30px;

总结：左上为第一个角，顺时针，不足找对角

使用斜杠 (/) 可以设置第二组值，第一组值表示水平半径，第二组值表示垂直半径，分别可以设置一到四个值。

border-radius: 15px 5px 25px 5px / 3px 5px 10px 15px;

2. 单角设置#

成员	解释
border-top-left-radius	左上方位
border-top-right-radius	右上方位
border-bottom-left-radius	左下方位
border-bottom-right-radius	右下方位

六、a，img，list 标签#

1. 超链接#

Copy
<a href='要跳转的地址'>超链接文字</a>

1.1 a 标签的属性#

href：代表链接一个 url 地址

Copy
url除了可以是网页外，还可以是其它的文件。还可以设置为网页中的某一个位置(锚点).
还可以是Email地址(mailto)，电话(tel)，短信(sms)

title：鼠标悬浮的文本提示
target：规定何处打开链接文档

Copy
target=_blank： 将链接内容在新的浏览窗口中打开。 
target=_self：  将链接的内容，显示在目前的窗口中。 
target=_parent：将链接的内容，当成文件的上一个画面。 
target=_top：这个参数可以解决新内容被旧框窗包围的困扰，使用这参数，会将整个画面重新显示成链接的画面内容。

1.2 相对路径：#

Copy
./或省略代表当前文件所在路径，可以访问与该文件同路径下的所有文件及文件夹
../代表上一级目录

1.3 a 标签的 reset 操作#

Copy
a {
    color: #333;
    text-decoration: none;
    outline: 0;
}

1.4 锚点#

Copy
用<a name=“”>定义，例如：<a name=“here1”>第一部分</a>，
使用<a href=“#here1”>跳转到第一部分</a>超链接就可以定位到网页中的“第一部分”这个位置。

1.5 鼠标样式#

Copy
{
    cursor: pointer;
}
常用：
text  文字选择器
crosshair   十字架
wait  等待
help  帮助
pointer 小手

2. 图片#

Copy
<img src="图片地址" title="" alt="">

2.1 常用属性#

alt -- 代表图像的替代文字 (异常解释)
src -- 代表一个图像源 (就是图像的位置)
title 提示信息
border – 代表图片边框的宽度
height -- 代表一个图像的高度
width -- 代表一个图像的宽度
usemap 将图像定义为客户器端图像映射。

3. 列表#

3.1 html 列表标签#

<ul></ul> 代表 HTML 无序列表，里面每一列表项使用<li>标签定义

<ol></ol> 代表 HTML 有序列表，里面每一列表项使用<li>标签定义

Copy
属性
start 规定有序列表的起始值。
type   规定在列表中使用的标记类型。(1 a A  i  I)
reversed  H5新添加 降序

<li></li> 代表 HTML 列表项目，每个列表项使用一对<li></li>标记
<dl></dl> 定义了定义列表（definition list）
<dt></dt> 标签定义了定义列表中的项目（即术语部分）
<dd></dd> 在定义列表中定义条目的定义部分。

3.2 css 列表属性#

list-style-type

Copy
disc        实心点
circle      圆圈
square		小方框
decimal		数字
lower-roman	小写罗马字
upper-roman	大写罗马字
lower-alpha	小写字母
upper0alpha	大写字母

list-style-position 位置

Copy
inside   标示在li里面
outside  标示在li外面

list-style-image 使用图片 url(./123.gif)
list-style 复合属性

Copy
list-style: type position image
list-style: none

七、伪类选择器#

伪类以冒号 (:) 开头

1.a 标签的四大伪类#

:link：未访问状态
:hover：悬浮状态
:active：活跃状态 (鼠标按下不动的状态)
:visited：已访问状态 (浏览器缓存)

普通标签也可以运用 :hover :active

Copy
.box{
			width: 200px;
			height: 200px;
			background-color: red;
		}
		.box:hover{
			background-color: orange;
			cursor: pointer;
		}
		.box:active{
			width: 400px;
			border-radius: 50%;
		}

2. 内容伪类#

结合 content 使用，可以单独出现

:before：内容之前
:after：内容之后

Copy
.txt:before{
    content: "我真帅 ~~~"
}
.txt:after{
    content: "~~~ 我是真的帅"
}
*:after{
    content:"hehe"
}

3. 位置 (索引) 伪类#

位置从 1 开始

:nth-child(n)：位置优先，再匹配类型
:nth-of-type(n)：类型优先，再匹配位置

Copy
注：找到所有结构下的第2个标签，如果刚好是div那么匹配成功
div:nth-child(2){
    color: green;
}
注:先将页面中所有div找出，在匹配哪些在自己结构层次下的第二个div
div:nth-of-type(2){
    color: cyan;
}

应用场景：

在同一目录下都是同一类型，用 :nth-child(n)

在同一目录下有多种类型的标签，用 :nth-of-type(n)

4. 取反伪类#

:not(a)：对 a 进行取反

Copy
[d]{
    color:red;
} d标签控制的是红色
:not([d]){
    color:red;
} 除了d标签控制的其它都是红色
span:not([d]){
    color:red;
} 是sapn标签并且没有d的，都是红色

八、盒模型布局#

布局方位：margin-left、margin-right、margin-top、margin-bottom
影响自身布局：margin-left、margin-top(自身位置改变)
影响兄弟布局：margin-right、margin-bottom(自身位置不变)

margin-bottom 影响上下兄弟，尽量别对 margin-right 进行设置

margin-right 影响左右兄弟，尽量别对 margin-bottom 进行设置

布局坑#

盒模型布局坑只出现在 margin-top 相关的地方

1. 兄弟坑#

Copy
上下两个模型重叠时取最大值(这里取30px)
.s1{
    margin-bottom: 20px;
}
.s2{
    margin-top: 30px;
}

2. 父子坑#

将子模型移动到中间

Copy
html:
<div class="sup">
    <div class="sub"></div>
</div>

Copy
.sup{
    width: 200px;
    height: 200px;
    background-color: cyan;
}
.sub{
    width: 100px;
    height: 100px;
    background-color: orange;
}

坑：

Copy
.sup{
    margin-top:50px;
}
.sub{
    margin-top50px;
    margin-left:50px;
}
父子top重叠，取最大值。

解决盒模型经典布局坑：

Copy
方法1.将父级固定(子级无法拖动)
.sup{
    border-top:1px solid transparent;
    /* 保证显示区域 200*200*/
    height:199px; 
}
方法2.通过padding
.sup{
    padding-top:50px;
    height:150px;
}

赋值个数 (值类型：长度 \| 百分比)	解释
1	左上右上左下右下
2	左上右下 \| 右上左下
3	左上 \| 右上左下 \| 右下
4	左上 \| 右上 \| 右下 \| 左下

CSS入门(二)

一、组合选择器#

1. 群组选择器#

2. 子代 (后代) 选择器#

3. 相邻 (兄弟) 选择器#

4. 交集选择器#

5. 多类名选择器#

二、组合选择器的优先级#

1. 同目录结构下#

2. 不同目录下#

三、属性选择器#

子串匹配属性选择器#

四、盒模型#

块级元素和内联元素#

块级元素：#

内联元素：#

display: 显示方式#

1.content#

2.border#

3.padding 和 margin#

使用谷歌浏览器页面调试工具#

五、边界圆角#

1. 整体设置#

2. 单角设置#

六、a，img，list 标签#

1. 超链接#

1.1 a 标签的属性#

1.2 相对路径：#

1.3 a 标签的 reset 操作#

1.4 锚点#

1.5 鼠标样式#

2. 图片#

2.1 常用属性#

3. 列表#

3.1 html 列表标签#

3.2 css 列表属性#

七、伪类选择器#

1.a 标签的四大伪类#

2. 内容伪类#

3. 位置 (索引) 伪类#

4. 取反伪类#

八、盒模型布局#

布局坑#

1. 兄弟坑#

2. 父子坑#

相关帖子

随便看看

CSS入门(二)