css选择器以及优先级问题

一时失言乱红尘 2022-12-28 04:05 140阅读 0赞

每日进步一小点-css

# 主题列表：css选择器相关问题 #

## 常用css选择器 ##

#### 1、通配符选择器 （\*）:一般不怎么使用; ####

#### 2、Id选择器 （id = “id-name”）:具有只能有一个，id-name不能一样 ####

#### 3、类选择器 （class = “class-name”）:可以有多个相同的class-name ####

#### 4、元素标签选择器 （span ， div等）:使用元素标签名称 ####

#### 5、后代选择器 ####

father child ;

father > child (父元素下面所有的子元素) ;

element + element(相邻兄弟选择器,紧接在element之后的element元素) ;

element1 ~ element2 (一般兄弟选择器,选择前面有element1的所有element2元素)

#### 6、伪类选择器 ####

:root(文档根伪类选择器) ;

:nth-child(n) : 孩子选择器，例如:nth-child(1) ;

nth-of-type(n): 同类型的第n个元素 ;

element:first-child : 父元素的第一个子元素 ;

element:last-child:父元素最后一个子元素 ;

a:link(未被访问的) ;

a:active(正在被点击的) ;

a:hover(鼠标位于其上的) ;

a:visited (已经被点击了的))

:focus(用于选取获得焦点的元素)

#### 7、伪元素选择器 ####

::before

::after

::first-line

::first-letter

#### 选择器优先级问题 ####

优先级问题： ！important > 行内样式 > id选择器 > 类，伪类选择器 > 元素，伪元素选择器 > 继承（有一些css样式是继承的：比如font-family那些之类的）> 通配符（\*）

优先级是由A,B,C,D来进行比较  
如果存在内联样式 A = 1 , 否则为0 ;

B的值就等于Id选择器出现的次数；

C的值等于类选择器，伪类选择器，属性选择器出现的次数

D的值就等于元素选择器，伪元素选择器出现的次数;

比较规则:谁大谁胜出 ； 如果一样，后面覆盖前面;

发表评论取消回复

表情：

评论列表（有 0 条评论，140人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS选择器及优先级

转自CSS优先级的计算公式：[http://wyz.67ge.com/css-selector-priority/][http_wyz.67ge.com_css-selecto

た入场券/ 2023年08月17日 17:20/ 0 赞/ 83 阅读

相关 CSS选择器优先级

<table> <thead> <tr> <th>选择器</th> <th>权重</th> </tr> </thead> <tbody>

短命女/ 2023年07月13日 13:45/ 0 赞/ 33 阅读

相关 CSS选择器优先级

先看图，基本上已经清楚了 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly

比眉伴天荒/ 2023年06月27日 06:21/ 0 赞/ 30 阅读

相关 css选择器以及优先级问题

每日进步一小点-css 主题列表：css选择器相关问题常用css选择器 1、通配符选择器（\）:一般不怎么使用; 2、Id选择器（id = “id-

一时失言乱红尘/ 2022年12月28日 04:05/ 0 赞/ 141 阅读

相关 CSS选择器相关以及CSS选择器的优先级

首先，当我们给css中的选择器设定样式后，有一些属性并没有起作用。通过FireBug查看发现一些属性被覆盖了。那么CSS的优先级是如何的呢？在CSS中，基本选择器诸如 id

偏执的太偏执、/ 2022年08月19日 02:18/ 0 赞/ 274 阅读

相关【CSS】——三大基础选择器以及优先级

前提　　小编最近在学习前端的一些内容，想要做出用户体验度高的界面，CSS是我们必须要学习的一门编程语言。何为CSS？ > 　　CSS（Cascading St

「爱情、让人受尽委屈。」/ 2022年07月24日 12:15/ 0 赞/ 320 阅读

相关 css选择器优先级

最初接触css选择器优先级这一块的内容的时候，是以下面这张图为准： ![css选择器优先级][css] ，按照上图进行计算，但是我昨天看了一篇文章发现这样算是错误的。文

约定不等于承诺〃/ 2022年05月15日 17:59/ 0 赞/ 325 阅读

相关 CSS选择器优先级比较

CSS选择器中比较常见的有标签选择器、ID选择器、类选择器以及子选择器。而事实上，CSS选择器如果细分下来，竟然多达40多种。那么当我们在碰到通过多种形式对同一个元素

爱被打了一巴掌/ 2022年05月09日 00:56/ 0 赞/ 285 阅读

相关 CSS选择器优先级详解

CSS选择器优先级详解选择器类型选择器优先级权重特殊情况动手试试选择器类型开发者在使用CSS进行网页开发时需要使用选择器来指定

约定不等于承诺〃/ 2022年03月30日 14:07/ 0 赞/ 425 阅读

相关 CSS选择器优先级

规则1： id选择器 > class选择器 > 标签选择器规则2：行内样式 > 内部样式 == 外部样式 > 注： > > 1. 选择器相同的情况下，离

野性酷女/ 2022年01月28日 22:41/ 0 赞/ 350 阅读