复合选择器
父元素
子元素
祖先元素
后代元素
后代选择器：
选中某个元素的后代
语法：祖先元素 后代元素{
样式声明
}
通过标签选择器选中、class、id
特点：
1、祖先元素选择器和后代元素选择器之间必须有一个空格
2、只会选中后代元素，祖先元素不受样式声明的影响
子元素选择器：
选中某个元素的子元素
语法：
父元素>子元素{
样式声明
}
特点：
1、必须使用>来分隔父元素和子元素
2、只会选中直接后代，不会隔代选中
3、并集选择器
作用：选中所有声明的元素
语法：
选择器1,选择器2,选择器3,...选择器n{
}
特点：
1、选择器之间必须使用逗号分隔
2、会选中页面上满足任意一个选择器的元素
4、交集选择器
作用：选择同时满足所有选择器声明的元素
语法：选择器1选择器2选择器3...选择器n{
}
特点：
1、选择器之间不可以有任何分隔
2、选中同时满足多个选择器的元素
css
1、font:
font-family:字体
多个字体之间使用逗号分隔
多个字体依次在计算机中寻找，找到就使用，否则就默认为微软雅黑
font-size：字体大小，单位px
默认16px
font-weight:字体粗细
700或bold 加粗
400或normal 不加粗
注意，没有单位
font-style:italic 斜体
不倾斜是normal
font：复合属性，可以连写
有顺序
font:font-style font-weight font-size/line-height font-family
不需要设置的属性可以省略，但是必须保留font-size和font-family 否则不起作用
2、文本：
color:字体颜色
可以使用英文单词
可以使用十六进制代码#fff（通常使用）
也可以使用rgb值
text-align:文本对齐
left:左对齐
center ：居中
right：右对齐
text-indent:文本缩进
2em
text-decoration:文本修饰
underline下划线
overline上划线
line-through删除线
none
line-height:设置行间距
上间距+文字高度+下间距 = 行间距
line-height越大，上下间距的值会变大，上间距 = 下间距
3、元素显示模式：
元素以什么方式显示，如：div独占一行，span可以在一行内放多个
html元素分为两种：块元素和行内元素
块元素：p、div、h1~h6、ul
特点：
1、独占一行
2、可以设置宽高
3、宽度默认是父元素的100%
行内元素：strong、em、i、del、a、span
特点：
1、一行可以放多个
2、设置宽高无效
3、默认高度是内容的高度
4、行内元素只能容纳文本和其他行内元素
行内块元素：img、input、td
同时具有行内元素和块元素的特点
1、一行显示多个，但元素之间有空隙（行内特点）
2、默认高度就是内容高度（行内特点）
3、高度、宽度可以设置（块特点）
元素显示模式的转换：
display样式：
block
inline
inline-block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div p {
width: 100px;
height: 100px;
background-color: red;
}
#grandfather .father {
width: 100px;
height: 100px;
background-color: red;
}
#grandfather>p {
width: 100px;
height: 100px;
background-color: yellowgreen;
}
#grandfather,
div>p,
.father p,
#brother {
width: 100px;
height: 100px;
background-color: violet;
}
div.brother {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="grandfather" class="grandfather">
<div class="father">
<p class="brother">1</p>
</div>
<div class="brother">
2
</div>
</div>
</body>
</html>
1942
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
