什么是css选择器(css选择器是什么)

请用语音读文章

本章我们给各位教学一下什么是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 htmlhtml 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" div1/div p2/p span3/span /div /body/html效果图：

我们可以观看到的在demo元素里的三个子元素div。p。span都是分别没有设置css样式的。但只要我们设置了demo元素下的任何元素的统一样式。那么demo元素里的三个子元素div。p。span就会出现样式。

对了。在这里说一下。我目前是在职web前端研究。如果你现在正在学习前端。知道前端。希望变成一名合格的web前端研究工程师。在入门学习前端的过程当中有遇见所有关于学习途径。学习路线。学习效率等方面的问题。都可以随时关注并私信我：前端。我都会根据各位的问题给出针对性的反馈。缺乏基本入门的视频教程也完全可以直接来找我。我这边有最新的web前端基本精讲视频教程。 还有我做web前端技术这段时光整理的有的学习手册。面试题。研究工具。PDF文档书籍教程。都可以直接共享给各位。

2.类选择器 （任何浏览器都接受类选择器。但多类选择器（.className1.className2）不被ie6接受。）

类选择器根据类名来选择。前面以”.”来标志。是以一独立于文档元素的方法来指定样式。使用类选择器以前需要在html元素上定义类名。换句话说需要保证类名在html标记中存在。

!DOCTYPE htmlhtml 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 htmlhtml 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 htmlhtml head meta charset="UTF-8" titleID选择器/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”中给h3定了“＃important”,也可给“test1.html”中定义p的id为"#important"。但前提是不管在test.html还是test1.html中只充许有一个id叫"#important"的存在。

5.群组选择器（任何浏览器都接受）

当几个元素样式属性一样时。可以齐心全力调用一个声明。元素之间用逗号分隔。群组选择器是将有着相一样式的元素分组在一起。每一个选择器之间使用逗号“。”隔开。这种逗号跟你说浏览器。规则中包含多个不一样的选择器。如果不有这种逗号。那么所表示的意就完整不一样了。省去逗号就成了我们前面所说的后代选择器。这一点各位在使用中千万要小心加小心。

!DOCTYPE htmlhtml 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 ulli列表/li/ul a href="#" class="demo1"链接一/abr span class="demo2"文字文字！/span /div /body/html效果图：

以上就是什么是css选择器？css3中5种常见的基础选择器（代码实例）的仔细内容。再多请关注我！！！

以上就是由优质生活领域创作者 生活常识网 整理编辑的，如果觉得有帮助欢迎收藏转发~