CSS选择器及其优先级

xorpay 发布于2019-08-30 14:15 / 3422人阅读

摘要：基本选择器标签选择器标签选择器又叫元素选择器，换句话说，文档的元素就是最基本的选择器，使用元素名称直接选择元素即可如。

基本选择器 标签选择器

标签选择器又叫元素选择器，换句话说，文档的元素就是最基本的选择器，使用元素名称直接选择元素即可（如body,p,ul,ol,dl）。

类选择器

类选择以点"."开头，后面紧跟一个类名。类名不允许有空格，与元素中class属性的值保持一致。一个元素可以有多个class的值，每个值通过空格分割开。类名相同的元素属于一类元素。

 
    
       Creat an HTML document
       Creat a CSS style sheet
       Link them all together

ID选择器

ID选择器以"#"开头，后面紧跟一个ID名，在一个文档中，ID值不能重复，因此在选择文档中唯一元素的时候该选择器比较有用。

— "Good morning."

— "Go away!"

普遍选择器

使用"*"来表示普遍选择器，表示选择所有元素，通常用在组合选择器中。

多选择器

多个选择器并列使用，使用“,”分割
例如："div,.one,#tt" 表示选择div元素，class为one的元素以及id为tt的元素。

层次选择器 后代选择器

使用 “ ” 隔开两个选择器。例如 "ul li"表示选择ul的后代元素li，li可以为ul的直接子元素，也可以为ul的孙子元素。

子代选择器

使用 “>” 隔开两个选择器。例如 "ul>li"表示选择ul的直接子代元素li,ul的孙子元素li无法被选择到

相邻同胞元素

使用 “+” 隔开两个选择器。例如 ".one+*"表示选择class为"one"元素的下一个兄弟元素。

一般同胞选择器

使用 “~” 隔开两个选择器。例如 ".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
......

伪元素选择器

伪元素以"::"开头，用在选择器后，用于选择指定的元素。
::after
::before
::first-letter
::first-line
::selection

...... 选择器优先级

在所有的选择器中某个选择器定义的规则是否能够胜出（即优先级）取决于三个元素：Importance，特性值，代码顺序。

!important声明(Importance)

在css规则的值末尾添加"!important"能够保证该规则优先其他规则。但是一般建议不使用"!important",因为它会改变级联的工作方式，使得调试变得困难。

特性值

通过4个特性值来量化一个选择器

声明在元素的style属性中。特性值记为1000

包含在一个选择器中的所有ID选择器。特性值记为100

包含在一个选择器中的所有类选择器，属性选择器，伪类选择器。属性值记为10

包含在一个选择器中的所有元素选择器，伪元素选择器.属性值记为1

代码顺序

如果多个竞争选择器具有相同的重要性和特性值，代码顺序就发挥作用了，后来规则优先前面规则。

GPU云服务器云服务器 css选择器基础选择器css 优先选择 css选择

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115885.html

CSS优先级的及其衡量标准CSS权重

摘要：优先级是由权重来作为衡量标准的，权重的计算有一套计算公式，有如下规范使用一个位数的字串来表示级别，从左到右，左边的做大，往右依次递减，且数位之间没有进制，级别之间不可逾越。定义了一个命令，该命令被赋予最大的优先级。一、背景 CSS有三大特性：层叠性、继承性、优先级。而我们在给CSS定义样式的时候，经常出现两个及以上的规则应用在同一元素上，单该元素最终在浏览器呈现的效果是应用的哪个规则呢？这...

ky0ncheng 2019-04-23 13:28 评论0 收藏0
前端面试笔记 - css

摘要：是页面渲染的一部分。一个就是一个整体，所有子元素都会在里面渲染，而不会影响外面的元素。常见为，根元素，，元素，或者设置了的元素列举不同的清除浮动的技巧，并指出它们各自适用的使用场景。是一个把众多小图片打包成一个大图以减少请求。 CSS 中类 (classes) 和 ID 的区别。 id唯一，class可以多个请问 resetting 和 normalizing CSS 之间的区别？你...

loonggg 2019-08-23 14:50 评论0 收藏0
你对CSS权重真的足够了解吗？

摘要：如果两个权重不同的选择器作用在同一元素上，权重值高的规则生效选择器可能会包含一个或者多个与权重相关的计算点，若经过权重值计算得到的权重值越大，则认为这个选择器的权重高。前言 css权重很多人都听过，也了解一些，但是很多人对具体的规则或者说再深如一些关于css权重的问题，可能会不那么清楚。日常开发中，或多或少都会遇到css规则不生效的问题，为了让我们能够减少调试css规则的时间，深刻理...

xioqua 2019-08-29 15:27 评论0 收藏0
前端面试之Css篇

摘要：替换元素是指用作为其他内容占位符的一个元素。浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。折叠的结果两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。两个外边距一正一负时，折叠结果是两者的相加的和。 1 . CSS 属性是否区分大小写？答：不区分。 HTML，CSS都对大小写不敏感，但为了更好的可读性和团队协作一般都小写，而在XHTML 中元素名称和...

leejan97 2019-08-29 12:42 评论0 收藏0
JavaScript 是如何工作: Shadow DOM 的内部结构+如何编写独立的组件！

摘要：向影子树添加的任何内容都将成为宿主元素的本地元素，包括，这就是影子实现样式作用域的方式。这是专门探索 JavaScript 及其所构建的组件的系列文章的第 17 篇。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！如果你错过了前面的章节，可以在这里找到它们： JavaScript 是如何工作的：引擎，运行时和调用堆栈的概述！ JavaScript 是如何工作...

godlong_X 2019-08-26 13:29 评论0 收藏0