任务7——CSS选择器小记
1.class与id的使用场景
- id是对标签的标识，页面内唯一，对应CSS的选择符是“#”；
- class是对一类元素的标识，多个元素可具有相同的class，对应CSS的选择符是“.” ;
- id用来识别标识元素，class用来设置样式；
2.CSS常见的选择器
- 基础选择器
Paste_Image.png
- 组合选择器
Paste_Image.png
- 伪类选择器
Paste_Image.png
Paste_Image.png
- 属性选择器
Paste_Image.png
- 伪元素选择器
Paste_Image.png
3.选择器优先级排列（由高到低）
- 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
- 作为style属性写在元素标签上的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
4.复杂场景如何计算选择器优先级
对于复杂场景，例如选择器组合使用的情况，可以先按照下列四个分级对该元素上应用的选择器进行分类，计算各自类别中的值
- 行内样式 <div style="xxx"></div> ——level a
- ID 选择器 ——level b
- 类，属性选择器和伪类选择器 ——level c
- 标签选择器、伪元素 ——level d
例如：
ul ol li.active{} /*a=0 b=0 c=1 d=3 0+0+1+3*/
上述例子中使用了1个类选择器，3个标签选择器
计算出各自level的选择器值后，就可以比较了，按照level由a到d，先比较a，如果a相等，比较b，以此类推，数值大的优先级高
5.下列标签在应用时的顺序，为什么？
a:link, a:hover, a:active, a:visited
首先，我们要明确想达到的一个效果：
链接本身一个样式，鼠标悬停一个样式，点击一个样式，访问之后一个样式，同时访问后，鼠标再悬停和点击也会有相应的样式。
因为选择器之间有覆盖原则，同优先级的，后定义的会覆盖先定义的。
所以，顺序如下：
a:link
a:visited
a:hover
a:active
首先，规定链接的常规样式，放在最前面，其他场景样式在触发时，才能覆盖得以生效；
其次，visited要在点击和悬停之前，这样后面两个效果才会生效；
最后，active是要在hover之后的，否则当你点击时实际上同时也触发了悬停的样式，定义在后面的hover就会覆盖前面的active，所以为了让active生效，要在hover后面。
6.以下选择器含义
#header{/*id选择器，选择id=“header”的元素*/
}
.header{/*类选择器，选择class=“header”的元素*/
}
.header .logo{/*后代选择器，选择class=“header”header的所有class=“logo”的后代元素，不只是子元素*/
}
.header.mobile{/*选择同时具有header和mobile两个class的元素*/
}
.header p, .header h3{/*选择class="header*的元素的后代元素中的p元素和h3元素/
}
#header .nav>li{ /*选择id="header*的元素的后代元素中class=“nav”的元素的所有直接子元素li*/
}
#header a:hover{/*选择id="header*的后代元素中的a链接悬停时的效果/
}
#header .logo~p{/*选择id="header*的后代元素中，class=“logo”的同级p元素，即具有相同父元素/
}
#header input[type="text"]{/*选择id="header*的后代元素中，type="text*的文本输入框/
}
7.伪类选择器
Paste_Image.png
Paste_Image.png
8.div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别
实践是检验真理的唯一标准，对比了一下两种用法的代码效果
- div:first-child
div:first-child{
color: red;
}
/*div :first-of-type{
background: blue;
}*/
</style>
</head>
<body>
<div class="ct">
<p class="item1">aa</p>
<p class="item1">dd</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
<div class="ct">
<p class="item1">aa</p>
<p class="item1">dd</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
效果：
Paste_Image.png
- div :first-child（有个空格）
<style>
div :first-child{
color: red;
}
/*div :first-of-type{
background: blue;
}*/
</style>
</head>
<body>
<div class="ct">
<p class="item1">aa</p>
<p class="item1">dd</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
<div class="ct">
<p class="item1">aa</p>
<p class="item1">dd</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
效果：
Paste_Image.png
从以上对比我们可以看出，div:first-child选中的是div的父元素的第一个子元素，所以第一个div下字体颜色都红了；而div :first-child(有个空格)，选中的是div后代中的第一个子元素，所以两个div中只有第一个子元素p的字体颜色变红了
- div:first-of-type
<style>
div:first-of-type{
color: red;
}
/*div :first-of-type{
background: blue;
}*/
</style>
</head>
<body>
<p>test1</p>
<p>test2</p>
<div class="ct">
<p class="item1">aa</p>
<p class="item1">dd</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
<div class="ct">
<p class="item1">aa</p>
<p class="item1">dd</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
效果：
Paste_Image.png
- div :first-of-type（有个空格）
<style>
div :first-of-type{
color: red;
}
/*div :first-of-type{
background: blue;
}*/
</style>
</head>
<body>
<p>test1</p>
<p>test2</p>
<div class="ct">
<p class="item1">aa</p>
<p class="item1">dd</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
<div class="ct">
<p class="item1">aa</p>
<p class="item1">dd</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
效果：
Paste_Image.png
从上述对比可以看出，div:first-of-type选中的是div的父元素的类型中第一次出现的div标签，所以第一个div的字体都为红色；而div :first-of-type（有个空格），选择对象变为了div的后代，在后代中，选中第一次出现的各种类型标签，所以两个div中，第一次出现的p和h3字体变为红色。
8.解释下列代码效果的原因
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
首先，选中class="item1"的父元素的第一个子元素，使其字体颜色为红色，所以aa是红色；
其次，选中class="item1"的父元素中，第一次出现的各类型标签，使其背景为蓝色，所以aa和bb是背景蓝色，ccc是第二个出现的h3，背景不变蓝色。
