《CSS权威指南》双鱼书详解——第二章选择器

为君一笑 提交于 2019-12-01 09:55:51

一、基本规则

CSS的核心特性就是能向文档中的一组元素类型应用某些规则。

二、规则结构

选择器+声明块。 h1{ color:red;background:yellow;} ,声明块由一个或多个声明组成。

三、元素选择器

文档的元素就是最基本的选择器,故叫元素选择器。

如果一个属性的值可以取多个关键字,关键字通常由空格分隔。

四、选择器分组

h1,h2,h3{CSS规则}

通配选择器 *{通配选择器}

对声明分组时,一定要在各个声明的最后使用分号。

类选择器和ID选择器   p.class{}  p#id{}

多类选择器:通常把两个类选择器连接在一起,仅可以选择同时包含这些类名的元素,类名的顺序不限。  class="urgent warning"; ID选择器不允许有以空格分隔的词列表。

属类选择器

h1[class]{color:silver;} 这种格式要求必须与属性值完全匹配。

子串匹配属性选择器  ^开头  $结尾  *包含

[foo^="bar"] 选择foo属性值以“bar”开头的所有元素。

[foo$="bar"]选择foo属性值以“bar”结尾的所有元素。

[foo*="bar"]选择foo属性值包含子串“bar”的所有元素。

[att|="val"] 选择att属性值等于val或者以val开头的所有元素。

使用文档结构

理解父子关系。

后台选择器   h1 em{color:gray;}

选择子元素 p>em{ }

相邻兄弟选择器  h1+p{  }

伪类和伪元素

1》链接伪类::link; :visited

2》动态伪类: :focus 当前拥有焦点的元素  :hover  鼠标指针停留的那个元素  :active 鼠标点击的时候

选择第一个子元素  p:first-child {}

选择最后一子元素 p:last-child{}

选择第一行 p:first-line{}

所有的伪元素都必须放在出现该伪元素的选择器的最后面。

设置之前和之后的元素的样式

p:before{}  p:after{}

  

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!