- 推荐
- 发现音乐
- 我的音乐
- 下载的音
这是一个网页
- one
- two
- three
- four
- five
摘要：相邻同胞选择器使用隔开两个选择器。例如表示选择为元素的所有兄弟元素。选择器的分类选择器元素属性简介以上就是我关于选择器的理解与运用，后续有任何补充或修改均会在此基础上添加，有任何问题欢迎指出，谢谢
CSS选择器和规则：
在css声明块前添加一个选择器，用来指明将css声明应用在哪些元素上。
如图所示：
标签选择器又叫元素选择器，换句话说，文档的元素就是最基本的选择器，使用元素名称直接选中元素即可。
演示代码：
标签选择器
你好，标签选择器！
类选择器
类选择以点"."开头，后面紧跟一个类名。类名不允许有空格，与元素中class属性的值保持一致。一个元素可以有多个class的值，每个值通过空格分割开。类名相同的元素属于一类元素。
演示代码：
类选择器
ID选择器以"#"开头，后面紧跟一个ID名，在一个文档中，ID值不能重复，因此在选择文档中唯一元素的时候该选择器比较有用。
演示代码：
ID选择器
— "Good morning."
— "Go away!"
普遍选择器
使用"*”来表示普遍选择器，表示选择所有元素，通常用在组合选择器中。
演示代码：
普遍选择器
- 推荐
- 发现音乐
- 我的音乐
- 下载的音
层次选择器
后代选择器（ descendant selector ）
使用 “ ” 隔开两个选择器。
例如 ：“ul li”表示选择ul的后代元素li，li可以为ul的直接子元素，也可以为ul的孙子元素。
子代选择器（child selector）
使用 “>” 隔开两个选择器。
例如："ul>li"表示选择ul的直接子代元素li,ul的孙子元素li无法被选择到。
相邻同胞选择器（adjacent sibling selector）
使用 “+” 隔开两个选择器。
例如：".one+*"表示选择class为"one"元素的下一个兄弟元素。
一般同胞选择器（ general sibling selector）
使用 “~” 隔开两个选择器。
例如：".one~*"表示选择class为"one"元素的所有兄弟元素。
演示代码：
层次选择器
属性选择器
[attr] 选择具有attr属性的元素、无论该属性的值为什么。
[attr=val] 选择具有attr属性的、并且attr的值为val元素。
[attr~=val] 选择具有attr属性的、并且attr的值之一为val的元素。
[attr^=val] 选择具有attr属性的、并且attr的值以val开头的元素。
[attr$=val] 选择具有attr属性的、并且attr的值以val结尾的元素。
[attr*=val] 选择具有attr属性的、并且attr的值包含val的元素。
演示代码：
属性选择器
伪类选择器
伪类以":"开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中。
表示子元素的
:only-child
:first-child
:last-child
:nth-child(n) 、: nth-last-child(n)
:first-of-type、:last-of-type 、
:nth-of-type(n)、:nth-last-of-type(n)
——n可以为元素的序号，也可以为特殊的字符，比如“odd”，“even
元素状态相关
:hover、 :active、 :focus
:enabled、 :disabled；:checked、 :default
:invalid、 :valid、 :required、 :optional、 :in-range 、:out-of-range
演示代码：
伪类选择器
伪元素以"::"开头，用在选择器后，用于选择指定的元素。
如：
::after
::before
::first-letter
::first-line
::selection
演示代码：
伪元素选择器
hello world
good morming
以上就是在CSS中常见的选择器，下面用两张图来总结和归纳。
CSS选择器的分类
CSS选择器元素/属性简介
以上就是我关于CSS选择器的理解与运用，后续有任何补充或修改均会在此基础上添加，有任何问题欢迎指出，谢谢！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115882.html
摘要：如果页面上的链接很多或者对跳转页面的协议有要求，使用属性选择器配合伪元素对链接的协议进行提示也不失为一种好方法。 CSS 属性选择器，可以通过已经存在的属性名或属性值匹配元素。 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展。本文将会比较全面的介绍属性选择器，尽可能的去挖掘这个选择器在不同场景下的不同用法。 简单的语法介绍 [attr]：该选择器选择包含 att...
摘要：最基本的选择器是元素选择器比如选择器比如还有类选择器比如。选择器和类选择器在速度上的差异基本上没有关系。现在我们回到讨论开始的地方，哪类选择器是最高效的哪个是会影响选择器效率的关键选择器写代码的时候，关键选择器是能否高效的决定因素。 高效的CSS已经不是一个新的话题了，也不是我一个非得重拾的话题，但它却是我在工作之时，所感兴趣的，关注已久的话题。 有很多人都忘记了，或在简单的说没有意识...
摘要：最基本的选择器是元素选择器比如选择器比如还有类选择器比如。选择器和类选择器在速度上的差异基本上没有关系。现在我们回到讨论开始的地方，哪类选择器是最高效的哪个是会影响选择器效率的关键选择器写代码的时候，关键选择器是能否高效的决定因素。 高效的CSS已经不是一个新的话题了，也不是我一个非得重拾的话题，但它却是我在工作之时，所感兴趣的，关注已久的话题。 有很多人都忘记了，或在简单的说没有意识...
摘要：一前言在中使用，包括内联式内嵌式链接式和导入式。链接式使用时需要在标记中使用标记，通过标记的相关属性指明外部文件的路径，以方便找到其中定义的样式并运用在当前网页元素上。导入式通过在标记的标记中使用方法导入相应的文件。 一、前言 在 HTML 中使用 CSS，包括内联式、内嵌式、链接式和导入式。 二、分类 2.1 内联式 内联式是所有样式应用方式中最为直接的一种，它通过对 HTML 标记...
摘要：一前言在中使用，包括内联式内嵌式链接式和导入式。链接式使用时需要在标记中使用标记，通过标记的相关属性指明外部文件的路径，以方便找到其中定义的样式并运用在当前网页元素上。导入式通过在标记的标记中使用方法导入相应的文件。 一、前言 在 HTML 中使用 CSS，包括内联式、内嵌式、链接式和导入式。 二、分类 2.1 内联式 内联式是所有样式应用方式中最为直接的一种，它通过对 HTML 标记...
阅读 3245·2023-04-25 17:35
阅读 2465·2021-11-24 09:39
阅读 2377·2021-10-18 13:32
阅读 3166·2021-10-11 10:58
阅读 1161·2021-09-26 09:55
阅读 5639·2021-09-22 15:47
阅读 780·2021-08-26 14:15
阅读 3286·2019-08-30 15:55
