一、通用选择器
对于初学者来说,是应该最先认识的选择器,通用选择器,它的作用是匹配 html 中的所有元素标签。
语法:*{属性:属性值}。
代码如下(示例):
<style>
*{
margin: 0px;
padding: 0px;
text-align: center;
}
</style>
二、元素选择器
最常见的CSS选择器就是元素选择器。换句话说,文档的元素就是最基本的选择器。选择器通常是某个HTML元素,例如p、img、h1、a等,甚至可以是body或HTML本身。
代码如下(示例):
<style>
h1{color: greenyellow;}
p{font-size: 40px;}
input{width: 150px;}
a{background-color: hotpink;}
</style>
三、类选择器
只有适当标记文档后,才能使用这些选择器。在使用类选择器之前,需要添加文档标记,以便类选择器正常工作。需使用class关键字,并指定一个适当的属性值(类名),类选择器的开头用.(点)进行表示。
代码如下(示例):
<style>
.biaoti{background-color: green;}
.lianjie{font-weight: 900;}
</style>
<body>
<h1 class="biaoti">这是一个标题标签</h1>
<p class="duanluo">这是一个段落标签</p>
<a class="lianjie">这是一个超文链接</a>
</body>
类选择器可以结合元素选择器来使用,例如,您可能希望只有段落显示为红色文本。
<style>
p.duanluo{color:red;}
</style>
选择器会匹配 class 属性包含 duanluo的所有 p 元素,但是其他任何类型的元素都不匹配,不论是否有此 class 属性,可以理解为 “ 其class属性值为duanluo的所有p标签 ”。
如果需要不同的标签有相同的样式属性,可以把类名选择器连在一起使用,中间使用空格分开,类名无关顺序。
<style>
.duanluo .lianjie{
color:red;
text-align: center;
}
</style>
四、ID选择器
某些方面ID选择器类似于类选择器,不过也有一些重要的差别。ID选择器的开头使用#号。注意属性值不要以数字开头,数字开头的ID名在部分浏览器中不支持。
代码如下(示例):
<style>
#duanluo {color: greenyellow;}
#lianjiep {font-size: 40px;}
</style>
<body>
<h1 id="biaoti">这是一个标题标签</h1>
<p id="duanluo">这是一个段落标签</p>
<a id="lianjie">这是一个超文链接</a>
</body>
ID选择器与类选择器的区别
1、相同的class属性值,可以在html中出现多次。id属性值在页面中只能出现一次。
2、一个class的属性可以有多个值,也就是说一个标签可以有多个类。
3、ID选择器以#开头,class选择器以 . 开头。
ID选择器与类选择器的相同点
ID选择器和类选择器是区分大小写的,这取决于文档语言,HTML 和 XHTML 将类和 ID 值定义为区分大小写,所以类和 ID 值的大小写必须与文档中的相应值匹配。
五、属性选择器
如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器
代码如下(示例):
<style>
[type="text"] {
width: 300px;
}
[title]{
color: blue;
}
</style>
<body>
<input type="text" >
<h2 title="Hello world">Hello world</h2>
</body>
不过属性选择器一般用比较少,个人觉得只要了解知道看得懂就可以了。
六、后代选择器
后代选择器又称为包含选择器。后代选择器可以选择作为某元素后代的元素。
举例来说,如果您只希望对p元素中的span元素应用样式。
代码如下(示例):
<style>
p span {color: orange;}
</style>
可以理解为把p元素后代中的所有span元素颜色设置为橙色,而其他的span元素则不会被这个规则选中,中间采用空格分开。
七、子元素选择器
如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器,子选择器使用了大于号(子结合符)。
代码如下(示例):
<style>
h1>strong{
color: orange;
}
</style>
<body>
<h1>今天的<strong>天气是</strong>太阳</h1>
<h1>今天的<em><strong>天气是</strong></em>太阳</h1>
</body>
这个规则会把第一行 h1 下面的 strong 元素变为橙色,但是第二行 h1 中的 strong 不受影响,可以理解为第一行中的strong相当于h1的直接子代,而第二行中的strong相当于是h1的子代的子代。
注意区分后代和子代,两者所表达的意思是不相同的。
八、伪类
伪类用于向某些选择器添加特殊的效果,链接的不同状态都可以以不同的方式显示。
代码如下(示例):
<style>
a:link { color: #FF0000 }
a:visited { color: #00FF00 }
a:hover { color: #FF00FF }
a:active { color: #0000FF }
</style>
a:link | 未访问的链接 |
---|---|
a:visited | 已访问的链接 |
a:hover | 鼠标移动到链接上 |
a:active | 选定的链接 |
特别注意,在 CSS定义中:
a:hover 必须位于 a:link 和 a:visited 之后,这样才能生效,
a:active 必须位于 a:hover 之后,这样才能生效。伪类也可以与CSS类配合使用。
:first-child 伪类的用法
代码如下(示例):
<style>
/*给第一个p元素添加颜色*/
p:first-child { color: red; }
/*给最后一个li元素字体加粗*/
li:last-child { font-weight: 900; }
/*给第四个li元素设置背景颜色*/
li:nth-child(4){ background-color: green; }
</style>
<body>
<div>
<p>这是第一个段落</p>
<ul>
<li>第一个li</li>
<li>第二个li</li>
<li>第三个li</li>
<li>第四个li</li>
<li>第五个li</li>
</ul>
<p>这是第二个段落</p>
</div>
</body>
特别注意:必须在 :first-child 前声明需要应用的标签元素,才能看到效果。
总结
今天的内容就分享到这里,对CSS选择器进行了一个简单概括性的论述。各读者们可在留言处查缺补漏,以供需要的朋友能及时解决问题。