<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css的基本使用</title>
<style>
/*1. 设置所有的 h2标签的文本为红色*/
*{
color:red;
font-family: "arial black";
}
/*2. 元素/标签选择器 */
div{
font-size: large;
color: aqua;
}
/*3. id选择器 # */
#p1{
font-size: small;
background-color: bisque;
}
/*4. 类选择器 .class */
.p2{
font-family: "楷体";
}
/*5. 分组选择器 */
#p1,.p2,font,span,div{
/* 中划线 */
text-decoration: line-through;
}
/* 6.1后代选择器 */
.food li{
border: #00FFFF solid 0.0625rem;
}
/* 6.2 子代选择器 */
.food2 > li{
border: aqua dotted 1px;
}
/*6.3 相邻兄弟选择器 */
#mydiv+div{
background: #FF0000;
}
/* 6.4普通相邻兄弟选择器 */
#mydiv2+div{
background-color: #FFE4C4;
}
</style>
<!-- <link rel="stylesheet" type="text/css" href="../css/style.css"/> -->
</head>
<body>
<div>这是一个div1</div>
<div>这是一个div2</div>
<p id="p1">这是一个p</p>
<span class="p2">这是一个span</span>
<br>
<font>这是一个font</font>
<!-- 获取class属性值时food的元素的所有对应li列表项 -->
<ul class="food">
<li>水果</li>
<ul>
<li>香蕉</li>
<li>西瓜</li>
<li>苹果</li>
</ul>
<li>蔬菜</li>
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</ul>
<ul class="food2">
<li>水果</li>
<ul>
<li>香蕉</li>
<li>西瓜</li>
<li>苹果</li>
</ul>
<li>蔬菜</li>
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</ul>
<hr>
<div id="mydiv">
相邻兄弟选择器
</div>
<div>
相邻兄弟选择器2
</div>
<div>
相邻兄弟选择器3
</div>
hr>
<div id="mydiv2">
普通相邻兄弟选择器
</div>
<div>
普通相邻兄弟选择器2
</div>
<div>
普通相邻兄弟选择器3
</div>
</body>
</html>
代码结果截图
<!-- 就近原则
css基本选择器
1、通用选择器
*{
属性名:属性值
}
2、元素选择器
元素/标签名{
属性名:属性值;
...
}
3、ID选择器----------使用#
#id属性值{
属性名:属性值;
...
}
4、类选择器-----.class属性值{}
.class属性值{
属性名:属性值;
...
}
5、分组选择器-----元素之间逗号,隔开
选择器1,选择器2...{
属性名:属性值;
}
6、组合选择器
6.1后代选择器
选择指定元素的所有指定后代元素,以空格隔开
选择器 指定元素{
属性名:属性值;
...
}
6.2子代选择器
选择指定元素的第一代子元素,以空格隔开
选择器 > 指定元素{ (大于号)
属性名:属性值;
...
}
6.3相邻选择器
选择指定元素的下一个指定元素,两者有相同的父元素,以加号+隔开
选择器 + 指定元素{
属性名:属性值;
...
}
6.4普通兄弟选择器
选择指定元素的所有指定后代元素,两者有相同的父元素,以波浪号隔开
选择器 ~ 指定元素{
属性名:属性值;
...
}