美文网首页
CSS选择器详解

CSS选择器详解

作者: 突然自我 | 来源:发表于2016-09-01 16:29 被阅读81次

选择器是css学习中非常重要的概念,今天和大家分享的就是css选择器的使用,一起来看看吧。

HTML标记定义

<p>...</p>

p { 属性:属性值 ;属性1:属性值1 }
p可以叫做选择器,定义那个标记中的内容执行其中的样式
一个选择器可以控制若干个样式属性,他们之间需要用英语的“;”隔开,最后一个可以不应加“;”

Class定义

<p>...</p>

class定义是以“.”开始
.p { 属性:属性值 ;属性1:属性值1 }

ID定义

<p id="p">...</p>

ID定义是“#”开始的
#p { 属性:属性值 ;属性1:属性值1 }

优先级问题

1.ID>Class>HTML
2.同级时选择离元素最近的一个的
#p { color: red }
#p { color: #f60 }
执行颜色为#f60的

组合选择器(同时控制多个元素)

h1,h2,h3 { font-size: 14px; color: red; }
选择器组合可以使用“,”隔开

伪元素选择器

1.a:link
正常连接的样式
2.a:hover
鼠标放上去的样式
3.a:active
选择链接时的样式
4.a:visited
已经访问过的链接的样式

文章来源:麦子学院
原文链接:http://www.maiziedu.com/wiki/css/selector/

相关文章

  • 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/shthettx.html