【CSS】选择器

来源：互联网发布：js获取鼠标点击位置编辑：程序博客网时间：2024/06/03 04:52

网页的内容的内容和样式是分离的,html负责其中的内容.而CSS则负责样式.

那么我们是怎么将不同的内容设置为不同的样式的呢.CSS的选择器就为我们提供了一个很多的解决办法.

下面我们就一起来看看CSS的那些选择器和使用方法

选择器有好多，今天主要说的是标签选择器，类选择器，ID选择器。同时还要对子选择器和后代选择器做个对比。

标签选择器:

在html网页中我们会使用的不同的标签,而标签选择器则决定了为哪些标签设置样式,

看下面这段代码和显示效果

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>标签选择器</title><style type="text/css">h1{       color:red;    }</style></head><body>    <h1>标签</h1>    <h1>选择器</h1>    <p>标签选择器</p></body></html>

代码的效果为为h1标签的内容设置为红色.代码执行后我们可以看到,h1标签的内容为红色,而p标签没有变化.

类选择器

在我们使用标签的时候.我们可以为每一个标签设置一个类名.而类选择器就是根据这些类名来进行分组.相同的类名可以同时设置的相同的样式

下面是一个例子和显示效果

</pre><pre name="code" class="html"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>认识html标签</title><style type="text/css">.style{    color:blue;}</style></head><body>  <p class="style">为什么阳光总是照耀在别人身上。我总是被遗忘的角落，这个世界太不公。</p>你有这样的想法和感受吗？<p class="style">其实那是因为你自己躲开了阳光，自己躲在了角落。</p>   <h1 class="style">来吧,让自己成为太阳</h1></body>

从网页显示上我们可以看到.有相同类属性的不同标签;也会有相同的样式.相同的标签没有相同的类名.也不同有相同的样式

ID选择器

同类选择器一样,标签也可以设置具有唯一性质的Id.在CSS中通过使用#id来为其设置样式．因为其设置是唯一的，所以Id名不能重复。而类选择器是可以重复的。

伪类选择器

常用的伪类就是设置鼠标悬停。

a:link {color: #FF0000}/* 未访问的链接 */a:visited {color: #00FF00}/* 已访问的链接 */a:hover {color: #FF00FF}/* 鼠标移动到链接上 */a:active {color: #0000FF}/* 选定的链接 */

另外还可以使用 :first-child 伪类来选择元素的第一个子元素。

除此之外还有通用选择器用来给所有标签设置样式和群组选择器来给几个标签设置样式

后代选择器与子选择器

通过一段代码来看。

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>后代选择器</title><style type="text/css">.red {color:red;}.style2 span{text-decoration:underline;}}</style></head><body><span class="style1"> 为什么阳光总是照耀在别人身上。<span class="red">我总是被遗忘的角落，这个世界太不公。</span>你有这样的想法和感受吗？</span><sapn class="style2">其实那是因为你自己躲开了阳光，自己躲在了角落。<span class="red">来吧,让自己成为太阳</span></span></body>

总的来说后代选择器应用于所有后代，而子选择器则只应用直接后代。

注意：

对于一个元素的相同属性描述，放在下面的会覆盖掉位于上面的属性描述，因此我们在对元素的选择中一定要注意书写顺序

0 0