什么是css选择器？css3中5种常见的基本选择器（代码实例）
本章我们给大家讲解一下什么是css选择器？css3中5种常见的基本选择器。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
一：什么是css选择器？
CSS是一种用于屏幕上渲染html，xml等一种语言，CSS主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素，此时就需要我们所说的选择器。在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。选择器主要是用来确定html的树形结构中的DOM元素节点。
二：css3中5种常见的基本选择器
css3中的选择器种类有很多，下面介绍的是5种常见的基本选择器：通配选择器，类选择器，元素选择器， ID选择器和群组选择器。
1.通配符选择器（所有浏览器支持）
通用选择器用*来表示，用来选择所有元素，，也可以选择某个元素下的所有元素；
*{marigin: 0;
padding: 0;
font-size: 14px;
}上面代码大家在reset样式文件中看到的肯定不少，他所表示的是，所有元素的margin和padding都设置为0，字体大小都设置为14px,另外一种就是选择某个元素下的所有元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通配符选择器</title>
<style>
.demo * {
width: 50px;
height: 50px;
border:1px solid blue;
margin: 10px;
}
</style>
</head>
<body>
<div class="demo">
<div>1</div>
<p>2</p>
<span>3</span>
</div>
</body>
</html>效果图：
我们可以看到在demo元素里的三个子元素div，p，span都是分别没有设置css样式的，但只要我们设置了demo元素下的所有元素的统一样式，那么demo元素里的三个子元素div，p，span就会出现样式。
2.类选择器 （所有浏览器都支持类选择器，但多类选择器（.className1.className2）不被ie6支持。）
类选择器根据类名来选择，前面以”.”来标志，是以一独立于文档元素的方式来指定样式，使用类选择器之前需要在html元素上定义类名，换句话说需要保证类名在html标记中存在。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.demo {
width: 200px;
height: 200px;
margin: 50px auto;
background: #2DC4CB;
}
</style>
</head>
<body>
<div class="demo">类选择器</div>
</body>
</html>效果图：
3.元素选择器（所有浏览器支持）
元素选择器（标签名选择器），是css3选择器中最常见而且最基本的选择器。元素选择器其实就是文档的元素，如html,body,p,div等等下下面例子中选择了span元素，并设置了字体颜色为红色。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style>
.demo {
width: 200px;
height: 200px;
margin: 50px auto;
}
span{
color: red;
}
</style>
</head>
<body>
<div class="demo">
<p>这里使用<span>元素选择器</span>改变了样式</p>
</div>
</body>
</html>效果图：
4.ID选择器（所有浏览器都支持）
ID选择器和上面说的类选择器是很相似的，在使用ID选择器之前也需要先在html文档中加注ID名称，这样在样式选择器中才能找到相对应的元素，不同的是ID选择器是一个页面中唯一的值，我们在类使用时是在相对应的类名前加上一个“.”号（.className）而id选择器是在名称前使用"#"如(#demo)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style>
#demo {
width: 200px;
height: 200px;
margin: 50px auto;
background: #FF0000;
}
</style>
</head>
<body>
<div id="demo">ID选择器</div>
</body>
</html>效果图：
ID选择器有几个地方需要特别注意：
第一：一个文档中一个id选择器只充许使用一次，因为id在页面中是唯一的；
第二，id选择器不能像类选择器一样多个合并使用，一个元素只能命名一个id名；
第三，可以在不同的文档中使用相同的id名，比如说在“test.html”中给h1定了“＃important”,也可给“test1.html”中定义p的id为"#important"，但前提是不管在test.html还是test1.html中只充许有一个id叫"#important"的存在。
5.群组选择器（所有浏览器都支持）
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号“，”隔开，这个逗号告诉浏览器，规则中包含多个不同的选择器，如果不有这个逗号，那么所表达的意就完全不同了，省去逗号就成了我们前面所说的后代选择器，这一点大家在使用中千万要小心加小心。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>群组选择器</title>
<style>
.demo {
width: 200px;
height: 200px;
margin: 50px auto;
background: #FF0000;
}
p,li{
color: blue;
}
.demo1,.demo2{
color: #fff;
}
</style>
</head>
<body>
<div class="demo">
<p>这里是一个段落!</p>
<ul><li>列表</li></ul>
<a href="#" class="demo1">链接一</a><br>
<span class="demo2">文字文字！</span>
</div>
</body>
</html>效果图：
以上是什么是css选择器？css3中5种常见的基本选择器（代码实例）的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
css3怎么实现花边边框
Sep 16, 2022 pm 07:11 PM
在css中，可以利用border-image属性来实现花边边框。border-image属性可以使用图片来创建边框，即给边框加上背景图片，只需要将背景图片指定为花边样式即可；语法“border-image: url(图片路径) 向内偏移值 图像边界宽度 outset 是否重复;”。
使用:nth-child(n+3)伪类选择器选择位置大于等于3的子元素的样式
Nov 20, 2023 am 11:20 AM
使用:nth-child(n+3)伪类选择器选择位置大于等于3的子元素的样式，具体代码示例如下：HTML代码：<divid="container"><divclass="item">第一个子元素</div><divclass="item"&
css中id选择符的标识是什么
Sep 22, 2022 pm 03:57 PM
在css中，id选择符的标识是“#”，可以为标有特定id属性值的HTML元素指定特定的样式，语法结构“#ID值 {属性 : 属性值;}”。ID属性在整个页面中是唯一不可重复的；ID属性值不要以数字开头，数字开头的ID在Mozilla/Firefox浏览器中不起作用。
javascript选择器失效怎么办
Feb 10, 2023 am 10:15 AM
javascript选择器失效是因为代码不规范导致的，其解决办法：1、把引入的JS代码去掉，ID选择器方法即可有效；2、在引入“jquery.js”之前引入指定JS代码即可。
CSS新特性学习：方向裁切overflow:clip
Oct 11, 2022 pm 07:12 PM
本篇文章将介绍一个新特性，从 Chrome 90 开始，overflow 新增的一个新特性 -- overflow: clip，使用它，轻松的对溢出方向进行控制。
css中的选择器包括超文本标记选择器吗
Sep 01, 2022 pm 05:25 PM
不包括。css选择器有：1、标签选择器，是通过HTML页面的元素名定位具体HTML元素；2、类选择器，是通过HTML元素的class属性的值定位具体HTML元素；3、ID选择器，是通过HTML元素的id属性的值定位具体HTML元素；4、通配符选择器“*”，可以指代所有类型的标签元素，包括自定义元素；5、属性选择器，是通过HTML元素已经存在属性名或属性值来定位具体HTML元素。
一文了解lxml支持的选择器有哪些
Jan 13, 2024 pm 02:08 PM
lxml是一个功能强大的Python库，用于处理XML和HTML文档。作为一种解析工具，它提供了多种选择器来帮助用户方便地从文档中提取所需的数据。本文将详细介绍lxml支持的选择器。lxml支持以下几种选择器：标签选择器（ElementTagSelector）：通过标签名称来选择元素。例如，通过使用<tagname>来选择具有特定标签名称的元
详解用SVG给 favicon 添加标识
Sep 07, 2022 am 10:30 AM
怎么使用SVG给 favicon 添加标识？下面本篇文章给大家介绍一下使用 SVG 生成带标识的 favicon的方法，希望对大家有所帮助！
