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文件本身会被浏览器从服务器下载到本地,才能显示效果
css中最基本几个选择器的更多相关文章
- 妙味css3课程---1-1、css中自定义属性可以用属性选择器么
妙味css3课程---1-1.css中自定义属性可以用属性选择器么 一.总结 一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...
- CSS中的选择器之html选择器和伪类选择器
1.html选择器(标签选择器) 基本语法: html标签名称{ 属性名:属性值; 属性名:属性值; } 继续在上面的代码中做修改,实例代码: <!DOCTYPE html> <ht ...
- css中的7中属性选择器
在CSS的选择符中有七个属性选择符.它们分别是: 1.E[att] 选择具有att属性的E元素. 2.E[att="val"] 选择具有att属性且属性值等于val的E元素. 3. ...
- css中 ~的作用
这是 CSS3 element1~element2 选择器 定义和用法 element1~element2 选择器 element1 之后出现的所有 element2. 两种元素必须拥有相同的父元素, ...
- CSS中模拟父元素选择器
很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来 ...
- CSS中选择器优先级顺序实战讲解
原文:CSS中选择器优先级顺序实战讲解 我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗? 如果你在开发中也 ...
- css中那些容易被我们程序猿所忽略的选择器
css中那些容易被我们程序猿所忽略的选择器 作为一个程序猿,我们可能会遇到这样的问题,假如:有5个li,要求给第三个li设置背景颜色怎么办?有人会说,用JS啊,循环遍历出第三个不就行了.但是,用JS解 ...
- css中所有的选择器
认识css中所有的选择器 什么是选择器 每一条样式申明(定义)由两部分组成 选择器{ 样式: } 标签选择器 p{ font-size:12px: line-height:1.6em; ...
- CSS中伪类选择器及伪元素
1.伪类选择器 在CSS中,最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#FF0000;text-decoration:none} a:vis ...
随机推荐
- Android开发之Bitmap的高效加载
BitmapFactory类提供了四类方法:decodeFile, decodeResource, decodeStream和decodeByteArray 分别用于支持从文件系统,资源,输入流以及字 ...
- Node.js 基础介绍
什么是Node.js 官网介绍: Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js us ...
- Chrome 开发工具 Workspace 使用
前端开发中我们经常要在浏览器中做一些细节调整,比如对 CSS 的微调,最快的方式当然是直接在 Chrome 的开发者工具中调整,但问题在于在控制台中调试好的数值我们还需要再在 CSS 源码中再写一次, ...
- deepin系统如何安装deb格式的软件
很简单,命令如下: sudo dpkg -i *.deb 记得路径要对
- unity插件开发——AssetDatabase
AssetDatebase也是一个静态类,他的作用是管理整个工程的所有文件(一般成为“资产”).直观地说就是管理整个project窗口中的所有内容,比如,你可以增加.删除.修改文件等等. 这里有几个常 ...
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(三)代码测试
日常啰嗦 看到标题你可能会问为什么这一篇会谈到代码测试,不是说代码优化么?前两篇主要是讲了程序的输出及Log4j的使用,Log能够帮助我们进行bug的定位,优化开发流程,而代码测试有什么用呢?其实测试 ...
- 老李秘技:LoadRunner支持参数文件极限是多大
老李秘技:LoadRunner支持参数文件极限是多大 Controller不支持参数文件大于20m
- 五分钟秒懂Java日志组件
Java中有许多种日志记录方式,有些API有占位符,有些API没占位符,初学的人可能会搞不清楚这些日志组件的由来.我一开始的时候也是很懵逼的,后来一点点弄懂了于是就又了这篇文章. 在Java中进行日志 ...
- JavaScript高级程序设计---学习笔记(三)
函数表达式 定义函数的方式有两种:一种是函数声明,另一种是函数表达式. 关于函数声明,它的一个重要特征就是函数声明提升,意思是在执行代码之前会先读取函数声明所以可以把函数声明放在调用它的语句后面. 而 ...
- Python练习册 第 0013 题: 用 Python 写一个爬图片的程序,爬 这个链接里的日本妹子图片 :-),(http://tieba.baidu.com/p/2166231880)
这道题是一道爬虫练习题,需要爬链接http://tieba.baidu.com/p/2166231880里的所有妹子图片,点进链接看一下,这位妹子是日本著名性感女演员--杉本由美,^_^好漂亮啊,赶紧 ...