精通css书籍第二章笔记2.1

第二章 添加样式

目录

• 2.1css选择符

1. 子选择符和同辈选择符
2. 通用选择符
3. 属性选择符
4. 伪元素
5. 伪类
6. 结构化伪类
7. 表单伪类 -2.2层叠

-2.3特殊性

1. 利用层叠次序
2. 控制特殊性
3. 特殊性与调试 -2.4为文档应用样式
4. link与style元素
5. 性能

内容

2.1css选择符

（1）类型选择符：选择html中特定的标签
后代选择符：标签的子标签
通过对应的ID和class属性值选择元素， css样式中ID以#号开头，class以点（.）开头，

（2）子选择符（>）：只选择一个元素的直接后代。相邻同辈选择符（+）:选择位于某个元素后面，并与该元素拥有共同父元素的元素。（>）和（+）被称为组合子。还有一种一般同辈组合子（~）：选择某元素后面的所有段落。

（3）通用选择符（*）：可以匹配任何元素。

（4）属性选择符：基于元素是否有某个属性或者属性是否有个值来选择元素。例：abbr[title]{} ，也可以根据特定的属性值来应用样式。例：input[type="submit"]{} ,要匹配以某些字符开头的属性值（^）：a[href^="http:"];要匹配以某些字符结尾的属性值($):img[src$=".jpg"];要匹配包含某些字符的属性值（）： a[href="/about/"];要匹配以空格分隔的字符串中的属性值（）：a[rel=next];选择开头是指定值或指定值后连着一个短划线（|）：a[lang|=en]

(5)伪元素（双冒号语法） ::first-letter :选择一段文本的第一个字符。 ::first-line :选择一段文本的第一行。 ::before :内容开头假想的元素。 ::after : 内容末尾处假想的元素。

（6）伪类（单冒号语法） ：用于选择元素的特定状态或关系。

超链接的伪类用法：

    a:link{
        color:blue;
    }
    /*访问过的链接为绿色*/
    a:visited{
        color:green;
    }
    /*链接在鼠标悬停及获取键盘焦点时为红色*/
    a:hover,a:focus{
        color:red;
    }
    /*活动状态为紫色*/
    a:active{
        color:puple;
    }

以上的先后次序很重要，不要在重要的交互功能中使用:hover

:target ：匹配的元素有一个ID类，而且该属性的值出现在当前页面URL末尾的（#）后面。

:not()选择符：反选伪类，专门用于排除某些选择符。

（7）结构化伪类 :nth-child() :可以接受很多不同的表达式作为参数，odd（奇数），even（偶数），用来交替地为表格行应用样式。

:nth-last-child() :从最后一个元素倒序计算。

:first-child :选择第一个子元素的伪元素。

:last-child :选择最后一个子元素的伪元素。

:only-of-type :选择特定类型的唯一子元素。

（8）表单伪类 ：根据用户与表单控件交互的方式，来反应表单控件的某种状态。

:required :选择带有required属性的表单元素，并给它的边框设置一种不同的颜色。

:optional :为没有required属性的控件添加样式。

:valid :输入框中当前内容的有效性的样式，比如验证电子邮件地址

:invalid :无效时的样式。