任务七——CSS选择器

1. class 和 id 的使用场景?

ID's are unique.Each element can only have only one ID.Each page can have only one element with that IDClasses are NOT uniqueYou can use the same class on multiple elements.You can use multiple classes on the same element.CSS doesn't care,But Javascript cares.

1.1 Class

Class——类，在CSS样式中以小写的“.”来命名。
类选择器的写法为： .css5{属性：属性值;}
在一个HTML页面中，class可以出现在多个元素中。同一个元素中也可以用多个class。

.p2 {
  color:blue;
}

1.2 ID

ID选择器的写法为：#ID{属性：属性值;}
同样的ID在页面里只能出现一次，具有唯一性。

#password{
  color:blue;
}

————————————————————————

2. CSS选择器常见的有几种?

2.1 基础选择器

image.png

2.2 组合选择器

image.png

2.3 属性选择器

image.png

2.4 伪类选择器

image.png

2.5 伪元素选择器

image.png

————————————————————————

3. 选择器的优先级是怎样的?对于复杂场景如何计算优先级？

3.1CSS选择器的优先级

CSS选择器优先级从高到低分别是

• 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
• 作为style属性写在元素标签上的内联样式
• id选择器
• 类选择器
• 伪类选择器
• 属性选择器
• 标签选择器
• 通配符选择器
• 浏览器自定义

3.2 复杂场景如何计算优先级？

将各组合选择器中的不同类型选择器根据以下次序依次进行比较：

3.2.1 我们定义行内样式归类为a

=====>> a

3.2.2 ID选择器归类为b

#name
{
   color: red;
}

=====>> b

3.2.3 类选择器、属性选择器、伪类选择器归类为c

3.2.4标签选择器、伪元素选择器归类为d

首先数一下各组合选择器中的 a类选择器的个数，a类选择器最多者优先级最高。如果a类选择器数量一样，则继续比较b类选择器的数量，b类选择器多者优先级高，依次比较c.d类。

举例：

#ct .box p        {}  /* a=0 b=1 c=1 d=1 -> 0,1,1,1 */

div#header::after  {}  /* a=0 b=1 c=0 d=2 -> 0,1,0,2 */

style=""          /* a=1 b=0 c=0 d=0 -> 1,0,0,0 */

我们说第三个组合选择器优先级最高。第一个组合选择器的优先级次之。第二个组合选择器的优先级最低。

3.3 对于完全一样的两个选择器，则按照书写顺序，后面书写的选择器优先级最高。

————————————————————————

4. a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？

4.1 a:link, a:hover, a:active, a:visited 各指什么？

link:连接平常的状态
visited:连接被访问过之后
hover:鼠标放到连接上的时候
active:连接被按下的时候

4.2 a:link, a:hover, a:active, a:visited 的书写顺序是？

css中关于超链接的四个属性一般正常顺序为：link，visited，hover，active，即

a:link
a:visited
a:hover
a:active

4.3 原因

css中关于链接样式的书写各属性顺序不能颠倒。
如果将a:visited 放在a:hover和a:active的后面，那么a:hover和a:active的效果便不能正常表现出来。

————————————————————————

5. 以下选择器分别是什么意思?

5.1

选择唯一一个ID为header的元素

#header{
}

5.2

选择class为header的所有元素

.header{
}

5.3

选择header元素所有的后代元素logo

.header .logo{
}

5.4

选择同时含有header和mobile的元素

.header.mobile{
}

5.5

选择header的所有后代元素p和h3

.header p, .header h3{
}

5.6

选择ID为header中所有属性的为nav的所有直接li子元素

#header .nav>li{
}

5.7

匹配ID为header中所有a连接的hover状态

#header a:hover{
}

5.8

匹配ID为header中所有和logo属性相邻的同级p元素

#header .logo~p{
}

5.9

匹配ID为header中所有的文本输入框

#header input[type="text"]{
}