Day 23 CSS3 < 目标选择器>

CSS3新增的目标选择器类型:

1.属性选择器

属性选择器可以根据元素特定属性来选择元素,这样就可以不用藉助於类或者ID选择器

MDN Web Docs 属性选择器

    /* 必须是input但是具有value这个属性 */
    input[value] {
        color: pink;
    }

    /* 只选择type=text文本框的input */
    input[type=text] {
        color: pink;
    }

    /* 首先是div 然後具有class属性 且属性开头以icon */
    div[class^=icon] {
        color: powderblue;
    }

    section[class$=data] {
        color: purple;
    }
2.结构伪类选择器

结构伪类选择弃主要根据文档结构来选择元素,经常用於根据父级选择器里面的子元素

nth-child(n) 选择某个父元素的一个或多个特定的子元素

    <style>
        /* 选择ul里面的第一个li */
        ul li:first-child {
            background-color: purple;
        }

        /* 选择最後一个li */
        ul li:last-child {
            background-color: red;
        }

        /* 选择第3个li */
        ul li:nth-child(3) {
            background-color: royalblue;
        }

        /* 把所有偶数的li都选出来 */
        ul li:nth-child(even) {
            background-color: darkcyan;
        }

        /* 把所有奇数的li都选出来 */
        ul li:nth-child(odd) {
            background-color: powderblue;
        }

        /* nth-child(n) 从0开始 每次+1 往後面计算 这里面必须是n 不能是其他字母 选择了所有li*/
        ol li:nth-child(n) {
            background-color: rosybrown;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>

    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ol>
</body>

结构伪类选择器 codepen

  • n可以是数字,关键字和公式
  • n如果是数字就是选择第n个子元素,里面数字从1开始...
  • n可以是关键字 : even偶数 odd奇数
  • n可以是公式 : 常见的公式如下 (如果n是公式,则从0开始计算 但是第0个元素或者超出了元素的个数会被忽略)
  • nth-child 会对父元素所有盒子都排列序号,先找到n再看是否匹配E
  • nth-of-type 对父元素里面指定子元素进行排序选择,先去匹配E,然後再根据E找第n个孩子

备注:

  • 结构伪类选择器一般用於选择父级里面的第几个孩子
  • nth-child对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子,然後看看是否和E匹配
  • nth-og-type 对父元素里面指定子元素进行排序选择,先去匹配E,然後再根据E找第n个孩子
  • 关於nth-child(n)我们要知道n是从0开始计算的,要记住常用公式
  • 如果是无序列表 肯定使用nth-child
  • 类选择器 属性选择器 伪类选择器 权重为10
3.伪元素选择器
::before 在元素的前面插入内容
::after  在元素的後面插入内容

伪元素选择器 codepen 范例

备注:

  • before和after创建一个元素,但是属於行内元素
  • 新创建的这个元素在文党中是找不到的,所以称为伪元素
  • 语法 : element ::before{ }
  • before和after必须有content属性
  • before在父元素内容的前面创建元素,after在父元素内容的後面插入元素
  • 伪元素选择器和标签选择器一样,权重为1

<<:  Day 18:数据蒐集、资料视觉化、数据分析

>>:  IT 铁人赛 k8s 入门30天 -- day19 k8s Task Coarse Parallel Processing Using a Work Queue

30天程序语言研究

今天是30天程序语言研究的第九天,研究的语言一样是python,今天主要学习的是档案的写入和写出 网...

[DAY-17] 热情从何处来

2021 最後一季拉!!! 倒数 3 个月 当兵有破百 每年的此时此刻也进入破百的阶段拉!!! 前...

从零开始学3D游戏设计:互动按钮

这是 Roblox 从零开始系列,使用者介面章节的第三个单元,在今天你将学会如何在萤幕上制作出技能按...

[Day 14]事件处理v-on

又是一个新的一天又要想今天要打什麽了(;´д`)ゞ,今天打算来讲v-on,以及讲解如何用v-on监听...

输家的特质

股市只有两种人:输家跟赢家。 其中长期赢家只占极少部分,若我们不想成为绝大部分的输家,以下几种行为请...