css选择器有哪些?哪些属性可以继承?优先级算法如何计算?新增的伪类有哪些?

一,css选择器:

  1.id选择器( # myid)

  2.类选择器(.myclassname)

  3.标签选择器(div, h1, p)

  4.相邻选择器(h1 + p)

  5.子选择器(ul > li)

  6.后代选择器(li a)

  7.通配符选择器( * )

  8.属性选择器(a[rel = "external"])

  9.伪类选择器(a:hover, li:nth-child)

二,继承问题:

  * 可继承的样式: font-size font-family color, UL LI DL DD DT;

  * 不可继承的样式:border padding margin width height ;

三,优先级算法计算的问题:

在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级。
选择符Specificity值列表:规则:
1. 行内样式优先级Specificity值为1,0,0,0,高于外部定义。
如:<div style=”color: red”>sjweb</div>
外部定义指经由<link>或<style>标签定义的规则;
2.!important声明的Specificity值最高;
3.Specificity值一样的情况下,按CSS代码中出现的顺序决定,后者CSS样式居上;
4.由继续而得到的样式没有specificity的计算,它低于一切其他规则(比如全局选择符*定义的规则)。
算法:当遇到多个选择符同时出现时候
按选择符得到的Specificity值逐位相加,
{数位之间没有进制 比如说: 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0}
就得到最终计算得的specificity,
然后在比较取舍时按照从左到右的顺序逐位比较。

四,新增的伪类有哪些:
伪类及伪对象选择符:伪类
伪元素

原文地址:https://www.cnblogs.com/ninghu996926/p/11582788.html

时间: 2024-10-23 07:23:21

css选择器有哪些?哪些属性可以继承?优先级算法如何计算?新增的伪类有哪些?的相关文章

css选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先

通配选择器*{ sRules } 类型选择符E { sRules }  td { font-size:14px; width:120px; }   属性选择符 E [ attr ] { sRules } E [ attr = value ] { sRules } E [ attr ~= value ] { sRules } E [ attr |= value ] { sRules }  h[title] { color: blue; } 子对象选择符E1 > E2 { sRules } div

CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?

1.CSS选择符有哪些? 类型选择符(body).群组选择符(h1,h2,h3,span).包含选择符(h2 span).ID选择符(#id).Class选择符(.content) 2.哪些属性可以继承? CLASS属性,伪类A标签,列表ul.li.dl.dd.dt可以继承 3.优先级算法如何计算? 优先级就近原则 版权声明:本文为博主原创文章,未经博主允许不得转载.

CSS3新增的伪类选择器

:first-of-type p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素. :last-of-type p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素.:only-of-type p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素.:only-child p:only-child 选择属于其父元素的唯一子元素的每个

第二天(CSS 选择器)

1.常用的CSS选择器 类型选择器: 例如: p { color : red ; } 后代选择器: 例如: h2 span { font-weight : bold ; } 类选择器:     例如 : . content { width : 200px ; } ID选择器:     例如: #nav { height : 40px ; } 应用时,应注意html的结构,使结构合理,综合运用以上的选择器.防治页面中多 class 或者是 id 2.伪类 例如: a : hover { color

CSS选择器详细总结

一.基本选择器 序号 选择器 含义 1. * 通用元素选择器,匹配任何元素 2. E 标签选择器,匹配所有使用E标签的元素 3. .info class选择器,匹配所有class属性中包含info的元素 4. #footer id选择器,匹配所有id属性等于footer的元素 实例: * { margin:0; padding:0; } p { font-size:2em; } .info { background:#ff0; } p.info { background:#ff0; } p.in

【前端学习】【CSS选择器】

CSS选择器 CSS选择器 CSS(Cascading Style Sheets)是一项出色的技术,它使得网页的结构和表现样式完全分离.利用CSS选择器能轻松地对某个元素添加样式而不改动HTML(HyperText Markup Language)结构. 要使某个样式应用于特定的HTML元素,首先需要找到该元素.在CSS中,执行这一任务的表现规则称为CSS选择器1. CSS选择器 1 基本选择器 2 层次选择器 3 伪类选择器 3.1 动态伪类选择器 3.2 目标伪类选择器 3.3 语言伪类选择

30类css选择器

大概大家都知道id,class以及descendant选择器,并且整体都在使用它们,那么你正在错误拥有更大级别的灵活性的选择方式.这篇文章里面提到的大部分选择器都是在CSS3标准下的,所以它们只能在相应最新版本的浏览器中才能生效,你完全应该把这些都记在你聪明的脑袋里面. 1. * 1 2 3 4 * {   margin: 0;   padding: 0; } 在我们看比较高级的选择器之前,应该认识下这个众所周知的清空选择器.星号呢会将页面上所有每一个元素都选到.许多开发者都用它来清空margi

CSS选择器知识梳理

<一>CSS选择器结构逻辑图 温馨提示:各位小伙伴,可以把逻辑图下载下来放大,看的比较清除,也可以给我留言,我分享原百度脑图给各位小伙伴. <二>接下来按照结构逻辑图具体讲解各个选择器的作用及用法: **基本选择器(常用) 基本选择器主要有以下5类: * : 通配选择器:匹配html中的所有Html元素: E : 元素选择器:选中html中指定的某一类Html元素,如 h1 将选中所有的"h1"元素: #id : ID选择器:选中html中id属性为特定值的所有

这30类CSS选择器,你必须记在脑袋里!

大概大家都知道`id`,`class`以及`descendant`选择器,并且整体都在使用它们,那么你正在错误拥有更大级别的灵活性的选择方式.这篇文章里面提到的大部分选择器都是在CSS3标准下的,所以它们只能在相应最新版本的浏览器中才能生效,你完全应该把这些都记在你聪明的脑袋里面. 1. * ? 1 2 3 4 * {   margin: 0;   padding: 0; } 在我们看比较高级的选择器之前,应该认识下这个众所周知的清空选择器.星号呢会将页面上所有每一个元素都选到.许多开发者都用它