我们来看一看常用的几个选择器:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器</title>
<!--
页面内联通过<style></style>标签在页面内定义一些命名的样式组,
页面中的标签可以引用这些样式组的名字来应用样式。
-->
<style>
/**
*类选择器(伪类)
*一定是点开头,这里我们要说的是,
*如果在页面体内有样式应用了<style>中的类,
*那么该对象就有了类里面定义的相应属性
*/
.text1{
color:blue;
font-family:"微软雅黑";
font-size:"30" ;
}
/**
*标签选择器样式(重定义样式)
*这种样式名要写成和标签一样的名字,
*那么页面中该标签所有的样式,
*都会被定义成我们在标签选择器中所定义的样式。
* (即在操作之前、操作时、操作之后标签得样式分别不同)
*/
/*以下标签选择器为伪类*/
/*伪类可以给标签得不同状态定义样式*/
a:link{
color:black;
text-decoration:none;
}
a:hover{
color: red;
text-decoration: none;
}
a:active{
color:blueviolet;
text-decoration: none;
}
a:visited{
color: saddlebrown;
text-decoration: none;
}
b{
color:saddlebrown;
}
/**
* 星选择样式器:
* 作用是所有的标签属性都由星选择样式器决定
*这是有就近原则规定的
*/
*{
color:skyblue;
}
/**
* 复合选择器
*/
/* 背景样式:这种样式由class来应用*/
.bg1{
background-color:blanchedalmond;
}
.text1{
border:double darkblue ipx;
}
/**
* 交叉选择器
* 既有重定义,又有类定义。
*/
h1.text1{
/*倾斜*/
font-style:italic;
}
/**
* 并集选择器
* (复合样式)
* 既有h3字体大小,又有.ttt伪类的字体样式。
*/
h3,.ttt{
font-family: "楷体";
}
/**
* 后代选择器
*/
.text1 h3{
border:double darkblue 1px;
}
/**
* id选择器:
* 样式必须根据id名称修改对应的样式
* 对某一个样式中的标签进行重定义,
* 就适合用该选择器。
*/
#st{
color:green;
}
</style>
</head>
<body>
<h1>我想看看怎么显示!<h1>
<h2 class="ttt">我想看看怎么显示!</h2>
<h3>我想看看怎么显示!</h3>
<h4>我想看看怎么显示!</h4>
<!--
这里要注意的是,后代选择器与子元素选择器的区别就在于,
后代选择器包括“孙子”,而子元素选择器只包括“儿子”。
-->
<div class="text1">
<div>
<h3>孙子子也是后代</h3>
</div>
<h3>后代选择器</h3>
<!--区别在于有没有加框-->
<h2>这个不需要应用后代选择器的样式</h2>
<div>段落块</div>
<h1 class="text1 bg1">这是准备应用类样式的内容</h1><br />
<h1>不准备应用重定义样式的内容</h1><br />
<h3 class="ttt">这是准备应用类样式的内容</h1><br />
<a href="#">这是准备应用类样式的内容</a><br />
<a href="#">这是准备应用类样式的内容</a><br />
<a href="#">这是准备应用类样式的内容</a><br />
<!--<b>的作用是字体加粗-->
<b>应用重定义选择器样式</b><br />
<b>应用重定义选择器样式</b><br />
<b>应用重定义选择器样式</b><br />
<!--在id选择器下的样式必须要有一个名字-->
<div id="st">
这是准备应用类样式的内容
</div>
</body>
</html>