<!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普通兄弟选择器 ?? ??? ??? ??? ??? ?选择指定元素的所有指定后代元素,两者有相同的父元素,以波浪号隔开 ?? ??? ??? ??? ??? ?选择器 ~ 指定元素{ ?? ??? ??? ??? ??? ??? ?属性名:属性值; ?? ??? ??? ??? ??? ??? ?... ?? ??? ??? ??? ??? ?}
|