HTML初学笔记（八）

南城不春
127 阅读2分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情

ps:接上节

有什么胜利可言，挺住意味一切。 ----佚名

新增选择器

新增属性选择器

选择符简介
E[att]选择具有att属性的E元素
E[att="val"]选择具有att属性且属性值等于val的E元素
E[att^="val"]匹配具有att属性且属性值以val开头的E元素
E[att$="val"]匹配具有att属性且属性值以val结尾的E元素
E[att*="val"]匹配具有att属性且值中含有的E元素

举个例子🎇

        /*属性选择器*/
        input[value]{
            color: aqua;
        }
        input[type=password]{
            background-color: bisque;
        }
        div[class^=icon]{
            color: blue;
        }
        section[class$=data]{
            color: blueviolet;
        }

image.png

新增结构伪类选择器

选择符简介
E:first-child匹配父元素中的第一个子元素E
E:last-child匹配父元素中最后一个子元素E
E:nth-child(n)匹配父元素中的第n个子元素E
E:first-of-type指定类型E的第一个
E:last-of-type指定类型E的最后一个
E:nth-of-type(n)指定类型E的第n个

这个比较简单但是要注意的是<first-child>和<first-of-type>效果一样但是区别如下：

nth-child会先把所有的孩子排列一遍，先看孩子再看父元素标签，如果两次匹配的元素不一样则该元素不会被选出来，而first-of-type却是反过来的，先看父元素，再看孩子。


 /* 结构为类选择器 */
        ul li:first-child{
            background-color: pink;
        }
        ul li:last-child{
            color: rgb(105, 248, 77);
        }
        ul li:nth-child(2){
            color: rgb(23, 20, 240);
        }
        ol li:nth-child(even){
            background-color: #ccc;
        }
        ol li:nth-child(odd){
            background-color: gray;
        }
        span:nth-child(n){
            background-color: red;
        }

ps:exen是偶数，odd是奇数，其中n也可以是公式，n是从0开始算

image.png

公式（简单看看就行，会推的就更好啦🎈）

公式取值
2n偶数
2n+1奇数
5n5、10、15
n+5从第五个开始（包含第五个）到最后
-n-5前五个（包含第五个）

新增伪元素选择器

选择符简介
::before在元素内部的前面插入内容
::after在元素内部的后面插入内容

✨✨注意✨✨：

  • 伪元素创建的是一个行内元素，不能设置宽高，除非转换成行内块元素

  • 伪元素权重为1

  • 伪元素创建必须要有content属性

  • 语法：element:before{}(新创建的这个元素在文档树中是找不到的，因此称为伪元素)

🎉这种方法适合用来给一些装饰的小图形创建一个模拟的html标签（比如导航栏中的<和>），不必再写更多的html标签，简化了框架结构

好啦各位小伙伴们，今天就到此结束哦，辛苦掘金运营小同学😘😘

avatar
文章
阅读
粉丝