选择器笔记整理

楼主^#

更多发布于：2023-01-17 09:39

css 3 day01
1. css3 简介
   css3 是css2 的升级版本，在css2的基本上进行修改(包括：新增和删除)
   css3兼容性问题，css3不兼容IE9以下的版本
   css3 新的选择器，没有css2的选择器兼容性好.

2. css3 选择器
   属性匹配选择器
   1、全匹配
标签[属性名='属性值']{ }

   2、开头匹配
   标签[属性名^='属性值']{ }

   3、结尾匹配
标签[属性名$='属性值']{ }

   4、包含匹配
标签[属性名*='属性值']{ }

   结构性伪类选择器
   1、:nth-child () 选中第几个儿子，从 1 开始，还可以表示倍数
nth-child (2n) 选中第2、4、6.....
nth-child (2n+1) 选中第3、5、7....
nth-child (3n) 选中第3、6、9....

section>div:nth-child(3) 选中section下的第三个儿子，并且这个儿子是div
section>:nth-child(3) 选中section下的第三个儿子

:first-child 第一个儿子
:last-child 最后一个儿子

2、:nth-of-type() 选中父级下的第几个子级
section>div:nth-of-type(3) 选中section下的第三个div(只数div)
last-of-type 最后一个div
first-of-type 第一个div

3、:only-child 选中只有一个子级的
div>:only-child{ } 选中div下面只有一个元素的
div>p:only-child{ } 选中div下面的只有一个元素，并且这个元素是p

4、兄弟选择器
+(相邻的弟弟) ~(后面的所有的弟弟们)
section #div1~div 选择section下的id为div1的元素的所有弟弟

5、:not（）不是，反选
p:not(.myp) 选中 p标签中没有class名为myp 的标签
section div:not(#div1) 选中section下面的div并且id不是div1的div标签

6、:checked 选中的（表单里面的单选和多选）
input:checked (选中input框中选中的input)
   http://bugshouji.com/bbs-read-run?tid=1239 修改浏览器自定义样式

7、:disabled 选中不可用的
  input:disabled (选中input框中不可用的input)

8、:enabled 选中可用的
input:enabled (选中input框中可用的input)

其他的伪元素
9、::placeholder 修改提示词(css4的东西，因为还没公布，所以用：：)
   input::placeholder{} 注意兼容性

10、::selection 修改鼠标刮中时的效果

3. 圆角 border-radius 圆角
一个值 10px 四个角
两个值 10px 20px 左上右下10px 左下右上20px
三个值 10px 20px 30px 左上右上左下右下
四个值 10px 20px 30px 40px 左上右上右下左下
八个值 5px 10px 15px 20px/15px 20px 30px 50px 矩形横竖两斜分成了四个角
参考：https://9elements.github.io/fancy-border-radius/ 用这个理解

百分数：相对自己的百分比

4. 阴影
  box-shadow盒子阴影
box-shadow： x轴偏移量 y轴偏移量阴影的模糊度阴影的扩展半径阴影的颜色投影的方式
模糊度越大，越不饱和
投影的方式：默认外投影 | inset 内投影

text-shadow 文本阴影

5. 文本溢出，显示省略号

单选文本：
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

注意：单词会换行，中文会换行,没有空格长字符，默认不会换行

多行文本溢出显示省略号：
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 4;

6. 换行处理
white-space属性
word-break：单词的换行

7. iconfont 的引入 / 引入字体图标

第一种引入方式：
1、https://www.iconfont.cn/ 使用微博账号登录
2、选中图标增加到购物车
3、在购物车中将所有的图标添加至项目
4、下载unicode类型，会下载一个压缩包
5、在页面中通过link标签引入 iconfont.css文件
6、在标签中添加改图标的类名，先添加一个iconfont的类型，再添加该图标的类名

第二种引入方式：
@font-face 自定义一个字体
5、在页面中引入 iconfont.ttf文件
6、在标签中添加该图标的unicode码

@font-face {
   font-family: "guoxinan";
   src: url("css/iconfont.ttf");
   }
   span{
   font-family:guoxinan ;
   font-size: 40px;
   color:pink;
   }
   <span></span>

使用字体图标的好处：
1、让图标具有字体的属性，color font-size text-algin
2、大大降低了图片的大小以及服务器的请求次数
3、矢量图不失真，不会存在放大过后变模糊的情况

注：
   after, before 伪元素里,content里可以写unicode编码;

8. 变换 transform

  分四种:
平移
   translate(x坐标，y坐标);
   translateX(x坐标);
   translateY(y坐标);
旋转
rotate()：只能设置一个值，默认z轴
rotateX() : X轴
rotateY() ：Y轴
放大/缩放:
   scale(0.5);
   1: 保持不变 0:没有
   一个值：水平方向，垂直方向同时变化
   二个值： scale(x轴的缩放,y轴的绽放);
   scaleX(0.5): 水平方向变化
   scaleY() :垂直方向变化

拉伸: skew
   skew(x轴,y轴)
   skewX()
   skewY()

注：变换，对盒子模型没有发生，位置没有发生变化，也不会影响其它元素
transform-origin:中心点设置
9. transition 过渡属性
   transition : 过渡的属性过渡时间过渡类型延迟时间

喜欢0