一、常用的四类选择器（基本）

1、元素选择器

2、id选择器

3、类选择器

4、通配选择器

二、复合选择器（两种）

1、交集选择器

2、并集选择器

三、关系选择器

父子关系：父元素直接包含子元素，子元素直接被父元素包含

祖先后代关系：祖先元素直接或间接包含后代元素

兄弟关系：拥有同一个父元素

四、属性选择器

五、伪类选择器

1.常用的伪类

2、否定伪类

3、元素的伪类

六、伪元素选择器

一、常用的四类选择器（基本）

1、元素选择器

作用：选中对应元素/标签里面的内容

语法：标签名{}

2、id选择器

作用：选中对应id属性值的元素

语法：#id属性值{}

3、类选择器

作用：选中对应class属性值的元素

语法：.class属性值{}

4、通配选择器

作用：选中页面中所有元素

语法：*{}

二、复合选择器（两种）

1、交集选择器

作用：选中同时符合多个选择器条件的元素

语法：选择器1选择器2...{}

注意：如果选择器中有元素的选择器，元素选择器必须放在前面

2、并集选择器

作用：同时选中对应选择器的元素

语法：选择器1，选择器2，选择器3...{}

三、关系选择器

父子关系：父元素直接包含子元素，子元素直接被父元素包含

<div><p></p></div>

div标签是p标签的父元素，p标签是div标签的子元素

祖先后代关系：祖先元素直接或间接包含后代元素

<div><p><span></span></p></div>

div标签是p标签和span标签的祖先元素，p标签和span标签是div标签的后代元素

兄弟关系：拥有同一个父元素

<div><p></p><h1></h1></div>

p标签和h1标签就是兄弟关系

四、属性选择器

[属性]	选中含有指定属性的元素
[属性=属性值]	选中含有指定属性和指定属性值的元素
[属性^=属性值]	选中含有指定属性和指定属性值开头的元素
[属性$=属性值]	选中含有指定属性和指定属性值结尾的元素
[属性*=属性值]	选中指定属性名和含有指定属性值的元素

五、伪类选择器

伪类：不存在的类，表示元素的一种状态

1.常用的伪类

:first-child 第一个子元素

:last-child 最后一个子元素

:nth-child() 选中第n个元素

关于:nth-child()的特殊值

n 第n个 n的范围0到正无穷（全选）

even或2n 选中偶数位的元素

odd或2n+1 选中奇数位得到元素

上面的都是在所有元素中选择

下面都是在相同元素中选择

:first-of-type 第一个子元素

:last-of-type 最后一个子元素

:nth-of-type() 选中第n个元素

2、否定伪类

:not() 将符号条件的元素去除

3、元素的伪类

:link       表示未访问过的a标签
:visited   表示访问过的a标签

以上两个伪类是超链接所独有的
由于隐私的问题，所以visited这个伪类只能修改链接的颜色

以下两个伪类是所有标签都可以使用
:hover 鼠标移入后元素的状态
:active       鼠标点击后，元素的状态

六、伪元素选择器

同伪类一样，伪元素也是不存在的元素，表示元素的特殊状态

常见的几个伪元素：

::first-letter 表示第一个字母

::first-line 表示第一行

::selection 表示选中的元素

::before 元素开始的位置前

::after 元素结束的位置后

befor和after必须配合contend一起使用(before,after所写的内容无法选中且永远在最前和最后)

CSS的选择器（超详细！！）相关推荐

CSS的选择器(超详细)
目录一.常用的选择器 1.元素选择器 2.类选择器(class选择器) 3.id选择器 4.通配符选择器二.群组选择器三.关系选择器 1.后代选择器 2.子代选择器 3.相邻兄弟选择器 4.通用 ...
CSS6大种选择器(超详细!!!!!!)
文章目录一.常用的css基本选择器(4种) 1.标签选择器 2.类选择器 3.id选择器区别: 4.通配符选择器二.复合选择器 (2种) 1.交集选择器 2.并集选择器三.属性选择器(5种) ...
一篇搞定css基础（超详细，附代码）
第一章:css概述 1.1.css的简介 1)什么是CSS css中文名称叫层叠样式表,层叠为css的布局,表示布局方式是通过一层层来实现的:样式是布局层的显示效果,主要是通过css提供的一些属性和属 ...
【前端CSS】CSS的选择器属性详细介绍
[一起来学CSS] 什么是css呢?就是一个层叠样式表,对一个元素层叠的套用.对同一个元素对象进行多方面的套用基本格式: 内部样式表使用style选择器,放在html的内部 <style&g ...
【CSS样式】—超详细+实践
CSS简介 css指层叠样式表(Cascading Style Sheets) CSS语法 css规则主要由两个主要部分构成,选择器以及一条或者多条的声明构成. 选择器通常是你需要增加样式的名字,而声 ...
一、css清除浮动方法学习笔记总结（超详细，简单易懂）
** css清除浮动方法学习笔记总结(超详细,简单易懂) ** 问题: 上图中,由于container(父级元素)未设置高度,其内部子元素设置了float浮动,导致与container同级(也就是co ...
保姆级教程 CSS 知识点梳理大全，超详细！！！
保姆级教程 CSS 知识点梳理大全,超详细!!! ✴️大家好,我是王同学,好久不见,趁着假期王同学把CSS 知识点梳理了一遍 ✴️如果对你有帮助就给我点个赞吧,这样我们就互不相欠了 ✴️星光不负赶路人 ...
超详细的纯CSS的照片墙特效
超详细的纯CSS的照片墙特效你好,欢迎来到Amy的第一篇博客呀~ 此博客纯属个人原创哦~ 前些天在公开课上讲过一个类似于拍立得的照片特效,然后在一个页面上放了多张就形成了一个照片墙,效果如下: 鼠标 ...
html+css+js适合前端小白的实战全解（超详细）——2048小游戏（三）
续上一小节,我们回到newgame()这个函数,我们之前只做了init()内函数,相当于一个初始化操作现在,我们需要再随机两个两个生成数字. 随机生成数字在这个游戏里会经常出现,用户移动一步,也会产 ...
html+css+js适合前端小白的实战全解（超详细）——2048小游戏（二）
续上一小节,我们可以发现每一个grid-cell上的数字初始时并不在格子里. 这些数字可以随着玩家的操作而移动我们可以想象:初始时每一个格子上的数为0,他们并不显示 ↓ 只有当grid-cell ...

CSS的选择器（超详细！！）

一、常用的四类选择器（基本）

1、元素选择器

2、id选择器

3、类选择器

4、通配选择器

二、复合选择器（两种）

1、交集选择器

2、并集选择器

三、关系选择器

父子关系：父元素直接包含子元素，子元素直接被父元素包含

祖先后代关系：祖先元素直接或间接包含后代元素

兄弟关系：拥有同一个父元素

四、属性选择器

五、伪类选择器

1.常用的伪类

2、否定伪类

3、元素的伪类

六、伪元素选择器

CSS的选择器（超详细！！）相关推荐

最新文章

热门文章