什么是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 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文档书籍教程。都可以直接共享给各位。
【什么是css选择器 css3中5种常见基本选择器】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效果图：