html选择器
程序员文章站
2024-01-03 14:39:04
html（6）选择器1.元素选择器：直接设置所有的div元素的样式div{}2.类选择器：.container{}3.id选择器:是唯一的，无法重名，不利于维护#div1{}4.后代选择器(有空格的) ...
html（7）选择器
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顺序写
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
优先级：优先级计算方法及css特性
本文地址：https://blog.csdn.net/weixin_44713688/article/details/107341584