css3-选择器

最新推荐文章于 2019-11-12 18:49:48 发布

前端笨鸟

最新推荐文章于 2019-11-12 18:49:48 发布

阅读量103

点赞数

分类专栏： html学习笔记文章标签： css3

本文链接：https://blog.csdn.net/qq_41670147/article/details/102854048

版权

html学习笔记专栏收录该内容

28 篇文章 0 订阅

订阅专栏

属性选择器

选择符	简介
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属性、且值中含有val的E元素

类选择器、属性选择器、伪类选择器，权重为10
结构伪类选择器

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

nth-child(n)
● n可以使数字、关键字和公式
● n如果是数字，就是选择第几个
● 常见的关键词有even偶数 odd奇数
● 常见的公式如下（如果n是公式，则从0开始计算，但第0个元素或者超出了元素的个数会被忽略）

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

注意：:nth-child(n)选择父元素里面的第n个标签，它不管里面的标签是否同一种类型
例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试</title>
    <style>
        /* div :nth-child(1) {
            background: coral;
        } */
        /* div span:nth-child(1) {
            background: coral;
        } */
        /* 这种写法无法选出“我是第二个” */
        
        div span:nth-child(2) {
            background: coral;
        }
        /*这种写法才生效*/
    </style>
</head>

<body>
    <div>
        <p>我是第一个</p>
        <span>我是第二个</span>
        <span>我是第三个</span>
        <span>我是第四个</span>
    </div>
</body>

</html>

伪元素选择器

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

注意：
before和after必须有content属性
before在内容的前面，after在内容的后面
before和after创建一个元素，但是属于行内元素
在dom里面看不见创建的元素，由此称为伪元素
伪元素和标签选择器一样，权重为1

前端笨鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3-选择器

属性选择器选择符简介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属性、且值中含有val的E元素类选择器...
复制链接

扫一扫