基本选择器又叫标签选择器
标签名{
声明1；声明2；
}
类名选择器
例如
.ceshi {
color: red;
}
ID选择器
例如
#title {
color: green;
}
层次选择器
<!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>层次选择器</title>
<style>
ul li {
color: red;
/* 设置列表样式 */
list-style: none;
}
/* li>a{
font-size: 28px;
} */
ul>a{
font-size: 28px;
}
/* ol>.second=》选中ol里面的类名为second的标签
+li=>选中类名为second的标签的相邻兄弟元素 */
/* ol>.second+li {
color: pink;
} */
ol>.second~li {
color: pink;
}
/* 层次选择器
后代:标签1 标签2 {}=》选中标签1里面的标签2
子代:标签1>标签2 {}=》选中标签1中的子代标签2
后代可以包含子代，子代只能是父元素的第一层
元素1+元素2:选中元素1后面第一个相邻的兄弟元素
元素1~元素2:选中元素1后面所有的兄弟元素2
*/
</style>
</head>
<body>
<ul>
<a href="#">我是ul的子代a标签</a>
<li>
<a href="#">lorem1</a>
</li>
<li>lorem2</li>
<li>lorem3</li>
<li>lorem4</li>
</ul>
<ol>
<li>有序列表1</li>
<li class="second">有序列表2</li>
<li>有序列表3</li>
<a href="#">我是a标签</a>
<li>有序列表4</li>
</ol>
<!-- ul>li*4+a -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<a href=""></a>
</ul>
</body>
</html>
结构选择器
<!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>结构选择器</title>
<style>
/* h2与li是不同的 */
/* ul li:first-child {
color: pink;
} */
/* ul li:first-of-type {
color: pink;
} */
/* ul li:last-child {
color: green;
}
ul li:last-of-type{
color: green;
}
ul>li:nth-child(3){ */
/* color: red; */
/* }
ul>li:nth-of-type(3){
color: red;
} */
ul>li:not(:nth-child(3)){
color: pink;
}
/* 选择器1 选择器2:first-child=》在选择器1中选择第一个元素，并且该元素与选择器2选中的元素相同
选择器1 选择器2:first-of-type=》在选择器1中选中所有的同级别的选择器2选中的元素，再找第一个出现的元素2
选择器1 选择器2:last-child=》在选择器1中选择最后一个元素，并且该元素与选择器2选中的元素相同
选择器1 选择器2:last-of-type=》在选择器1中选中所有的同级别的选择器2选中的元素，再找第一个出现的元素2
选择器1>选择器2:nth-child(num)=>在选择器1中选择第num个元素，并且该元素与选择器2选中的元素相同
选择器1>选择器2:nth-of-typr(num)=>在选择器1中的使用选择器2选中元素，再找第num个出现的元素
选择器:not(条件)=》除了符合条件的选择器选中的其他元素
*/
</style>
</head>
<body>
<ul>
<!-- <h2>结构选择器</h2> -->
<li>lorem1</li>
<li>lorem2
<!-- <ul>
<li>我是li里面的li</li>
<li>我是li里面的li</li>
<li>我是li里面的li</li>
</ul> -->
</li>
<li>lorem3</li>
<li>lorem4</li>
<li>lorem5</li>
<!-- <p>君身呼未。</p> -->
</ul>
</body>
</html>
1962
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
