层次选择器
后代选择器：body p
子选择器：body>p
相邻兄弟选择器：active+p
通用兄弟选择器：active~p
<body>
<p class="active">1</p>
<p>2</p>
<p>3</p>
<ul>
<li>
<p>4</p>
</li>
<li>
<p>5</p>
</li>
<li>
<p>6</p>
</li>
</ul>
</body>结构伪类选择器
ul li:first-child 选中ul的第一个li元素 ，如果ul第一个不是li元素，则不能选中
ul li:last-child 选中ul的最后一个li元素 ，如果ul最后一个不是li元素，则不能选中
ul li:nth-child(n) 选择ul的任意一个位置li元素，如果选那个位置不是li元素，则不能选中
ul li:nth-child(odd) 选中ul奇数位置是li元素的
ul li:nth-child(even) 选中ul偶数位置是li元素的
上面：选中ul中的li,通过ul中的第几个元素来选中li,如果选中的那个位置不是li则无法选中
下面：选中ul中的li,通过li的位置进行选中
ul li:first-of-type 根据类型查找父级标签下的第一个元素
ul li:last-of-type 根据类型查找父级标签下的最后一个元素
ul li:nth-of-type(odd) 根据类型查找父级标签下的指定位置或奇数元素
ul li:nth-of-type(even) 根据类型查找父级标签下的指定位置或偶数元素
类选择器
<html>
<head>
<meta charset="utf-8">
<title>类选择器的使用</title>
<style type="text/css">
.abc{
background-color: red;
}
.abcd{
background-color: #0000FF;
}
</style>
</head>
<body>
<h1>类选择器标题</h1>
<p class="abc">类选择器段落</p>
<p >类选择器段落</p>
<p >类选择器段落</p>
<p class="abcd">类选择器段落</p>
<p >类选择器段落</p>
<p >类选择器段落</p>
</body>
</html>属性选择器
a[title] 选中带有指定属性的标签
a[target=_blank] 选中带有指定的属性=“属性值”的标签
a[id^=la] 选中带有指定的属性=“开头为la的属性值”的标签
a[href$=pdf] 选中带有指定的属性=“结尾为pdf的属性值”的标签
a[class*=item] 选中带有指定的属性=“包含item的属性值”的标签
内部样式
<style>
h1,p{
font-size: 80px;
color: red;
}
</style>外部样式
导入式
<style type="text/css">
@import url("路径");
</style>链接式
<link href="路径" rel="stylesheet" type="text/css" />行内样式
<body>
<h1 style="color: red;">style属性的应用</h1>
<p style="font-size: 40px;color: green;">
直接在HTML标签中设置的样式
</p>
</body>选择器优先级: id>class>标签
样式优先级：行内样式>内部样式>外部样式
343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
