一、选择器
选择器:用来选择标签的,给选中的标签加样式。
常用的选择器有8+1种:
1)标签选择器
标签名{
样式规则
}
<style type="text/css">
p{
font-size:20px;
color:red;
background-color:#000;
}
</style>
<p>人生若只如初见,何事悲风秋画扇。</p>
2)id选择器
<style type="text/css">#_1p{
font-size:20px;
color:red;
background-color:#000;
}
</style>
</head>
<body>
<p id="_1p">人生若只如初见,何事悲风秋画扇。</p>
<p id="_2p">第一最好不相见,如此便可不想恋。</p>
<p id="_1p">第二最好不相知,如此便可不想思。</p>
3)类选择器
<style type="text/css">
/*id唯一标识,虽然可以重用样式,但是js中取不到单一id的值,class可以重复*/
/*带标签名的类选择器*/
p.p1{
font-size:20px;
color:red;
background-color:#000;
}
</style>
<p id="_1p" class="p1">人生若只如初见,何事悲风秋画扇。</p>
<p id="_2p">第一最好不相见,如此便可不想恋。</p>
<p class="p1">第二最好不相知,如此便可不想思。</p>
4)组合选择器
<style type="text/css">
/*id唯一标识,虽然可以重用样式,但是js中取不到单一id的值,class可以重复*/
/*.p1{
font-size:20px;
color:red;
background-color:#000;
}
#_1p{
font-size:20px;
color:red;
background-color:#000;
}
防止代码冗余,提高复用性*/
.p1,#_1p{
font-size:20px;
color:red;
background-color:#000;
}
</style>
<p id="_1p" class="p1">人生若只如初见,何事悲风秋画扇。</p>
<p id="_2p">第一最好不相见,如此便可不想恋。</p>
<p class="p1">第二最好不相知,如此便可不想思。</p>
5)子代选择器 和 后代选择器
①<style type="text/css">
/*子代选择器*/
div>p{
font-size:20px;
color:red;
background-color:#000;
}
</style>
<div>
<p id="_1p" class="p1">人生若只如初见,何事悲风秋画扇。</p>
<span><p id="_2p">第一最好不相见,如此便可不想恋。</p></span>
<p class="p1">第二最好不相知,如此便可不想思。</p>
</div>
② <style type="text/css">
/*后代(子孙)选择器*/
div p{
font-size:20px;
color:red;
background-color:#000;
}
</style>
<div>
<p id="_1p" class="p1">人生若只如初见,何事悲风秋画扇。</p>
<span><p id="_2p">第一最好不相见,如此便可不想恋。</p></span>
<span><a href="子代选择器.html"><p class="p1">第二最好不相知,如此便可不想思。</p></a></span>
</div>
6)通配符选择器,整个页面都被选中
<style type="text/css">
/*即所有的标签都是相同的样式规则*/
*{
font-size:20px;
color:red;
background-color:#000;
}
</style>
<p id="_1p" class="p1">人生若只如初见,何事悲风秋画扇。</p>
<p id="_2p">第一最好不相见,如此便可不想恋。</p>
<p class="p1">第二最好不相知,如此便可不想思。</p>
</body>
7)属性选择器
<style>
div[data-test="haha"]{
color:blue;
}
/*class属性中包含import选择器*/
p[class~="import"]{
color:green;
}
/*class属性中包含import字符的*/
p[class*="import"]{
color:orange;
}
/*class属性中以import开头的*/
p[class^="import"]{
color:red;
}
/*class属性中以import结尾的*/
p[class$="import"]{
color:balck;
}
</style>
<div data-test="haha">
111
</div>
<div data-test="hihi">
222
</div>
<p class="import1 aaa bbb">p标签</p>
8)相邻兄弟选择器
<style>
/*h1下的第一个p标签*/
h1+p{
color:red;
}
/*h1下的所有标签*/
h1~p{
color:green;
}
</style>
<h1>一级标题</h1>
<p>p标签</p>
<p>p标签</p>
<p>p标签</p>
<p>p标签</p>
<p>p标签</p>
9)伪类
定义在标签的状态上,许多浏览器支持不同类型的伪类,没有统一标准,但是超链接的伪类所有浏览器都支持,一共有四种状态:
a:link 未被访问的状态
a:visited 访问后的状态
a:hover 鼠标悬停状态
a:active 激活选定状态(即点击到松开鼠标的状态)
基本语法:
超连接状态{
css样式规则
}
后定义者优先
<style type="text/css">
a{ /*去掉字体下划线*/
text-decoration: none;
}
a:link{
color:green;
}
a:visited{
color:gray;
}
a:hover{
color:blue;
font-size:30px;
}
a:active{
color:red;
}
</style>
.class1{
font-size:20px;
color:red;
background-color:#000;
}
.class2{
color:#bad0ef;
}
</style>
p{
color:orange;
}
#p1{
color:green;
}
.p2{
color:red;
}
</style>
table.tableClass{
margin: 0px auto;
text-align: center;
width:80%;
}
tr.tableHead{
background-color:black;
color:#fff;
}
tr.winBlue{
background-color:#bad0ef;
color:blue;
}
tr:hover{
color:green;
}
</style>
<!--<table align="center" width="80%">
<tr class="tableHead">
<th width="8%">商品编号</th>
<th width="22%">商品名称</th>
<th width="40%">商品描述</th>
<th width="10%">商品种类</th>
</tr>
<tr align="center">
<td>1</td>
<td>Macbook air</td>
<td>苹果轻薄笔记本</td>
<td>笔记本</td>
</tr>
<tr align="center" class="winBlue">
<td>2</td>
<td>iPad air2</td>
<td>苹果最新平板电脑</td>
<td>平板电脑</td>
</tr>
<tr align="center">
<td>3</td>
<td>iphone6 plus</td>
<td>苹果最新手机</td>
<td>手机</td>
</tr>
</table> -->
<table class="tableClass">
<tr class="tableHead">
<th>商品编号</th>
<th>商品名称</th>
<th>商品描述</th>
<th>商品种类</th>
</tr>
<tr>
<td>1</td>
<td>Macbook air</td>
<td>苹果轻薄笔记本</td>
<td>笔记本</td>
</tr>
<tr class="winBlue">
<td>2</td>
<td>iPad air2</td>
<td>苹果最新平板电脑</td>
<td>平板电脑</td>
</tr>
<tr>
<td>3</td>
<td>iphone6 plus</td>
<td>苹果最新手机</td>
<td>手机</td>
</tr>
</table>