2022.8.5
学习进度:
css(1) 01:10:02
选择器
作用 : 快速选择出来我们想要的标签
我认为就是对前 30分钟 更为细致的划分
1 . 标签选择器
以 <div> , <span> 这些标签分类 , 在 css 文件下写下前置信息
div{
width: 100px;
height: 100px;
background_color: lightblue;
margin-bottom: 10 px; <!-- 每个 div 块之间预留 10 px 的位置 -->
}
2 . id 选择器
在标签内加上 id 标志以便快速选择想要作用的标签
举例 :
<div id="mydiv">
在 css 文件中
#mydiv{
```
}
注意一定要有 " # " , 这是 id 的标志
3 . 类选择器
同理 id选择器 ：
<div class="mydiv">
在 css文件 中
.div{
...
}
注意 ".div" 里面是有 "." 的
id 选择器 和 类选择器在逻辑上是一致的 , 仅仅只有 人为定义 上的区别
1. 人为认定每个 id 是唯一的 , 也就是<div id=""> 后只能接一个 , 并且是唯一的 ( 其他标签不能用 ) .
2. 但同一个标签可以接受多个 class , 仅需空格隔开即可 , 即 <div class="mydiv big-tag">
伪类别选择器
引子 : 举例 web 评测器上 , 鼠标放上悬浮 html 图标会有变大的效果
实现 :
.effect:hover {
transform: scale(1.2);
transiton: 2s <!-- 2s的效果渐变过程 -->
}
这里就要提三种形式
① : 链接伪选择器
提及 ：color 是字体的颜色 , background-color 是背景的颜色
link ( 访问前 )
visited ( 访问后 )
hover ( 鼠标悬浮时 )
active ( 点击时 )
focus ( 聚焦时 )
link , visited 多用于链接
举例 :
<body>
<a href="about.html">about</a>
<a href="about1.html">about</a>
<!-- about 是访问过的 , about1 是未访问过的 -->
</body>
css 文件中
a:link {
background-color: lightblue;
}
a:visited {
background-color: red;
}
/* 注意格式 a:xxx , a 指 <a> , xxx 指 伪类别选择器*/
fouce 和 <input> 搭配有很好的效果
input:focus {
background-color: lightblue;
width: 100px;
}
hover , active 感觉应用很广.
② : 位置伪类选择器
直接举例 :
p:nth-child (2) //y总特意强调了要将 nth-child(2) 理解为布尔值 , 只有同时满足布尔值为 true 和 <p> 标签才执行 , 注意这里的 2 不是指 <p> 的第二个 , 而是整体的第二个.
更巧妙的用法 :
p:nth-child (odd) //奇数位
p:nth-child (even) //偶数位
p:nth-child (3n) // 3的倍数
p:nth-child (2n+1) // 2n+1形式 ( a*n + b )
③ : 目标伪类选择器
知识 : <a> 不仅可以链接到页面外也能链接到页面内
举例 ：
<a herf="#myp">我的标签</a>
...
<p id="myp"><\p> <!-- 会跳转到此处 -->
此时会触发目标伪类选择器 target (同样是一个 bool 值 , 用于判断当前元素是不是被指向 )
举例 :
P:target {
width: 100px;
background-color: orange;
transition: 2s; //效果渐进的时间是 2s
}
