什么是css选择器？css基本选择器的总结（九种）
什么是css选择器？css选择器就是指定CSS要作用的标签，那个标签的名称就是选择器。意味：选择哪个容器。HTML页面中的元素就是通过CSS选择器进行控制的。那么，css选择器有哪些呢？下面我们来看一看css常用的选择器
1 : css通配符选择器
通配符选择器用星号(*)来表示,例如:
*{
font-size : 12px;
}表示所有的元素的字体大小都是12px；
2 : css分组选择器
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。例如：
p, li {
line-height:20px;
color:#c00;
}
#main p, #sider span {
color:#000;
line-height:26px;
}使用分组选择器，将会大大的简化CSS代码，将具有多个相同属性的元素，合并分组进行选择，定义同样的CSS属性，这大大的提高了编码效率，同时也减少了CSS文件的体积。
3 : css标签选择器
一个完整的HTML页面是有很多不同的标签组成，而 标签选择器，则是决定哪些标签采用相应的CSS样式,例如:
p{
color: red;
}这段代码会让所有的p标签都变成红色
4 : css类选择器
类选择器以class属性中有指定类名的任何元素为目标,类选择器以一个"."符号开头例如:
.info {
color:black;
}这样会让所有类名为info的类的元素颜色都变为黑色
5 :css ID选择器
ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式;ID选择符以一个“#”符号开头。例如:
#demop{
color:#000;
}这里代表id为demop的元素的设置它的字体颜色为黑色。
6 : css伪类选择器
有时候还会需要用文档以外的其他条件来应用元素的样式，比如鼠标悬停等。这时候我们就需要用到伪类了。以下是链接应用的伪类定义。例如:
a:link{
color:green ;
font-size: 50px
}
a:hover{
color:pink;
font-size: 50px
}
a:active{
color:yellow;
font-size: 50px
}
a:visited{
color:red;
font-size: 50px
}效果:
打开网页时标签为绿色
将鼠标放在标签上时标签为粉色
点击标签是标签为黄色
点击后标签为红色.
7 : css后代选择器
后代选择器用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。后代选择器中的元素不仅仅只能有两个，对于多层祖先后代关系，可以有多个空格加以分开，如id为a、b、c的三个元素，则后代选择器可以写成#a #b #c{}的形式，只要对祖先元素的选择在后代元素之前、中间以空格分开即可。例如:
#people em{
color: red;
}这一规则把ID值为“people”的元素中包含任何em元素的颜色设置为红色。
8 : css组合选择器
可以把两种或者多种类型的选择符组合式使用;例如:
p.info {
color:blue;
}它只选择属于info类的段落，属于该类的别种元素和不属于info类的其他段落将被忽略。
9 : css属性选择器
格式：基本选择器[属性 = ‘属性值’]{ },也可以只写属性,例如:
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
input[type = 'text'] {background-color: red}
input[type = 'password'] {background-color: pink}
</style>
</head>
<body>
<form>
name:<input type = "text"><br/>
pass:<input type = "password">
</form>
</body>
</html>运行结果： 
css选择器优先级大小:
!important > 行间样式>ID选择器 > 类|属性 选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
当有一些复杂选择器不能通过优先级的大小比出,那么我们就要用到权重进行计算
css选择器权重计算:
| !important |
无穷大 |
| 行间样式 | 1000 |
| ID选择器 | 100 |
| 类|属性|伪类 选择器 |
10 |
|
标签选择器 通配符选择器 |
1 0 |
将每一行上的所有选择器转化为这些数值进行相加得的结果越大则优先级越高!
相关文章推荐：
相关课程推荐：
以上是什么是css选择器？css基本选择器的总结（九种）的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
如何调整HTML文本框的大小
Feb 20, 2024 am 10:03 AM
HTML文本框大小的设定在前端开发中是非常常见的操作。本文将介绍如何设置文本框的尺寸，并提供具体的代码示例。在HTML中，可以使用CSS来设置文本框的尺寸。具体的代码如下：input[type="text"
如何调整WordPress主题避免错位显示
Mar 05, 2024 pm 02:03 PM
如何调整WordPress主题避免错位显示，需要具体代码示例WordPress作为一个功能强大的CMS系统，受到了许多网站开发者和站长的喜爱。然而，在使用WordPress创建网站时，经常会遇到主题错位显示的问题，这对于用户体验和页面美观都会造成影响。因此，合理调整WordPress主题以避免错位显示是非常重要的。本文将介绍如何通过具体的代码示例来进行主题调
css选择器优先级是什么
Apr 25, 2024 pm 05:30 PM
CSS 选择器优先级按如下顺序决定：特殊性（ID > 类 > 类型 > 通配符）来源顺序（行内 > 内部样式表 > 外部样式表 > 用户代理样式表）声明顺序（靠后的声明优先）重要性（!important 强制提高优先级）
css选择器排除部分的元素是什么
Apr 06, 2024 am 02:42 AM
:not() 选择器可用于排除特定条件的元素，其语法为 :not(selector) {样式规则}。示例：:not(p) 排除所有非段落元素，li:not(.active) 排除非活动列表项，:not(table) 排除非表格元素，div:not([data-role="primary"]) 排除非 primary 角色的 div 元素。
了解CSS选择器通配符的权重和优先级的深层次理解
Dec 26, 2023 pm 01:36 PM
深入理解CSS选择器通配符的权重和优先级在CSS样式表中，选择器是用来指定样式应用于哪些HTML元素的重要工具。选择器的优先级和权重决定了当多个规则同时作用于一个HTML元素时，应用哪个样式。通配符选择器是CSS中一种常见的选择器。它使用“*”符号表示，表示匹配所有HTML元素。通配符选择器虽然简单，但在某些情况下非常有用。然而，通配符选择器的权重和优先级也
css选择器哪些是高级选择器
Oct 07, 2023 pm 02:59 PM
css选择器中的高级选择器有后代选择器、子元素选择器、相邻兄弟选择器、通用兄弟选择器、属性选择器、类选择器、ID选择器、伪类选择器和伪元素选择器等。详细介绍：1、后代选择器使用空格分隔的选择器，表示选取某个元素的后代元素；2、子元素选择器使用大于号分隔的选择器，表示选取某个元素的直接子元素；3、相邻兄弟选择器使用加号分隔的选择器，表示选取紧接在某个元素后面的第一个兄弟元素等等。
学会使用CSS选择器的基本语法
Jan 13, 2024 am 11:44 AM
掌握基本的CSS选择器语法，需要具体代码示例CSS选择器是前端开发中非常重要的一部分，它可以用来选择和修改HTML文档的各个元素。掌握基本的CSS选择器语法对于编写高效的样式表是至关重要的。本文将介绍一些常见的CSS选择器以及对应的代码示例。元素选择器元素选择器是最基本的选择器，可以通过元素的标签名来选择对应的元素。例如，要选择所有的段落（p元素），可以使用
深入学习响应式布局框架：适合初学者到专家的详尽指南
Feb 19, 2024 pm 05:43 PM
响应式布局框架解析：从初学者到专家的必备指南随着移动设备的普及和多样化，响应式布局成为了现代Web设计的必备技能。响应式布局框架以其简单、灵活和可维护的特点，成为了开发者们的首选工具。然而，对于初学者来说，学习和理解响应式布局框架可能会感到有些困惑。本文将从初学者到专家，为您提供一个详细的指南，帮助您掌握响应式布局框架，同时提供具体的代码示例。什么是响应式布
