美文网首页前端开发
css选择器详解

css选择器详解

作者: 李轻舟 | 来源:发表于2019-02-02 11:13 被阅读24次

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 ;

优先级算法如何计算?

*  优先级就近原则,样式定义最近者为准;

*  载入样式以最后载入的定位为准;

优先级为:

!important >  id > class > tag 

important 比 内联优先级高

CSS3新增伪类有那些?

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

p: only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

p: only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。

p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。

:enabled、:disabled 控制表单控件的禁用状态。

:checked,单选框或复选框被选中。

相关文章

  • CSS选择器

    CSS 元素选择器CSS 选择器分组CSS 类选择器详解CSS ID 选择器详解CSS 属性选择器详解CSS 后代...

  • CSS选择器

    元素选择器 类选择器详解 ID选择器详解 属性选择器详解 后代选择器 子元素选择器 相邻兄弟选择器 CSS派生选择器:

  • web前端基础案例-鼠标悬停图文切换效果

    效果知识点: html/css布局思维,定位,浮动详解,css3动画详解,css3选择器详解, 通用样式与封装,企...

  • CSS3属性选择器

    CSS3中属性选着器增加了3个 结构性伪类选择器 CSS3结构性伪类选择器 CSS3选择器详解二 第二部分小节 、...

  • CSS选择器

    目录: CSS派生选择器 CSS元素选择器 CSS Id 和 Class选择器 CSS 属性选择器 CSS 派生选...

  • css选择器

    css选择器】 1.css属性选择器 2.css伪类选择器 3.css层次选择器

  • CSS 选择器

    CSS 选择器 CSS 基本选择器及其扩展 CSS 基本选择器 通配符选择器 * 元素选择器 使用标签的名称...

  • Sublime 学习web的css

    html + css + js css引用 css外部样式 css优先级 css的选择器 标签选择器 类选择器 i...

  • css flex布局详解

    css flex布局详解 css flex布局详解1css flex布局详解2

  • CSS选择器

    CSS选择器的作用 CSS 选择器用于定位我们想要给予样式的 HTML 元素。 CSS选择器的类型 CSS选择器大...

网友评论

    本文标题:css选择器详解

    本文链接:https://www.haomeiwen.com/subject/jllssqtx.html