CSS规则

一条CSS规则由选择器和声明组成,选择器有分组选择器,上下文选择器,id选择器,类选择器,伪类,伪元素 声明由属性和值组成.

CSS规则

选择符(选择器):指出规则所要选择的元素

分组选择符

以逗号作为分隔符

多个选择符的简写形式

上下文选择符：基于祖先或同胞元素选择一个元素。

后代组合式选择符

一组以空格分隔的标签名

用于选择作为指定祖先元素后代的标签。

只要有标签在它的层次结构“上游”存在这么一个祖先，那么就会选中该标签。无论从该标签到作为祖先的上下文之间隔着多少层次都没有关系。

特殊的上下文选择符

子选择符:`>`

语法:标签1>标签2

标签2必须是标签1的子元素，

紧邻同胞选择符:`+`

语法:标签1+标签2

标签2必须紧跟在其同胞标签1的后面。

一般同胞选择符`~`

标签1~标签2

标签2必须跟（不一定紧跟）在其同胞标签1后面。

通用选择符`*`

`*`是一个通配符，它匹配任何元素，

常被称为星号选择符

`p*{color:red;}`这样只会把p包含的所有元素的文本变成红色。

构成非子选择符:`标签1 * 标签2`

`section*a{font-size:1.3em;}`:任何是section孙子元素，而子元素没有a标签的元素都会被选中。

ID和类选择符:基于id和class属性的值选择元素。

类选择符

语法:`.类名`，注意点号和类名之间不要有空格

标签带类选择符

多类选择符

HTML：`<p class="specialtext featured">`

CSS:`.specialtext.featured{font-size:120%;}`,选择同时存在这两个类名的元素,注意多个类名之间没有空格

ID选择符

HTML:`<p id="specialtext">`

CSS:` #specialtext{CSS样式声明}`, `p#specialtext{CSS样式声明}`

属性选择符

基于HTML标签的属性选择元素

属性名选择符

标签名[属性名]

选择任何带有该属性标签。

HTML:`<img src="..." title="yellowflower" alt="yellowflower"/>`

CSS:`img[title]{...}`,选择带有title属性的img元素

属性值选择符

`标签名[属性名="属性值"]`

这个选择符可以让你控制到属性的值是什么。

HTML:`<img src="..." title="red flower" alt="red flower"/>`

CSS:`img[title="red flower"]{...}`:img标签的的title属性值为`red flower`的情况下才会选中该标签

伪类

UI（UserInterface，用户界面）伪类

基于特定HTML元素的状态应用样式。（比如鼠标指针位于链接上时）

链接伪类

Link。此时，链接就在那儿等着用户点击。

a:link{color:black;}

Visited。用户此前点击过这个链接。

a:visited{color:gray;}

Hover。鼠标指针正悬停在链接上。

a:hover{text-decoration:none;}

Active。链接正在被点击（鼠标在元素上按下，还没有释放）。

a:active{color:red;}

`:focus`伪类

语法:`e:focus`,e表示任意标签

`:target`伪类

语法:`e:target`

结构化伪类

结构化伪类可以根据标记的结构应用样式，比如根据某元素的父元素或前面的同胞元素是什么。

1.`:first-child`和`:last-child`

:`first-child`代表一组同胞元素中的第一个元素，而:`last-child`则代表最后一个。

2.`:nth-child(n)`

e表示元素名，n表示一个数值（也可以使用`odd`或`even`）。

`li:nth-child(3)`

会选择一组列表项中的每个第三项。

伪元素

1.`::first-letter`伪元素

语法:`e::first-letter`

`::first-letter`伪元素可以用来创建首字符放大效果

2.`::first-line`伪元素

选中文本段落（一般情况下是段落）的第一行。

`e::first-line`

注意，::first-line伪元素的长度会随浏览器窗口大小的变化而改变。

3.`::before`和`::after`伪元素

可用于在特定元素前面或后面添加特殊内容。

HTML:`<p class="age">25</p>`

CSS

`p.age::before{content:"Age:";}`

`p.age::after{content:"years.";}`

显示结果

`Age:25years.`

如果标签中的内容是通过数据库查询生成的结果，那么用这种技巧再合适不过了。因为所有结果都是数字，使用这两个伪元素可以在把数字呈现给用户时，加上说明性文字。

搜索引擎不会取得伪元素的信息

声明

属性

属性指出要影响元素哪个方面的样式

属性的值

值是属性的一个状态

每个声明以分号结尾,属性和值以冒号分隔