1.CSS选择器常见的有几种?
id选择器：
<head>
<meta charset="UTF-8">
<title>task-8</title>
<style media="screen">
#header {
/*ID选择器前面用＃号表示*/
border: 1px solid red;
width: 140px;
}
</style>
</head>
<body>
<div id="header">
<!--我有id属性哦。-->
我的id是header。
</div>
</body>
类选择器：
<head>
<meta charset="UTF-8">
<title>task-8</title>
<style media="screen">
.nav {
/*类选择器前面用.表示*/
border: 1px solid blue;
border-radius: 3px;
width: 120px;
margin-top: 30px;
color: pink;
background-color: #eee;
}
</style>
</head>
<body>
<div class="nav">
<!--我有class属性-->
我的class是nav
</div>
</body>
属性选择器：
<head>
<meta charset="UTF-8">
<title>task-8</title>
<style media="screen">
input[type="submit"] { /*属性选择器记得[type=""]*/
font-size: 18px;
color: pink;
}
</style>
</head>
<body>
<form class="login" action="#" method="post"> <!--认真看我的type属性-->
<input type="text" name="name" value="" placeholder="请输入用户名" maxlength="10">
<br>
<input type="password" name="psd" value="">
<br>
<input type="submit" name="login" value="登入">
</form>
</div>
</body>
分组选择器：
<style media="screen">
.A,
.D {
/*类选择器的分组，两个类选择器之间要用逗号隔开。*/
color: red;
}
.B,
.C {
color: blue;
}
</style>
<body>
<div class="A">
我是A组的同学，我想变成红色
<p class="B">
我是B组的同学，我想变成蓝色。
</p>
</div>
<div class="C">
我是C组的同学，我也想变成蓝色。
<p class="D">
我是D组的同学，我也想变成红色。
</p>
</div>
</div>
</body>
派生选择器：
<head>
<meta charset="UTF-8">
<title>task-8</title>
<style media="screen">
.A,
.D {
/*类选择器的分组，两个类选择器之间要用逗号隔开。*/
color: red;
}
.B,
.C {
color: blue;
}
.A h3{ /*派生选择器，类选择器后要有一个空格，紧跟着是class="A"的所有子元素H3。*/
border: 1px solid pink;
border-radius: 3px;
width: 60px;
}
</style>
</head>
<body>
<div class="A">
我是A组的同学，我想变成红色
<h3>理科班</h3> <!--.A h3定位的是这里-->
<!--当然如果这个div下还有h3都会生效-->
<p class="B">
我是B组的同学，我想变成蓝色。
</p>
</p>
</div>
<div class="C">
<h3>文科班</h3> <!--虽然你也是h3但是你的祖先元素不是A.所以不会生效。-->
我是C组的同学，我也想变成蓝色。
<p class="D">
我是D组的同学，我也想变成红色。
</p>
</div>
</div>
</body>
标签选择器：
<head>
<meta charset="UTF-8">
<title>task-8</title>
<style>
p { /*标签选择器，所有p标签都会被选中，不管它的父元素是谁，或者在哪里。*/
border: 1px solid red;
border-radius: 3px;
color: pink;
width: 110px;
}
</style>
</head>
<body>
<div class="first">
我是div.
<p class="p1">
我是段落p。
</p>
</div>
<p class="p2">
我也是段落p。
</p>
</body>
通配选择器：（因要匹配网页所有元素，会影响渲染时间，网页复杂的情况慎用。）
<style>
* { /*通配选择器,匹配所有元素。*/
border: 1px solid red;
border-radius: 3px;
color: pink;
width: 110px;
}
</style>
</head>
<body>
<div class="first">
我是div.
<p class="p1">
我是段落p。
</p>
</div>
<p class="p2">
我也是段落p。
</p>
</body>
伪类选择器：:active、:hover、:link等
<head>
<meta charset="UTF-8">
<title>task-8</title>
<style>
.button a{
border: 1px solid;
border-radius: 3px;
display: block;
margin: 100px;
text-decoration: none;
width: 60px;
text-align: center;
}
.button a:hover{ /*伪类选择器，格式别错了，就是 :属性*/
color: pink;
transition: 0.5s;
}
</style>
</head>
<body>
<div class="button">
<a href="#">刷新</a>
</div>
</body>
组合选择器和一些css3的伪类选择器：
Paste_Image.png
Paste_Image.png
图片来至饥人谷-婷楼沐熙 .
2.选择器的优先级是怎样的?
1 . !important 优先级最高!
2 . selector 越精确，则优先级越高.
3 .下面的比上面的优先级高。（渲染方式下面的样式会覆盖上面的样式，在权重一样的时候。）
具体如下：
Paste_Image.png
3.class 和 id 的使用场景?
这不是上一任务的题目吗？哈哈哈。
ID具有唯一性，Class具有普遍性。
ID是唯一的，所以尽量在结构外围使用，通常用于页面布局。
Class是可重复的，所以尽量在结构内部使用，通常用于样式定义。
ID的样式优先级高于Class。
以下代码在JS BIN
意境是否正确请老师指正。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>task-8</title>
<style media="screen">
#header,
#content,
#footer {
margin: 100px;
padding: 50px;
border: 1px solid #ccc;
}
.nav {
border: 2px solid pink;
border-radius: 3px;
background-color: #eee;
}
.nav> ul li {
list-style-type: none;
display: inline-block;
transition: 0.3s;
}
.nav> ul li:hover {
cursor: pointer;
color: pink;
}
.content {
border: 1px solid blue;
}
.content p {
font-size: 70px;
}
.footer {
border: 1px solid red;
}
.footer p {
font-size: 50px;
}
</style>
</head>
<body>
<div id="header">
<div class="nav">
<ul>
<li>视频</li>
<li>导师</li>
<li>课件</li>
<li>社区</li>
</ul>
</div>
<p>
我是Nav。
</p>
</div>
<div id="content">
<div class="content">
<p>
我是内容！！！！
</p>
</div>
</div>
<div id="footer">
<div class="footer">
<p>
我是页脚！！
</p>
</div>
</div>
</body>
</html>
4.使用CSS选择器时为什么要划定适当的命名空间？
- 便于开发时对样式布局。
- 便于语义化和后期维护以及团队协作。
5.以下选择器分别是什么意思?
#header{} /*id选择器，对应id="header"的元素*/
.header{} /*类选择器，对应所有class="header"的元素*/
.header .logo{} /*派生选择器（后代选择器），对应class="header"下所有class="logo"的元素*/
.header.mobile{} /*类选择器，对应class="header mobile"的元素*/
.header p, .header h3{} /*组合选择器，对应class="header"下的所有p标签，注意:祖先元素是class="header"*/
#header .nav>li{} /*组合选择器，对应id="header"下的所有class="nav"且直接子元素为li标签的元素。*/
#header a:hover{} /*组合选择器，对应id="header"下的所有a标签，hover状态下。*/
6.列出你知道的伪类选择器:
| 伪类选择器 | 描述 | support |
|---|---|---|
| active | 向被激活的元素添加样式。 | css1 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式。 | css1 |
| :link | 向未被访问的链接添加样式。 | css1 |
| :focus | 向拥有键盘输入焦点的元素添加样式。 | css2 |
| :visited | 向已被访问的链接添加样式。 | css1 |
| :first-child | 向元素的第一个子元素添加样式。 | css2 |
| :nth-child(n) | 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 | css3 |
7.:first-child和:first-of-type的作用和区别?
如下代码：
<head>
<meta charset="UTF-8">
<title>task-8</title>
<style media="screen">
.A p:first-child { /*class="A"下第一个子元素为p则生效。*/
color: red;
}
div h3:first-of-type { /*父元素为div的第一个h3*/
color: blue;
}
</style>
</head>
<body>
<div class="A">
<p>
我是A组的同学，我想变成红色。
</p>
<h3>理科班</h3>
<h3>捣蛋鬼</h3>
<p class="B">
我是B组的同学，我想变成蓝色。
</p>
</p>
<h3>捣蛋鬼</h3>
</div>
<div class="C">
<h3>文科班</h3>
<p>
我是C组的同学，我也想变成蓝色。
</p>
<h3>捣蛋鬼</h3>
<p class="D">
我是D组的同学，我也想变成红色。
</p>
</div>
</div>
</body>
Paste_Image.png
8.运行如下代码，解析下输出样式的原因。
<style>
.item1:first-child{ color: red;}
.item1:first-of-type{ background: blue;}
</style>
<div class="ct">
<p class="item1">aa</p> <!--red--> <!--background-color:blue;-->
<h3 class="item1">bb</h3> <!--background-color:blue;-->
<h3 class="item1">ccc</h3>
</div>
- <P>aa</p>是.item1的第一个子元素。所以p为red。
- 所有.item1中的第一个子元素，p没有兄弟，它是第一个，h3有两个，这里选择的是哥哥<h3>bb</h3>。
9.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中?
- text-align: center ：文本水平居中。
- 作用在块元素上。
- 让块元素中的内联元素水平居中。
10.如果遇到一个属性想知道兼容性，在哪查看?
重要的问题都要回答三遍。
caniuse
