（7）css选择器
1.元素选择器：
直接设置所有的div元素的样式
div{
}
2.类选择器：
.container{
}
3.id选择器:
是唯一的，无法重名，不利于维护
#div1{
}
4.后代选择器(有空格的)
<html>
<head>
<style>
.parent .child{
}
</style>
</head>
<body>
<div class="parent">
<h1 class="child">
</h1>
</div>
</body>
</html>
5.子元素选择器:
用来找元素,如下图代码是找parent类里面的h1
.parent>h1{
}
6.交集选择器：
要设置既是h1标签又要是child类的样式
h1.child{
}
7.并集选择器：
表示div和h1要有一样的样式
div,h1{
}
8.属性选择器：
<input type="text">
9.伪类选择器：
（1）link表示鼠标没有悬浮上去也没有点击时候的状态；visited表示鼠标点击之后的状态；hover表示鼠标悬浮上去的状态；active表示鼠标点击时候的状态(激活状态)
一定按照link—visited—hover—active顺序写（可以记为love&hate）
a:link {
color: seagreen;
}
a:visited {
color: black;
}
a:hover {
color: rosybrown;
}
a:active {
color: red;
}
（2）第一个：设置container下的div的基数孩子背景颜色，括号里的odd也可以换成1，2，3，4…（odd：偶数；even：奇数）
（3）第二个：设置container下的div的第一个孩子的背景颜色
.container>div:nth-child(odd){
background-color: sienna;
}
.container>div:first-child{
background-color: springgreen;
}
10.伪元素：
使用来装饰的，是一些非正文内容
<head>
<style>
.container::before{
content::before
}
.container::after{
content::after
}
</style>
</head>
<body>
<div >
123
</div>
</body>
上述代码呈现出来的结果是before 123 after
986
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
