选择器进阶

选择器进阶/表单

选择器进阶

之前学过的选择器:
    *{} : 通配符选择器,选中所有标签
    .class名{} : 类名选择器,选中带有class='xxx'的标签
    #id名{} : id名选择器,选中带有id='xxx'的标签
    标签名{}: 标签选择器.选中网页里的所有该标签

    ul,li{} : 并集选择器,一次选中多个元素
    .box p{} : 后代选择器.选中.box里的p标签
    .box >p{} : 子代选择器.选中.box子元素p标签. 孙子不选

伪类选择器: 满足条件时,给标签添加样式(if)
    元素: hover{} -- 鼠标经过元素时,触发样式
    元素: active{} -- 鼠标点击元素时,触发样式
    a:visited{} -- 当a标签里的网址被访问过时,触发样式
    a:link{} -- 当a标签里的网址未被访问过时,触发样式
后两者一般不用.对隐私不好,很容易暴露哪些网站去过和没去过

伪元素选择器: 创建一个假的元素.不能被选中,不存在网页底层文档中. 只能看不能用.性能比较好
    元素::before{ content:'内容'} -- 在元素前添加伪元素
    元素::after{ content:'内容'} -- 在元素后添加伪元素
        before:前面 afer:后面  content:内容 伪元素要有这个属性才能激活
    如果你希望网页里部分内容(文字/图片)不能被选中/下载. 就可以用伪元素实现
        1.性能更好:伪元素只能看,不能被选中/下载. 减少了交互请求,加载更快,性能更好
        2.安全性更好 -- 只能看不能用

结构选择器: 当有多个标签时,选中指定元素
    元素:nth-child(下标){} : 选中指定下标数据,默认从1开始
    元素:first-child(){} : 选中第一个元素
    元素:last-child(){} :  选中最后一个元素

表单(form)

https://c.biancheng.net/view/7564.html
提供一个让用户进行交互的窗口 (输入框,选择框,提交按钮,文件上传)

form的属性:
    action = 数据提交的位置(后台/数据库)
    method = 数据提交方式(get/post) 默认get

form的功能控件(工具箱)
    input -- 输入框
    textarea -- 多行输入框
        统一属性 placeholder : 提醒输入内容
    select -- 下拉菜单
    option -- 下拉菜单里的选项
    button -- 按钮(一般结合js操作)

input的类型:
    text -- 文本框
    password -- 密码框

    checkbox -- 多选框
    radio -- 单选框.基于name判断是否为同一事件

    submit -- 提交
    file -- 文件
    reset -- 重设

reset.css

正式开发时,不会用通配符选择器.性能较差,没有相关样式的标签也会被设置
    *{
        font-size:16px;
    }
所以正式开发时,会先写好一个统一的网页初始样式. 
叫reset.css, 先把网页初始样式写好,定义好. 再进行开发

正常网页. p标签大小14px
我的网页 p标签大小为16px

博客登录案例(flex)

当前环境下,卷有很多种卷发   (加班/技术/人际关系)
    其中一种卷发就是提高代码性能(逼格)
    本次案例就是基于flex布局,并且在实现一个功能上用了个骚操作

flex布局的原理 --> 把容器里的元素基于两种轴进行排版布局
本次案例,作秀 > 实际作用.  看不懂,不用纠结,了解即可

拓展

算法  -- 非常重要,判断一个程序员的价值的核心标准
      广义: 解决问题的方法
      狭义: 针对特定情况的最优解
在实现功能时,通过使用不同的办法,提升程序运行速度/使用资源