CSS选择器详解

选择器是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/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 选择器的种类有很多,可以到 w3cschool 去看看了解一下。也可以在 慕课网 中实践一下。 一、上下文选择器 ...
    天承本草2020阅读 4,320评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,073评论 19 139
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,693评论 1 92
  • UIMenuController须知 默认情况下, 有以下控件已经支持UIMenuControllerUIText...
    Barry_小闪阅读 3,462评论 0 1
  • 背景 智能规划求解器需要有动作模型和PDDL作为输入,然而从头构建动作模型是十分困难的,于是提出ARMS算法可以从...
    Tmac1860阅读 2,981评论 0 0

友情链接更多精彩内容