css中最基本几个选择器

css中有四种不同的选择器

①类选择器,又叫class选择器
.类选择器
{
属性名:属性值;
...
}
/*类选择器*/
.s1
{

font-weight:bold;
font-size:16px;
}
②id选择器
#id选择器名
{
属性名:属性值;
}
/*id选择器*/
#id1
{

font-size:40px;
}
③html元素选择器
html元素名称
{
属性名:属性值;
}
④通配符选择器

检索或设置对象四边的外补丁。默认值为 0 0。
如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。如果只提供一个,将用于全部的四边。如果提供两个,第一个用于上-下,第二个用于左-右。如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
*{
margin-top:0px;上边距为0
margin-left:0px;左边距为0
margin:10px 30px 20px 40px 
//有经验的程序员,如下
margin:0px;
padding:0px;
}
通配符选择器
该选择器可以用到所有的html元素,但是其优先权最低
*{
属性名:属性值;
... ...
}

简单的说,选择器就是在css中创建,而在网页页面(html,jsp,php,asp.net)中使用。
四个选择器的优先级
id选择器>class选择器>html选择器>通配符选择器

父子选择器是四个选择器的组合使用
/*父子选择器*/
对id1下的span进行修饰(中间必须加空格)
#id1 span{
color:red;
font-style:italic;
}
#id1 span span{
color:green;
}
#id1 span span a{
color:blue;
}
通过上面的总结
①父子选择器可以有多级(但是在实际的开发中不超过三层)
②父子选择器有严格的层级关系
③父子选择器不局限于什么类型的选择器
可以是id选择器 类选择器 ....
#id1 span span a
.s1 #id span
div #id .s2
1、id选择器和类选择器都可以有父子选择器
2、一个元素可以同时有id选择器和类选择器
3、id选择器的优先级高于类选择器
4、一个元素最多有一个id选择器,但是可以有多个类选择器
当一个元素被多个类选择器修饰的时候,各个类选择器之间用空格隔开
使用方法如下
<元素 class="类选择器1 类选择器2"/>html部分
当两个类选择器发生冲突的时候,则以写在css文件中的那个类选择器为准
5、在css文件中如果有多个类/id选择器,他们都有相同的部分,我们可以把相同的css样式放在一起
/*把各个类选择器的公共部分,单独抽取写一份,好处是可以减少css文件的冗余*/
把各个选择器中相同的部分抽取出来,单独写一份,各个选择器之间用逗号隔开
6、CSS文件本身会被浏览器从服务器下载到本地,才能显示效果

时间: 2025-01-04 23:10:26

css中最基本几个选择器的相关文章

css 中包含(后代)选择器与子选择器的区别

子选择器:即大于号(>),用于选择指定标签元素的第一代子元素..span>li{XXXX}. 包含(后代)选择器:即加入空格,用于选择指定标签的后辈元素..fisrt span{XXXX}. 注意:这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代.而后代选择器是作用于所有子后代元素.后代选择器通过空格来进行选择,而子选择器是通过">"进行选择. 总结:>作用于元素的第一代后代,空格作

浅谈css中选择器的优先级

学习web前端,主要学习的课程html5,css,js,ajax等一些基本的编程语言,当然这是一门高深的学问.而这篇文章主要是谈谈我对css中选择器优先级的一些简单的理解与看法,希望对您的学习提供一些帮助.好了,废话不多说了,让我们开始进入主题吧. css中文解释是“层叠式样式表”,在这里我要说一下,所谓层叠样式表的意思就是说我们可以给一个标签或者文本内容同时添加许多种样式,简单点说就是可以通过多种方式去支配同一个东西.那么就会出现这样的问题了——选择优先级的问题.就是谁的属性能起到控制的最终目

CSS中的id选择器和class选择器简单介绍

<!-- CSS中选择器 CSS有两种选择器id和class,总之如果说你想在HTML元素中设置CSS属性, 你要在元素中设置id和class选择器.那么我们现在来一个一个的介绍这两中选择器 id选择器: HTML中的元素属性用id来设置id选择器,CSS中的id选择器是用"#"来定义的 比如: #para1 { text-align:center; color:red; } 这样就定义了一个选择器,什么是选择器,在网上查的是说需要改变的HTML元素,很正确,在一开始我们的内部样

CSS中伪类选择器及伪元素

1.伪类选择器 在CSS中,最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#FF0000;text-decoration:none} a:visited{color:#FF0000;text-decoration:none} a:hover{color:#FF0000;text-decoration:none} a:active{color:#FF0000;text-decoration:none} 2.伪元素选择器 伪元素选择器不是针对真

CSS中模拟父元素选择器

很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来实现相同效果罢了. HTML: <div id="box"> <p>pppppppp</p> <span></span> </div> CSS: div,p{ margin:0; padding:0; } #box{

CSS中:before和:after选择器的用法

在线演示这次给大家带来的是对话气泡效果,主要是演示了 :before / :after 和 border 的用法,赶快来围观吧. 阅读原文:CSS中:before和:after选择器的用法

CSS中选择器优先级的权重计算

CSS中选择器优先级的权重计算 先看一段代码,如下: a{ color: red; } #box a{ color: green; } [class="box"] a{ color: gold; } .box a{ color: brown; } p a{ color: yellow; } </style> <p id='box' class="box"> <a>hello</a></p> 请问上面代码中,

CSS中选择器优先级与!important权重使用

原文:CSS中选择器优先级与!important权重使用 CSS中的选择器优先级与!important权重使用# .class选择器要高于标签选择器. #id选择器要高于.class选择器. 标签选择器是优先级最低的选择器. !important的属性它的权重值优先级最高的,大于所有的选择器. 标签选择器和.class选择器# 让我们进入标签选择器和.class选择器谁的优先级高实践,实践内容如:将HTML页面中的h2标签设置文本颜色. 代码块 Copy <!DOCTYPE html> <

css中选择器优先级问题详解

先根据引入方式分:内联样式,头部样式,外部引入:这三个的优先级依次降低: 相同的引入方式时,根据选择器优先级判断显示哪个样式,具体规则如下: 将选择器的特殊性分为4个等级,a,b,c,d 行内样式,a=1 b 是ID选择器的总数 c 是类,伪类,属性选择器的总数 d 是元素(类型),伪元素选择器的总数 举例说明:   选择器 特殊性 以10为基准的特殊性 1 style="" 1,0,0,0 1000 2 #id01 #id02{} 0,2,0,0 200 3 #id .class{}