CSS3之新增选择器

文章目录

  • 1.属性选择器
            • 1.利用属性选择器就可以不借助于类或者id选择器
            • 2.属性选择器还可以选择 属性 = 值的某些元素
            • 3.属性选择器可以选择属性值开头的某些元素
            • 4.属性选择器可以选择属性值结尾的某些元素
  • 2.结构伪类选择器
        • 2.1 `E:first-child` 和`E:last-child`
        • 2.2 `nth-child(n)`
        • 2.3`E:first-of-type`和`E:last-of-type`
  • 3.伪元素选择器
  • 4.总结


1.属性选择器

属性选择器可以根据元素特定的属性来选择元素,这样就可以不用借助于类或者id选择器

选择符 简介
ele[a] 选择具有a属性的ele元素
ele[a=“val”] 选择具有a属性且属性值且等于val的ele元素
ele[a^=“val”] 选择具有a属性且值以val开头的ele元素
ele[a$=“val”] 选择具有a属性且值以val结尾的ele元素
ele[a*=“val”] 选择具有a属性且值中含有val的ele元素

tips:上面表格中的ele可以代表任何元素,a可以代表任何属性

注意点:

1.利用属性选择器就可以不借助于类或者id选择器
<head>
    <style>
        input[value] {
            color: lightblue;
        }
    style>
head>
<body>
    <input type="text" value="请输入内容">
body>
2.属性选择器还可以选择 属性 = 值的某些元素
<head>
<style>
    input[value="请输入内容"] {
        color: lightblue;
    }
style>
head>
<body>
    <input type="text" value="请输入内容">
body>
3.属性选择器可以选择属性值开头的某些元素
<head>
<style>
    input[value^="请输入"] {
        color: lightblue;
    }
style>
head>
<body>
    <input type="text" value="请输入内容">
body>
4.属性选择器可以选择属性值结尾的某些元素
<head>
<style>
    input[value$="内容"] {
        color: lightblue;
    }
style>
head>
<body>
    <input type="text" value="请输入内容">
body>

最后这四种选择方式的效果都是一样的,如图~
在这里插入图片描述

2.结构伪类选择器

结构伪类选择器常用于根据父级选择器选择里面的子元素

选择符 简介
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个

2.1 E:first-childE:last-child

<head>
    <style>
        ul li:first-child {
            background-color: lightblue;
        }

        ul li:last-child {
            background-color: lightgreen;
        }
    style>
head>
<body>
    <ul>
        <li>1li>
        <li>2li>
        <li>3li>
        <li>4li>
        <li>5li>
    ul>
body>

CSS3之新增选择器_第1张图片

2.2 nth-child(n)

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

注意点:
1. n可以是数字关键字公式
2.n如果是数字,就是选择第n个子元素,里面数字从1开始
3.n可以是关键字:even 偶数odd奇数
4.n可以是公式:常见的公式如下(如果n是公式,则从0开始计算,但是第0个元素或者超出了元素的个数会被忽略)

<head>
    <style>
        ul li:nth-child(even) {
        /* 选中所有偶数序号的元素 */
            background-color: lightgreen;
        }
    style>
head>
<body>
    <ul>
        <li>1li>
        <li>2li>
        <li>3li>
        <li>4li>
        <li>5li>
        <li>6li>
    ul>
body>

CSS3之新增选择器_第2张图片

2.3E:first-of-typeE:last-of-type

类型 作用
E:first-of-type 指定类型E的第一个
E:last-of-type 指定类型E的最后一个

3.伪元素选择器

伪元素选择器可以帮我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构

选择符 简介
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容
<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: lightblue;
        }
        div::before {
            content: "我是伪元素选择器";
        }
    style>
head>

CSS3之新增选择器_第3张图片

注意点:

  1. ::before::after创建一个元素,但是是属于行内元素
  2. 新创建的这个元素在文档树中是找不到的,所以我们称为伪元素
    3.::before::after必须有content属性
  3. ::before在父元素内容的前面创建元素 ,::after在父元素内容的后面插入元素
  4. 伪元素选择器 和 标签选择器 一样,权重为1

4.总结

  1. 结构伪类选择器一般用于选择父级里面的第几个孩子
  2. nth-child 对父元素里面所有孩子排序选择(序号是固定的),先找到第n个孩子,然后看看是否和E匹配素进行排序选择,先去匹配E,然后再根据E找第n个孩子
  3. 关于nth-child(n), 我们要知道n是从0开始计算的,要记住常用的公式
  4. 如果是无序列表,我们肯定用 nth-child 更多
  5. 类选择器,属性选择器,伪类选择器,权重为10

你可能感兴趣的:(前端,html,css,css,css3,前端,html,html5)