CSS学习总结(一)

引言:
这是我自学HTML+CSS+JS当中的关于CSS的文章,主要是为了自我学习和提升,如有不妥之处,欢迎指出。
CSS选择器:
类选择器:
【.class {color:red;}】
【.class.class {background:silver;}】
【p.class {color:red;}】
ID选择器:
【#id {color:red;}】
属性选择器:
[title {color:red;}]】
【a[href] {color:red;}】
【a[href][title] {color:red;}】
【p[class="important warning"] {color:red;}】
【img[title~="Figure"] {color:red;}】选择title文本包含"Figure"的所有图像,没有title属性或title属性中不包含"Figure"的图像都不匹配。
【abc^="def"】 选择 abc 属性值以 "def" 开头的所有元素
【abc$="def"】 选择 abc 属性值以 "def" 结尾的所有元素
【abc
="def"】 选择 abc 属性值中包含子串 "def" 的所有元素
【*[lang|="en"] {color: red;}】会选择 lang 属性等于 en 或以 en- 开头的所有元素
后代选择器(包含选择器):
【h1 em {color:red;}】把作为 h1 元素后代的 em 元素的文本变为 红色
子元素选择器:
【h1 > strong {color:red;}】把h1下面第一层的strong元素文本变为红色
【table.company td > p】(结合后代选择器和子选择器)选择作为 td 元素子元素的所有 p 元素,这个 td 元素本身从 table 元素继承,该 table 元素有一个包含 company 的 class 属性。
相邻兄弟选择器:
【h1 + p {margin-top:50px;}】选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素
【li + li {font-weight:bold;}】只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响,因为用一个结合符只能选择两个相邻兄弟中的第二个元素。
伪类
伪元素

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.CSS 元素选择器 最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。如果设置 H...
    饥人谷_小侯阅读 4,342评论 0 1
  • 2/27/2017 12:45:49 PM 使用HTML5的网站布局(多列布局) 定义文档或节的页眉 定义导航链接...
    _Dot912阅读 3,499评论 0 1
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,704评论 32 459
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 4,724评论 0 1
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,645评论 19 139