您的位置：首页 > Web前端 > CSS

css选择器

2017-01-21 00:00 183 查看

赶紧来系统的认识一下CSS选择器吧！

CSS基础选择器（作用:选取元素）

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器，CSS基础选择器有四种：

标签选择器

标记选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS样式。其基本语法格式如下：

标记名{属性1:属性值1;属性2:属性值2;属性3:属性值3}

标记选择器最大的优点是能快速为页面中同类型的标记统一样式，同时这也是他的缺点，不能设计差异化样式。
（直接复制代码到你的编辑器中查看效果哦）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
color: rgb(255,0,0);
}
h1 {
color: rgb(0,255,0);
}
h2 {
color: rgb(0,0,255);
}
</style>
</head>
<body>
<p>段落</p>
<h1>标题1</h1>
<h2>标题2</h2>
</body>
</html>

类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

.类名{属性1:属性值1;属性2:属性值2;属性3:属性值3}
类选择器最大的优势是可以为元素对象定义单独或相同的样式。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.p1 {
color: red;
}
.p2 {
color: pink;
}
.p3 {
color: yellow;
}
.p4 {
color: green;
}
</style>
</head>
<body>
<p class="p1">P1</p>
<p class="p2">P2</p>
<p class="p3">P3</p>
<p class="p4">P4</p>
</body>
</html>

id选择器

id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：

#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3}
该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#p1 {
color: right;
}
#p2 {
color: green;
}
</style>
</head>
<body>
<p id="p1">P1</p>
<p id="p2">P2</p>
</body>
</html>

通配符选择器

通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

*{属性1:属性值1;属性2:属性值2;属性3:属性值3}

例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

*{
margin:0;		/*定义外边距*/
padding:0;		/*定义内边距*/
}

并集选择器

并集选择器必须同时满足所有的条件，选择器中间使用逗号隔开（英文逗号）:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p ,.p1 ,#p2{
color: red ;
}
</style>
</head>
<body>
<p class="p1">含有类的p标签</p>
<p>只是p标签本身</p>
<div>只是div标签本身</div>
<h1 class="p1">含有类的h1标签</h1>
<span id="p2">含有id名的span标签</span>
</body>
</html>

交集选择器

“交集选择器”由两个选择器直接链接构成，其结果是选中各自元素范围的交集。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p.p1#p2 {
color: red;
}
</style>
</head>
<body>
<p class="p1"  id="p2">含有类和id的p标签</p>
<p>只是p标签</p>
<div>只是div标签</div>
<h1 class="p1">含有类的h1标签</h1>
</body>
</html>

后代选择器

后代选择器使用空格隔开两个选择器，符合条件的是父选择器的所有子代选择器。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father p {
color: red;
}
</style>
</head>
<body>
<div class="father">
<p>这是p</p>
<div>这是div</div>
<h1>这是h1</h1>
<div>
<p>这是最里面的p</p>
</div>
</div>
<p>这是div同级的p</p>
</body>
</html>

子代选择器

子代选择器使用'>'连接，只选择到直接子代选择器。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father>p {
color: red;
}
</style>
</head>
<body>
<div class="father">
<p>这是直接子代p</p>
<div>这是直接子代div</div>
<h1>这是直接子代h1</h1>
<div>
<p>这不是直接子代p</p>
</div>
</div>
<p>这是同级p</p>
</body>
</html>

注意点

选择器的命名规则：命名的取值范围:0~9,a~z,A~Z,_,-;不能以数字开头。

如果交集选择器中有标签选择器，则标签选择器必须写在前面。

怎么样，你了解了吗？如果还是懵懂，那就只好多看看再多写几遍就好啦，加油！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css选择器后代选择器子代选择器并集选择器基本选择器

相关文章推荐

新的分享

章节导航