前端学习经验(6)
CSS
选择器
层次选择器
包含选择器:选择所有被元素1包含的元素2,不限层级
元素1 元素2{
样式表
}
如:<head>
<style>
.aaa p{
font-family: "楷体";
font-size: 30px;
color: orange;
}
.aaa div{
border: red solid 3px;
height: 100px;
width: 200px;
}
</style>
</head>
<body>
<div class = "aaa">
<p>包含选择器</p>
<div>包含选择器1</div>
</div>
</body>
<p>包含选择器</p>,<div>包含选择器1</div>两个元素均包含在元素<div class = "aaa"></div>中。
子选择器:选择所有元素1的子对象元素2,只能选择父级元素的下一级元素
元素1>元素2{
样式表
}
如:<head>
<style>
.aaa>p{
font-family: "黑体";
font-size: 30px;
color: bule;
}
.aaa>div{
border: green solid 10px;
height: 100px;
width: 200px;
}
</style>
</head>
<body>
<div class = "aaa">
<p>子选择器</p>
<p>子选择器1</p>
<div>子选择器2</div>
<p>子选择器3</p>
<div>子选择器4/div>
</div>
</body>
选择器的分组:多个元素采用相同的样式
元素1,元素2,元素3,...,元素n{
样式表
}
如:
<head>
<style>
#a,#b,.c{
color: orange;
font-family: "楷体";
font-size: 30px;
border: solid green 1px;
height: 100px;
width: 200px;
}
</style>
</head>
<body>
<div class = "aaa">
<h1 id = "a">呵呵</h1>
<p id = "b">呵呵2</p>
<p class= "c">呵呵3</p>
<div class= "c">呵呵1</div>
</div>
</body>
伪类选择器
动态伪类选择器:用来添加一些选择器的特殊效果。
如:鼠标四种状态
<head>
<style>
a:link{ /* 未访问的链接 */
background: blue;
}
a:visited{ /* 已访问的链接 */
background: red;
}
a:hover{ /* 鼠标划过链接,此样式必须在a:link,a:visited之后才能生效 */
background: green;
}
a:active{ /* 已选中的链接,不常用 */
background: purple;
}
</style>
</head>
<body>
<a href = "https://www.baidu.com/">百度一下</a>
</body>
after和before属性:after和before必需配合content一起使用
<head>
<style>
.a:before{ /*元素:before :选择器在被选元素的内容前面插入内容。*/
content:"开始--";
color:orange;
}
.a:after{ /*元素:after :选择器在被选元素的内容后面插入内容。*/
content:"--结束";
color:green;
}
</style>
</head>
<body>
<div class = "a" >这是一个盒子</div>
</body>
目标伪类选择器:
元素:target{
样式表
}
如:点击文字,跳转到指定区域。
<head>
<style>
div{
border:green solid 2px;
width:300px;
height:200px;
}
div:target{
background:green;
}
</style>
</head>
<body>
<a href = "#box1">跳转到第一个盒子</a>
<a href = "#box2">跳转到第二个盒子</a>
<a href = "#box3">跳转到第三个盒子</a>
<a href = "#box4">跳转到第四个盒子</a>
<div id="box1">
第一个盒子
</div>
<div id="box2">
第二个盒子
</div>
<div id="box3">
第三个盒子
</div>
<div id="box4">
第四个盒子
</div>
</body>