前端（02 HTML知识）
2018-08-07 本文已影响0人
周肸
作业答案：
- plate 元素选择器
- bento 元素选择器
- #fancy id选择器
- plate apple 后代选择器
- #fancy pickle 交集选择器
- .small 类选择器
- bento .small,plate .small 并集选择器
- bento orange.small 交集选择器
- bento,plate 并集选择器
- * 通配选择器
- plate * 交集通配选择器
- plate+apple 兄弟选择器（后边一个元素）
- bento ~ pickle 兄弟选择器（后边所有元素）
- plate > apple 子元素选择器
- plate :first-child 子元素选择器（为第一个子元素）
- apple,plate pickle 并集选择器
- apple,pickle 并集选择器
- plate:nth-child(3) 子元素选择器（为指定位置的子元素）
- bento:first-of-type 子元素选择器（为bento标签第一个子元素）
- apple:first-of-type 子元素选择器（为apple标签第一个子元素）
- plate:nth-of-type 子元素选择器 （为plate标签偶数子元素）
- plate:nth-child(2n+3) 子元素选择器（选择第2n+3个plate元素）【公式2n+3中n是计数器（从0开始）3是偏移值】
- orange:last-of-type,apple:last-of-type 子元素选择器（选择最后一个标签）| 并集选择器
- bento:empty 选择bento标签没有子元素的元素
- apple:not(.small) 子元素选择器 （否定伪类）
1.否定伪类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>否定伪类</title>
<style type="text/css">
/*
:not(选择器){}
*/
/*p:not(.hello){
background-color:red;
}*/
p:not(.www):not(#p1) {
background-color: red;
}
</style>
</head>
<body>
<p>不知所谓</p>
<p id="p1">不知所谓</p>
<p class="hello">不知所谓</p>
<p>不知所谓</p>
</body>
</htmml>
2.CSS选择器基本语法 (选择器 声明块)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS</title>
<!-- style 内部样式表 -->
<style type="text/css">
/*为p标签所有元素设置颜色字体*/
p{
color: red;
font-size: 40px;
}
</style>
</head>
<body>
<!-- style 内联样式 -->
<p style="color: red;font-size: 40px">呦呦呦呦</p>
<p style="color: red;font-size: 40px">呦呦呦呦</p>
<p>呦呦呦呦</p>
</body>
</htmml>
3.选择器的优先级
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>选择器的优先级</title>
<style type="text/css">
/*
内敛样式 优先级 1000
id选择器 优先级 100
类和内类 优先级 10
元素选择器 优先级 1
通配 优先级 0
继承的样式 没有优先级
*/
*{
font-size: 50px;
}
.p1{background-color: yellow;
}
p{
background-color: red;
}
#p2{
background-color: green;
}
p#p2{
background-color: pink;
}
/*并集选择器是单独计算的*/
</style>
</head>
<body>
<p class="p1" id="p2">只是p标签</p>
<p>
这是一个段落标签
<br><br>
<span>这是p标签中的span</span>
</p>
</body>
</htmml>
