选择器类型
1.基础选择器
2.组合选择器
3.属性选择器
4.伪类选择器
5.伪元素选择器
1.png
2.png
3.png
4.png
5.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="wrap">
<h1 class="child">h1</h1>
<h2 class="child">h2</h2>
<div class="ct">
<h1 class="child">ct-h1</h1>
</div>
</div>
</body>
</html>
<style>
.child:first-child{
color: green;
}
.child:first-of-type{
background: blue;
}
</style>
//匹配所有class=child的元素的父元素的第一个子元素
6.png
7.png
8.png
9.png
10.png
11.png
12.png
//一个CSS类可以应用与多个不同的元素，一个元素也可以应用多个不同的CSS类
<ul>
<li class="first done">起床</li>
<li class="secode done">刷牙</li>
<li class="third">洗脸</li>
</ul>
.first{
font-weight: bold;
}
.done{
text-decoration: line-through;
}
题目1:class 和 id 的使用场景?
id 定位页面上唯一的元素
class 定义页面上一类的元素
题目2:CSS选择器常见的有几种?
1.基础选择器
2.组合选择器
3.属性选择器
4.伪类选择器
5.伪元素选择器
题目3:选择器的优先级是怎样的?对于复杂场景如何计算优先级？
题目4:a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
<a href="#">Hello World</a>
a{
color: red;
}
a:{
color: black;
}
a:hover{
color: blue;
}
a:active{
color: yellow;
}
题目5:以下选择器分别是什么意思?
#header{
}
.header{
}
.header .logo{
}
.header.mobile{
}
.header p, .header h3{
}
#header .nav>li{
}
#header a:hover{
}
#header .logo~p{
}
#header input[type="text"]{
}
列出你知道的伪类选择器
div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）
运行如下代码，解析下输出样式的原因。
<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>
网友评论