再读《精通css》02：选择器

2019独角兽企业重金招聘Python工程师标准>>>

1.2 为样式找到目标
1、类型选择器用来选择特定类型的原素。比如p，a，h1等等。也叫元素选择器或简单选择器。
2、后代选择器用来寻找特定元素或元素组的后代。后代选择器由两个选择器之间的空格表示。如li a或#nav #navItem.
3、id选择器和类选择器用于选择具有特定id和类名称的元素。id选择器以#开头，类选择器以.开头。
4、为了防止“多类症”，推荐对祖先元素定义一个id或class。后代元素用后代选择器选择。这就要求有良好的文档结构。
5、如果希望根据文档结构以外的其他条件来运用样式。可以使用伪类。：link和：visited称为链接伪类，只能用于锚元素。：hover、：active、：focus称为动态伪类。理论上可以用于所有元素。但实际上只有fireFox等少数浏览器支持动态伪类功能。
6、通用选择器用一个*表示。他可以匹配所有可用元素。通常用于覆盖浏览器默认样式，或者和后代选择器配合使用用于选择某个元素（组）的所有后代元素或跳过某一级后代元素。
7、其他高级选择器由于IE6不支持，不推荐使用。分别有：子元素选择器如：#nav>li、相邻同胞选择器如：h1+p、属性选择器如：a[title]
8、使用style属性在元素上编写的样式比其他任何形式的样式都特殊，有id选择器的规则比没有id选择器的规则特殊，具有类（classs）选择器的规则比只有类型选择器的规则特殊，如果多个选择器的特殊性相同。则写在最后面的最特殊。
9、可以在一般的元素上运用一般的样式，在特殊的元素上覆盖他们。
10、在body上运用class或id。可以在页面或者站点范围内覆盖样式，这种做法叫css签名。
11、继承：运用样式的元素的后代元素会继承样式中的某些属性，比如字号和颜色。继承可以简化css代码。但过多的继承会使判断元素的样式来源变得复杂。

转载于:https://my.oschina.net/laichendong/blog/283855

再读《精通css》02：选择器相关推荐

[转]《精通css》笔记1：css选择器与优先级
本文转自:http://www.cnblogs.com/webmoon/archive/2012/12/02/2798183.html css选择器一.基础选择器 css基础选择器有标签选择器.类选 ...
精通CSS：高级Web标准解决方案（中文电子书下载）
诶呀!~好不容易在网上找到了中文电子版的,但是已图片形式显示出来的文件又太大,整了半天都没整理出来,控件还不够了,这里上传了后面几章的内容下面给出目录,需要的朋友可以下载,博客园的个人空间也太小了 ...
CSS捡屎记 // Web开发之精通CSS
本文目录圆角盒子滑动门山顶角多重背景图片圆角边框下拉阴影盒阴影图片替换明日份牛粪本文首发于图灵教育微信本文作者:李松峰农谚:"种地不上粪,等于瞎胡混." 跟 ...
精通CSS高级Web标准解决方案（第2版）学习笔记
精通CSS 高级Web标准解决方案(第2版) 第一章基础知识一.设计代码格式 1.如果元素有恰当的含义,就应该尽量使用他们. h1,h2 ul,ol和dl strong和em abbr,acron ...
《精通CSS》第4章网页排版
<精通 CSS>往期陪读章节: 第 1 章基础知识第 2 章添加样式第 3 章可见格式化模型或许大家会觉得排版都是设计师的工作,前端开发按照已经排版好的设计稿复原就行.当然,这 ...
精通CSS高级WEB标准解决方案（第三版）笔记
精通CSS高级WEB标准解决方案(第三版)笔记 1 CSS选择符 1.1 类型选择符 1.2 ID选择符 1.3 类选择符 1.4 后代选择符 1.5 子选择符 1.6 相邻同辈选择符 1.6 一般同 ...
从零开始学前端：CSS复合选择器 --- 今天你学习了吗？（CSS：Day10）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS背景颜色 - 今天你学习了吗?(CSS:Day09) 文章目录从零开始学前端:程序猿小白也可以完全 ...
CSS中选择器优先级顺序实战讲解
原文:CSS中选择器优先级顺序实战讲解我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗? 如果你在开发中也 ...
html设置type选择器,css :first-of-type选择器实例讲解
css :first-of-type介绍 css :first-of-type选择器用于匹配父元素的第一个特定子元素. 语法: :first-of-type { style properties } ...
CSS基础（emmet 语法,CSS 复合选择器, 布局认知,背景样式）
CSS基础 1. emmet 语法 -- 开发效率 1.1 emmet 语法生成 html 标签 emmet 的特点和作用是什么? 通过简写提高编码效率. emmet 生成 HTML 结构语法序号 ...

再读《精通css》02：选择器

再读《精通css》02：选择器相关推荐

最新文章

热门文章