(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