CSS选择器简单归纳说明

最新推荐文章于 2021-04-12 11:03:24 发布
最新推荐文章于 2021-04-12 11:03:24 发布
阅读量418 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/atu1111/article/details/108560378
版权

CSS选择器

1.选择器目录

这里写目录标题

1.1 元素选择器

  语法：E{…}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
             div
             {
                 background-color: blue;
             }
    </style>
</head>
<body>
    <div>你好，世界</div>
    <div id="app">helloworld</div>


</body>
</html>
1.2 属性选择器

  语法：E[attr=‘value’]{…}
  attr指如有id，name等属性，整句话意思是：匹配所有属性attr为value的E元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
             div[id='yyy']
             {
                 background-color: blue;
             }
    </style>
</head>
<body>
    <div>你好，世界</div>
    <div id="yyy">helloworld</div>


</body>
</html>

  它还有其它语法格式(像正则表达式语法)：
  1.2 .1 E[attr~=‘value’]{…} :匹配所有包含attr属性，且attr属性的值以空格隔开的系列值，其中的某个值为value的E元素起作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
             div[id~=yyy]{
                 background-color: blue;
             }
    </style>
</head>
<body>
    <div>你好，世界</div>
    <div id="xxx yyy zzz">helloworld</div>


</body>
</html>

  1.2 .2 E[attr|=‘value’]{…} :匹配所有包含attr属性，且attr属性的值以连字符分隔开的系列值，其中的第一个值为value的E元素起作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
             div[id|='yyy']{
                 background-color: blue;
             }
    </style>
</head>
<body>
    <div>你好，世界</div>
    <div id="yyy-xxx-zzz">helloworld</div>


</body>
</html>

  1.2 .3 E[attr^=‘value’]{…} :匹配所有包含attr属性，且是以attr属性的value值开头的E元素起作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
             div[id^=yyy]{
                 background-color: blue;
             }
    </style>
</head>
<body>
    <div>你好，世界</div>
    <div id="yyyAAAA">helloworld</div>


</body>
</html>

   1.2 .4 E[attr$=‘value’]{…} :匹配所有包含attr属性，且是以attr属性的value值结尾的E元素起作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
             div[id$=yyy]{
                 background-color: blue;
             }
    </style>
</head>
<body>
    <div>你好，世界</div>
    <div id="AAAAyyy">helloworld</div>


</body>
</html>

   1.2 .5 E[attr*=‘value’]{…} :匹配所有包含attr属性，且attr属性的值包含value的E元素起作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
             div[id*=yyy]
             {
                 background-color: blue;
             }
    </style>
</head>
<body>
    <div>你好，世界</div>
    <div id="AAAAyyyBBB">helloworld</div>


</body>
</html>
1.3 ID选择器

   #idValue{…} :匹配所有id属性值是idValue的E元素起作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
             #app
             {
                 background-color: blue;
             }
    </style>
</head>
<body>
    <div>你好，世界</div>
    <div id="app">helloworld</div>


</body>
</html>
1.4 class选择器

   E.classValue{…} :匹配所有lclass
属性值是idValue的E元素起作用,E元素可以省略

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
             .appClass
             {
                 background-color: blue;
             }
             div.divClass
             {
                 background-color: blue;
             }
    </style>
</head>
<body>
    <div>你好，世界</div>
    <div class="appClass">helloworld1</div>
    <div class="divClass">helloworld2</div>
    <span class="divClass">helloworld3</span>


</body>
</html>
1.5 包含选择器

   Selector1 Selector2{…} 指定的class样式对处在左侧选择器对应的元素内部的且匹配Selector2的子元素里面的所有后代元素都起作用。包含选择器也叫后代选择器。也即是右边的Selector2选择器对应的元素必须处于左边的Selector1选择器对应的元素内部，则指定的class样式才对Selector2的子元素里面的所有后代元素起作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
             div .divClass
             {
                 background-color: blue;
             }
    </style>
</head>
<body>
    <div>你好，世界</div>

    <div>
        <div class="divClass">div子代
        </div>
    </div>
    <div>

        <span>
            <div class="divClass">div孙代                 
            </div>
        </span>
     
    </div>
    <div>
        <span>
            <sapn>
                <div class="divClass">div曾孙                 
                </div>
            </sapn>
        </span>
     
    </div>
</body>
</html>
1.6 子选择器

   Selector1 >Selector2{…} 指定的class样式对处在左侧选择器对应的元素内部的且匹配Selector2的子元素起作用，不包含其子元素。也即是右边的Selector2选择器对应的元素必须处于左边的Selector1选择器对应的元素内部，则指定的class样式才只对Selector2的元素起作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
             div > .divClass
             {
                 background-color: blue;
             }
    </style>
</head>
<body>
    <div>你好，世界</div>

    <div>
        <div class="divClass">div子代
        </div>
    </div>
    <div>

        <span>
            <div class="divClass">div孙代                 
            </div>
        </span>
     
    </div>
    <div>
        <span>
            <sapn>
                <div class="divClass">div曾孙                 
                </div>
            </sapn>
        </span>
     
    </div>
</body>
</html>
1.7 兄弟选择器

   1.7.1 Selector1 + Selector2{…} 指定的class样式，需要满足对左侧选择器对应的元素且是其相邻的，并且匹配右侧Selector2的元素，还要满足二者有相同的父元素，才会对左侧选择器对应的元素且匹配Selector2相邻元素起作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
             .divClass + div
             {
                 background-color: blue;
             }
    </style>
</head>
<body>
    <div class="divClass">你好，世界</div>
    <div >相邻兄弟</div>
    <div >隔壁兄弟</div>
</body>
</html>

   1.7.2 Selector1 ~ Selector2{…} 指定的class样式，需要满足对左侧选择器对应的元素且是其后面的所有兄弟结点，并且都匹配右侧Selector2的元素，还要满足二者有相同的父元素，才会对左侧选择器对应的元素后面的所有兄弟结点且匹配Selector2的元素起作用


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
             .divClass ~ div
             {
                 background-color: blue;
             }
    </style>
</head>
<body>
    <div class="divClass">你好，世界</div>
    <div >相邻兄弟</div>
    <div >隔壁兄弟1</div>
    <div >隔壁兄弟2</div>
</body>
</html>
1.8 选择器组合

   Selector1,Selector2…{…}指定的class样式多个选择器对应的元素起作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
             .divClass,div,#app
             {
                 background-color: blue;
             }
    </style>
</head>
<body>
    <div class="divClass">你好，世界1</div>
    <div >你好，世界2</div>
    <div id="app">你好，世界3</div>
    <p>你好，世界4</p>
</body>
</html>
1.9 伪元素选择器

   1.9.1 :first-letter: 该选择器对应的CSS样式对指定元素内的第一个字符起作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
            :first-letter{
                color: blue;
            }
    </style>
</head>
<body>
    <div class="divClass">你好，世界</div>
</body>
</html>

   1.9.2 :first-line: 该选择器对应的CSS样式对指定元素内的第一行内容起作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
            :first-line{
                color: blue;
            }
    </style>
</head>
<body>
    <div class="divClass">你好，世界</div>
</body>
</html>

   1.9.3 :before:该选择器与内容元素结合起来一起使用，用 于在指定对象内部的前端插入内容。 :after:该选择器与内容元素结合起来一起使用，用于在指定对象内部的尾部插入内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
            .divClass:before{
                content:'你好,';
            }
            .divClass:after{
                content:url(小可爱以泽.JPG);
            }
    </style>
</head>
<body>
    <div class="divClass">世界</div>
</body>
</html>

   1.9.4 content:该属性值可以是字符串、url(url)、attr(alt)、counter(name)、counter(name,list-style-type)、open-quote、close-quote等格式。该属性用于向指定元素之前或之后插入插入指定内容

     1.9.4.1 counter属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    
            .divClass{
                counter-increment: mycounter;
            }
            /* counter-increment是一个函数，属性设置某个选取器每次出现的计数器增量。默认增量是 1。 */
            .divClass:before{
                content:counter(mycounter) '.';
            }
    </style>
</head>
<body>
    <div class="divClass">java</div>
    <div class="divClass">css</div>
    <div class="divClass">js</div>
</body>
</html>
2.0 新增的伪元素选择器

   2.0.1 结构性伪类元素:
    2.0.1.1 Selector:root 匹配文档根元素。在html文档中，根元素永远是<html…/>元素。
    2.0.1.2 Selector:first-child 匹配符合Selector选择器，而且必须是其父元素的第一个子节点元素
    2.0.1.3 Selector:last-child 匹配符合Selector选择器，而且必须是其父元素的最后一个子节点元素
    2.0.1.4 Selector:nth-child(n) 匹配符合Selector选择器，而且必须是其父元素的第n个元素
    2.0.1.5 Selector:nth-last-child(n) 匹配符合Selector选择器，而且必须是其父元素的倒数第n个元素
    2.0.1.6 Selector:only-child 匹配符合Selector选择器，而且必须是其父元素的唯一一个子元素
    2.0.1.7 Selector:first-of-type 匹配符合Selector选择器，而且是与它同类型、同级兄弟元素的第一个元素
    2.0.1.8 Selector:last-of-type 匹配符合Selector选择器，而且是与它同类型、同级兄弟元素的最后一个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style type="text/css">
             :root{
                 background-color: blue;
             }
             li:first-child
             {
                background-color: red;
             }
             li:last-child
             {
                background-color: green;
             }
             li:nth-child(2)
             {
                background-color: coral;
             }
             li:nth-last-child(2)
             {
                background-color: yellow;
             }
             li:first-of-type{
                background-color: white;
             }
             li:last-of-type{
                background-color: black;
             }
    </style>
    <div>
        你好，世界！
    </div>
    <div>
        <ul>
            <li>
                 11111
            </li>
            <li>
                2222
            </li>
            <li>
                333333
            </li>
            <li>
               4444444444
            </li>
            <li>
                5555555
             </li>
        </ul>
    </div>
</body>
</html>

   2.0.2 UI元素状态伪类元素:

    2.0.2.1 Selector🔗 匹配Selector选择器且未被访问前的元素(通常只能是超链接)
    2.0.2.2 Selector:visited: 匹配Selector选择器且已被访问过的元素(通常只能是超链接)
    2.0.2.3 Selector:active: 匹配Selector选择器且处于被用户激活(在鼠标点击与释放之间)状态的元素
    2.0.2.4 Selector:hover: 匹配Selector选择器且处于鼠标悬停状态的元素
    2.0.2.5 Selector:focus: 匹配Selector选择器且已得到焦点的元素
    2.0.2.6 Selector:enabled: 匹配Selector选择器且当前处于可用的元素
    2.0.2.7Selector:disabled: 匹配Selector选择器且当前处于不可用的状态元素
    2.0.2.8 Selector:checked: 匹配Selector选择器且当前处于选中状态的元素
    2.0.2.9 Selector:default: 匹配Selector选择器且页面打开时处于选中状态
    2.0.2.10 Selector:read-only: 匹配Selector选择器且处于只读状态
    2.0.2.11 Selector:read-write: 匹配Selector选择器且处于只写状态
    2.0.2.12 Selector:selection: 匹配Selector选择器元素中且当前被选中的内容

闲人不梦卿
关注
专栏目录
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
12-02
对此，我把CSS3标准中nth-child()用法大致介绍下： CSS3伪类选择器：nth-child() 简单的归纳下nth-child()的几种用法。 第一：nth-child(number) 直接匹配第number个元素。参数number必须为大于0的整数。(EG) li:nth...
CSS属性简写和选择器的优先级问题
01-19
具有简短写法的 CSS 属性很多，但是常用的属性无外乎字体、列表、背景、边框、透明等几种，所以在此对这几种属性的简短写法做个归纳，备忘。font 属性 font 属性涉及到字体、字号、行高等好几个属性，使用简短写法的...
HTML学习笔记 （三）
勤劳的小蜜蜂
08-02 474
1、css 选择器 1.1、元素选择器 E{…}/*E代表有效的HTML元素 可以用“*”代表元素名 可匹配html文档中任意元素（匹配所有） 例子： *{ . . } div{ } 1.2、属性选择器 E｛…｝：对所有E元素起作用 E｛attr｝：对于具有attr属性得E元素起作用 E｛attr=value｝：对包含attr属性且值为value得E元素起作用 E｛attr~=value...
CSS选择器
majic_Jing的博客
09-26 241
CSS的选择器有很多种，现在罗列一下： ①元素选择器；②属性选择器；③ID选择器；④class选择器；⑤包含选择器；⑥兄弟选择器；⑦子选择器；⑧选择器组合。 下面对每个详细的解释一下： （1）元素选择器： 元素选择器是最简单、最常用的选择器。语法格式如下： E{...}/*其中E代表有效的HTML元素名*/ 其实E可以是任意有效的HTML元素名，也可用“*”来代替，...
CSS3的基础知识
RenJi0316的博客
08-29 222
关于CSS3的一些基础知识: 一.UI元素状态选择器:1.E:checked(被选中状态)当鼠标在浏览器中点中某项时,则触发某一个li的值2.E:enabled(可用状态)用于输入文本的控件3.E:selection(被选中时的状态)程序运行后,在浏览器中,用鼠标选中某一东西时所触发的状态(这个状态可用设置背...
css选择器
_valora的博客
05-04 353
CSS 的作用是：1）修饰HTML元素；2）选择器：将样式进行合理的管理。于是乎进一步提供了一种将样式文件独立出来的技术，就是从HTML文件中将样式修饰内容独立成一个文本文件，那么在需要的HTML文件中就可以反复将这个样式文件引入。 CSS 文件的创建 CSS 文件就是一种普通的文本文件，其文件名称标准情况下是以.css作为后缀名结尾的。CSS文件的内容就是style标签中所书写的内容。 CSS 文件的引入，需要使用Link标签。 <link rel=”stylesheet” type=”text/cs
CSS学习归纳2的综合案例
04-01
1. **选择器**：如类选择器（`.class`）、ID选择器（`#id`）、元素选择器（`element`）、后代选择器（`selector1 selector2`）、子元素选择器（`selector1 > selector2`）等，用于指定要应用样式的元素。 2. **盒...
CSS3知识点归纳
07-26
以上内容是对CSS3知识点的一个全面梳理，涉及了文字样式、文本装饰、选择器、背景、边框、盒子模型、网页布局、过渡与动画等多个方面，旨在帮助读者更好地理解和掌握CSS3的核心概念和技术要点。
Css知识点归纳总结.doc
03-29
Css的基本格式是选择器{属性：值;}，其中选择器是指要应用样式的HTML元素，属性是指要设置的样式属性，值是指设置的样式值。例如：p{color:red;}，其中p是选择器，color是属性，red是值。 派生选择器 派生选择器是...
CSS复习
Sunset_Sunshine的博客
04-12 294
第九章:CSS3基础 css的历史 CSS的发展得很好 初用CSS css的语法单元是样式 每个样式包含两部分内容：选择器和声明（规则） 引入CSS样式 有三种方法 第一种：行内样式（css样式置于标签的style属性中） 第二种：内部样式（css样式代码置于 css 注释 /* 注释内容 */ css属性众多 css2.1版本有115个属性 css3 新增20多个属性 css属性值 绝对值（in cm mm pt pc 用的较少） 相对值：em（能根据font-size的值来确定 如果fon
【web初步】CSS选择器
lzx's blog
03-25 242
元素选择器 标签选择器 标签选择器也称为类型选择器，它直接引用HTML标签名称，用来匹配同名的所有标签。 优点：使用简单，直接引用，不需要为标签添加属性。 缺点：匹配的范围过大，精度不够。 一般常用标签选择器重置各个标签的默认样式。 p{ font-size:12px; color:red; } 类选择器 类选择器以点号（.）为前缀，后面是一个类名。 在标签中定义class属...
CSS3学习笔记 之 属性选择器
@LeX
09-01 571
属性选择器可以给予元素的属性来匹配元素，CSS3还支持基于模式匹配来定位元素，属性选择器语法如下： 选择器 功能描述 E[attr] 选择匹配具有属性attr的E元素。其中E可以省略，表示选择定义了attr属性的任意类型元素 E[attr=value] 选择匹配具有属性attr的E元素，并且attr的属性值为val（其中val区分大小写），同样E
CSS系列之高级选择器/层次选择器/结构伪类选择器/属性选择器
DOGIOOH的博客
06-19 3165
CSS系列之高级选择器 01 层次选择器 a. 后代选择器 格式： E F { 声明；} 应用：获取E元素下所有与F匹配的元素 b. 子选择器 格式：E>F{声明；} 应用：只获取E下面的与F匹配的第一层子元素 c.相邻兄弟选择器 格式：E+F{声明；} 应用： 前提：用id或class定位到一个元素E 功能：获取指定元素E的相邻兄弟的与F匹配的元素 ，只找下面的兄弟，上面的不...
css3选择器
weixin_42666092的博客
03-12 118
1.伪类选择器 是为元素添加特殊的选择器 hover可以在标准浏览器（ie8及以上）应用在所有选择器上使用 不加前缀的时候，可以链接到所有； :link :hover :active :visited :focus 为获取焦点的input设置样式（border,bg)，disabled :disabled 为禁用的input元素设置样式 :target 目标伪类选择器，只有跳转到该元素的时候才可以显示它设置的样式（跳转后需要重新打开，刷新不可以） :root 获取html :empty
《精彩绝伦的CSS》——选择器（五）多种选择方式
luoluolun的博客
04-16 366
五、多种选择方式  1、元素类型选择器  2、类选择器  3、id选择器  4、通用选择器（*）——匹配文档中所有元素  个人经常喜欢用该选择器做一下简单的兼容如：  *{  margin:0;  padding:0;    }  但建议还是用一些规范的兼容设置，如：  html, body, div, span, applet, object, iframe,  h1,
5116-微信小程序电影院订票选座系统设计及实现+ssm（源码+数据库+lun文）.zip
最新发布
09-15
本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。
JavaScript 中的 `Array.prototype.filter` 方法全解析
09-15
在 JavaScript 编程中，处理数组是一项基本而重要的任务。数组的过滤操作是其中的一个常见需求，Array.prototype.filter 方法为此提供了强大的支持。本文将深入探讨 Array.prototype.filter 方法的工作原理、使用场景、代码示例以及与其他数组方法的比较。 Array.prototype.filter 是 JavaScript 中处理数组的强大工具，它允许开发者以声明式的方式轻松筛选出符合特定条件的元素。通过结合使用 Array.prototype.filter 和其他数组方法，可以解决各种复杂的数据筛选问题。 通过本文的详细介绍和示例代码，你应该能够掌握 Array.prototype.filter 的工作原理，并能够在实际开发中灵活运用它来处理数组数据。此外，了解其与 Array.prototype.map 和 Array.prototype.reduce 的结合使用，可以帮助你更好地编写高效且易于维护的代码。
jQuery核心知识点归纳与选择器详解
- 类似地，有`prev()`, `prevAll()`, `siblings()` 和导航选择器`preUntil()`和`nextUntil()`，用于上一个元素、所有同级兄弟元素及指定条件下的导航。 5. **属性选择器**： - `$('a[title]')`：选择具有`title`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值