css基础知识2-元素选择器、id选择器、类选择器
程序员文章站
2022-04-25 11:16:55
...
css里面有很多选择器，这次就是为大家介绍一下css里面基本的几个选择器
元素选择器
最常见的 CSS 选择器是元素选择器。
换句话说，文档的元素就是最基本的选择器。
实例：
p {color: "red";}
找到页面上所有的p标签，并将其颜色改为红色显示
效果图如下：
代码如下：
<!DOCTYPE html>
<html lang="en,ch">
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style>
p{
color:red;
}
</style>
</head>
<body>
<p>我是一个标题</p>
</body>
</html>
那么去掉元素选择器再看效果：
代码如下：
<!DOCTYPE html>
<html lang="en,ch">
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
</head>
<body>
<p>我是一个标题</p>
</body>
</html>
那如果有多个p标签，我只想把其中的一个p标签中的文字颜色改为红色，或者将背景改成红色怎么办？这时候就要用到id选择器了
id选择器
ID 选择器允许以一种独立于文档元素的方式来指定样式。
语法规则：
#p3 {color:red;}
ID 选择器前面有一个 # 号 ，后面跟id=“ ”这里面的值，再在大括号里面设计样式
实例：
<!DOCTYPE html>
<html lang="en,ch">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style>
#p2{
color: red;
}
</style>
</head>
<body>
<p id="p1">我是一个标题</p>
<p id="p2">我也是一个标题</p>
<p id="p3">谁不是呢</p>
</body>
</html>
效果图如下：
我们可以看到，只有id为p2的颜色变成了红色，这就是id选择器的作用，存在多个相同标签，只修改你想要修改的一个或多个标签。
多个标签修改代码如下：
<!DOCTYPE html>
<html lang="en,ch">
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style>
#p2,#p3{
color: red;
}
</style>
</head>
<body>
<p id="p1">我是一个标题</p>
<p id="p2">我也是一个标题</p>
<p id="p3">谁不是呢</p>
</body>
</html>
效果图：
既修改字体颜色又修改背景颜色
<!DOCTYPE html>
<html lang="en,ch">
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style>
#p2,#p3{
color: red;
background-color: black;
}
</style>
</head>
<body>
<p id="p1">我是一个标题</p>
<p id="p2">我也是一个标题</p>
<p id="p3">谁不是呢</p>
</body>
</html>
效果图：
类选择器
类选择器允许以一种独立于文档元素的方式来指定样式。
类选择器既可以单独使用，还可以与其他元素结合使用。
.me {color:red;}
.表示class属性，me表示class的值
实例：
<!DOCTYPE html>
<html lang="en,ch">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.me{
color: red;
}
</style>
</head>
<body>
<span class="me">我开玩笑的</span>
<p>我是一个标题</p>
<p class="me">我也是一个标题</p>
<p>谁不是呢</p>
</body>
</html>
效果图如下：
p.c1 {color: red;}
这个表示的是，找到所有p标签里面含有class属性的值为c1的p标签，将其字体变为红色
上一篇： 解决IE6下fixed失效的问题
下一篇： float脱离文档对高度的影响