选择器


CSS 元素选择器/类型选择器

最常见的 CSS 选择器是元素选择器。
html {color:black;}
p {color:gray;}
h2 {color:silver;}
分组:
body, h2, p, table, th, td, pre, strong, em {color:gray;}

CSS 类选择器

提示:只有适当地标记文档后,才能使用这些选择器,所以使用这两种选择器通常需要先做一些构想和计划。
要应用样式而不考虑具体设计的元素,最常用的方法就是使用类选择器。
.important {color:red;}
p.important {color:red;}
h1.important {color:blue;}
分组
.important.warning {background:silver;}

ID选择器

1 唯一
2 不能结合使用
3 包含更多含义
#intro {font-weight:bold;}

后代选择器

h1 em {color:red;}
div.sidebar {background:blue;}

** 子元素选择器**

如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
h1 > strong {color:red;}
这个规则会把第一个 h1 下面的两个 strong 元素变为红色,但是第二个 h1 中的 strong 不受影响:

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

推荐阅读更多精彩内容

  • 1.CSS 元素选择器 最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。如果设置 H...
    饥人谷_小侯阅读 4,338评论 0 1
  • Part 1 :盒模型(box model) "every element in web design is a ...
    野味狼果阅读 4,138评论 1 11
  • 一、元素选择器 文档元素为最基本的选择器示例: 二、id选择器 id 选择器可以为标有特定 id 的 HTML 元...
    heheheyuanqing阅读 4,037评论 0 0
  • 1.4.2.1简单选择器 选择器 简单选择器 伪元素选择器 组合选择器 标签选择器 类选择器 .classname...
    每日活菌阅读 2,773评论 0 0
  • 作为前端和后台最基础可靠的神器工具JQuery,你真的对她有足够了解么? 亚非拉地区苦逼的前端er们,有时候不得不...
    扭了个妞阅读 2,900评论 0 0