背景，边框，列表，链接相关属性

背景相关属性

background简写：

边框相关属性

前三个属性可简写border属性：

列表相关属性

可以在 <ul> 或 <ol> 或<li>元素上简写list-style：

链接相关属性

选择器四种状态：**(他们不是属性！)**

• a:link - 普通的、未被访问的链接
• a:visited - 用户已访问的链接
• a:hover - 鼠标指针位于链接的上方
• a:active - 链接被点击的时刻

注意：

• a:hover 必须位于 a:link 和 a:visited 之后
• a:active 必须位于 a:hover 之后

举例：

1

a:link {color:#FF0000;}	

属性

CSS 各种选择器的概念，使用方法及使用场景。

简单选择器

• ID选择器：#ID名称{属性：值;}
• 类选择器：.类名称{属性：值;}
• 标签（元素）选择器：html元素名{属性：值;}
• 通用选择器：*{属性：值;}

属性选择器

• 属性选择器：[属性名]{CSS样式}
• 属性和值选择器：[属性名=值]{CSS样式}
• 属性和（多个）值选择器(类似模糊查找)：

伪类选择器

• :first-child表示一组同级元素中的第一元素
• :last-child表示一组同级元素中的最后一个元素
• :only-child表示没有任何兄弟姐妹的元素
• :invalid设置值无效时的样式

伪元素选择器

• 注意：使用双冒号，与伪类选择器区分开。
• ::first-line伪元素设置文本首行的特殊样式
• ::first-letter 伪元素设置文本首字母的特殊样式
• ::before伪元素在元素前面插入新内容

派生选择器

• 用于选择一个标签中的所有另一个标签。（id选择器与类选择器、属性选择器也可以派生）
• 用空格分隔开两个元素名称。

后代选择器

• 空格分隔两个选择器名称
• 选择的元素是其选择器的后代。他们不需要是直接子元素就可以配对(子孙后代都可以)。

儿童组合器

• 大于号分隔
• 仅当选择器选择直接子元素时才匹配。层次结构后面的子孙不匹配。（注意：直接子元素并不是一定只有一个，要与伪类选择器:first-child区别开来）

直接相邻的同级选择器

• 加号分隔
• 用于选择与层次结构中相同级别的另一个元素相邻的对象。
• 注意：这两个选择器不仅要是同级别的，还要直接相邻。

一般同级[所有的同级选择器]

• 用**~分隔**开两个选择器。
• 用于选择与层次结构中相同级别的所有指定选择器的对象（包括直接相邻的同级），也可以使用常规的同级组合器。
• 注意：空格分隔开的是父元素与子元素组成的后代选择器，~分隔开的是同级别的所有指定选择器的对象。

CSS 选择器的优先级

• 影响优先级的因素从高到低的顺序是：重要性、特异性、源顺序。
• 注意：并不是整个规则都会被覆盖，只是相同的属性。

源顺序（靠后的获胜）

如果有多个选择器作用于同一个元素，则靠后的将获胜。

特异性(计算各个选择器的特异性值)

• 选择器具有的特异性程度是使用四个不同的值（或成分）来衡量的，可以将其视为千位，百位，十位和个位这四列中的四个个位数：

重要性!important

• 超越了上述两个级联的常规规则，但最好不要用。
• 语法选择器{属性: 属性值 !important;}

方法重用：call() 和 apply()

• 不带参数的使用方法非常相似。
• 带参数的使用方法有所区别：

• 如果要使用数组而不是参数列表，则 apply() 方法非常方便。

面试题

语句var arr=[a,b,c,d];执行后，数组arr中每项都是一个整数，能得到其中最大整数语句有：

1. Math.max(arr[0], arr[1], arr[2], arr[3])
2. Math.max.call(Math, arr[0], arr[1], arr[2], arr[3])
3. Math.max.apply(Math,arr)

不能得到其中最大整数语句有：

1

Math.max(arr)

解析

Math的max()不支持传入数组,所以错误。

JavaScript 函数 Call

可以通过 call()调用属于另一个对象的方法。

例子1:普通方法调用

• 下面的例子创建了带有三个属性的对象（firstName、lastName、fullName）。

  1 2 3 4 5 6 7 8

  var person = { firstName:"Bill", lastName: "Gates", fullName: function () { return this.firstName + " " + this.lastName; } } person.fullName(); // 将返回 "Bill Gates"

• fullName 属性是一个方法。person 对象是该方法的拥有者。
• fullName 属性属于 person 对象的方法。

例子2：使用函数 Call

分别让person1与person2去调用person的fullName 方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName:"Bill",
    lastName: "Gates",
}
var person2 = {
    firstName:"Steve",
    lastName: "Jobs",
}
person.fullName.call(person1);  // 将返回 "Bill Gates"
person.fullName.call(person2);  // 将返回 "Steve Jobs"

完整例子

例子3：带参数的 call() 方法

让person1带着参数”Seattle”, “USA”去调用person的fullName属性（方法）：

1
2
3
4
5
6
7
8
9
10

var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"Bill",
  lastName: "Gates"
}
person.fullName.call(person1, "Seattle", "USA");

完整例子

JavaScript 函数 Apply

• apply()会改变this的指向，
• 可以通过 apply() 方法调用属于另一个对象的方法。
• 但不仅限于此，当设置第一个参数为null时可以在某些本来需要写成遍历数组变量的任务中使用内建的函数,也就是说此时apply()的作用不是调用属于另一个对象的方法，而是使参数数组中的每一个元素都去执行func函数。【如：下方例子“使用Apply()在数组上模拟 max 方法”】
• call()方法的作用和 apply() 方法类似，区别就是call()方法接受的是参数列表，而apply()方法接受的是一个参数数组。
• apply() 方法调用一个具有给定this值的函数，以及作为一个数组（或类似数组对象）提供的参数。
• 语法：func.apply(thisArg, [argsArray])

• 返回值：调用有指定this值和参数的函数的结果。
• 描述：在调用一个存在的函数时，你可以为其指定一个 this 对象。 this 指当前对象，也就是正在调用这个函数的对象。 使用 apply， 你可以只写一次这个方法然后在另一个对象中继承它，而不用在新对象中重复写该方法。
  你也可以使用 arguments对象作为 argsArray 参数。 arguments 是一个函数的局部变量。 它可以被用作被调用对象的所有未指定的参数。 这样，你在使用apply函数的时候就不需要知道被调用对象的所有参数。 你可以使用arguments来把所有的参数传递给被调用对象。 被调用对象接下来就负责处理这些参数。

例子：使用函数Apply

让person1去调用person的fullName 方法：

1
2
3
4
5
6
7
8
9
10

var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName: "Bill",
    lastName: "Gates",
}
person.fullName.apply(person1);  // 将返回 "Bill Gates"

例子：带参数的 apply() 方法

apply() 方法接受数组中的参数:

1
2
3
4
5
6
7
8
9
10

var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"John",
  lastName: "Doe"
}
person.fullName.apply(person1, ["Oslo", "Norway"]);

完整例子

使用Apply()在数组上模拟 max 方法

Math的max()方法

首先我们了解可以使用 Math.max() 方法找到（数字列表中的）最大数字：

1

Math.max(1,2,3);  // 会返回 3

完整例子

让数组调用Math的max()方法

但是JavaScript 数组没有 max() 方法，因此我们可以通过apply()让数组调用 Math的max() 方法：

1

Math.max.apply(null, [1,2,3]); // 也会返回 3

第一个参数（null）无关紧要。在本例中未使用它。这些例子会给出相同的结果：

1. Math.max.apply(Math, [1,2,3]); // 也会返回 3
2. Math.max.apply(" ", [1,2,3]); // 也会返回 3
3. Math.max.apply(0, [1,2,3]); // 也会返回 3

JavaScript 严格模式

在 JavaScript 严格模式下，如果 apply() 方法的第一个参数不是对象，则它将成为被调用函数的所有者（对象）。在“非严格”模式下，它成为全局对象。

不能改变箭头函数this指向

• 注意： call, apply, bind 都不能改变箭头函数中的 this 指向
• 因为箭头函数的this只和定义时的作用域this有关，和调用者/调用环境无关，也永远不会改变