CSS学习笔记2：CSS基础选择器

编程大学姐远春儿

已于 2024-07-10 13:29:41 修改

阅读量709

点赞数 3

分类专栏：前端基础文章标签： css

于 2017-02-10 09:49:48 首次发布

本文链接：https://blog.csdn.net/sinat_34647836/article/details/54962871

版权

前端基础专栏收录该内容

19 篇文章 4 订阅

订阅专栏

在Word文档中，如果想给标题加粗、标红、居中，我们首先需要选中标题，再更改Word最上方工具栏中相应的标签即可。相似的，CSS要想给页面添加绚丽多彩的样式，第一步就要选中需要改变的样式的内容，我们叫CSS选择器。CSS选择器种类很多，在上篇文章《CSS学习笔记1：初始CSS及其常见属性》里所说的CSS基本语法中的使用的选择器，只是其中的一种——“标签选择器”。下面这两篇文章，咱们就聊聊CSS选择器的种类以及使用方法吧，有老师说，使用CSS选择器的水平是一个前端工程师整体水平的重要体现，很重要的哦~

1.标签选择器

就是用标签名来当做选择器。基本格式是：

标签名{
   color: red; 	
}

1）所有标签都能够当做选择器
2）选择所有的相同标签，体现一种共性。

例：在一个网页上，希望所有的超链接都没有下划线,希望所有的段落字体都是绿色：

<head>
<style type=“text/css”>
a{
	 /*去掉下划线：*/
	 text-decoration: none; 
	 }
p{	
	 color: green;
	 }
</style>

2.id选择器

基本语法：

#id名{  
     color: red;
     }

示例：

<head>
	<title>笑话一则</title>
	<style type="text/css">
	#wuwu{
		font-weight: bold;
		color: purple;
		font-size: 40px;
	}
	</style>	
</head>
	<body>
		<h1 id="wuwu">年轻人要善于观察</h1>
		<p>某教授在田间授课：科学研究要不怕脏</p>
		<p>然后他蹲下来，用手指戳了一下地上的牛粪</p>
		<p>然后把手指放到嘴里舔净</p>
	</body>

网页显示如图：

这里写图片描述

注意：
1）任何的标签都可以有id，id的命名要以字母开头，可以有数字、下划线，严格区分大小写，也就是说mm和MM是两个不同的id。
2）同一个页面内的所有标签不能有相同的id。

3.类选择器

所谓的类，就是class属性，class属性和id非常相似，任何的标签都可以携带class属性。

基本格式：

.类名{
		color: red;
}

需要注意的是：
1） class可以重复，同一个页面上可以有多个标签同时属于某一个类；
2）同一个类可以同时携带多个类名，用空格隔开。
3）每一个类要尽可能小，有“公共类”概念，这些类可以提供“公共服务”，任何一个标签一旦携带这个类名，就有相应的样式变化。
4）类上样式，id上行为。js要通过id属性得到标签添加动态效果，所以css层面尽可能的用class，除非极特殊的情况可以用id。

示例：

<html>
	<head>
		<title>笑话一则</title>
		<style type="text/css">
			.wuwu{
				font-weight:bold;
			}
			.haha{
				color:purple;
			}
			.xixi{
				text-decoration:underline;
			}
		</style>	
	</head>
	<body>
		<h1 >年轻人要善于观察</h1>
		<p class="haha xixi">某教授在田间授课：科学研究要不怕脏</p>
		<p class="wuwu haha">然后他蹲下来，用手指戳了一下地上的牛粪</p>
		<p class="xixi wuwu">然后把手指放到嘴里舔净</p>
	</body>
</html>

网页效果如下：
这里写图片描述