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中最基本几个选择器的更多相关文章

  1. 妙味css3课程---1-1、css中自定义属性可以用属性选择器么

    妙味css3课程---1-1.css中自定义属性可以用属性选择器么 一.总结 一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...

  2. CSS中的选择器之html选择器和伪类选择器

    1.html选择器(标签选择器) 基本语法: html标签名称{ 属性名:属性值; 属性名:属性值; } 继续在上面的代码中做修改,实例代码: <!DOCTYPE html> <ht ...

  3. css中的7中属性选择器

    在CSS的选择符中有七个属性选择符.它们分别是: 1.E[att] 选择具有att属性的E元素. 2.E[att="val"] 选择具有att属性且属性值等于val的E元素. 3. ...

  4. css中 ~的作用

    这是 CSS3 element1~element2 选择器 定义和用法 element1~element2 选择器 element1 之后出现的所有 element2. 两种元素必须拥有相同的父元素, ...

  5. CSS中模拟父元素选择器

    很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来 ...

  6. CSS中选择器优先级顺序实战讲解

    原文:CSS中选择器优先级顺序实战讲解 我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗? 如果你在开发中也 ...

  7. css中那些容易被我们程序猿所忽略的选择器

    css中那些容易被我们程序猿所忽略的选择器 作为一个程序猿,我们可能会遇到这样的问题,假如:有5个li,要求给第三个li设置背景颜色怎么办?有人会说,用JS啊,循环遍历出第三个不就行了.但是,用JS解 ...

  8. css中所有的选择器

    认识css中所有的选择器 什么是选择器 每一条样式申明(定义)由两部分组成 选择器{ 样式:    } 标签选择器 p{ font-size:12px:  line-height:1.6em;     ...

  9. CSS中伪类选择器及伪元素

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

随机推荐

  1. UT源码-124

    (1)设计三角形问题的程序 输入三个整数a.b.c,分别作为三角形的三条边,现通过程序判断由三条边构成的三角形的类型为等边三角形.等腰三角形.一般三角形(特殊的还有直角三角形),以及不构成三角形.(等 ...

  2. Windows 10 Creaters Update 新功能——画中画模式和窗口高斯模糊

    在Windows 10 Creaters Update中,可以给窗口设置高斯模糊了,只要几行代码! <Grid Loaded="Grid_Loaded"> <Gr ...

  3. JS的DOM操作及动画

    JS的DOM操作DOM:Document Object ModelBOM:Bowers(浏览器) Object Model找到元素:var a=document.getElementById(&quo ...

  4. 自定义template

    今天写代码写的有点烦了,感觉天天写new String(); new HashMap<String,String>()等,感觉写烦了,有没有快速的方法了.就你输入syso然后按atl+/就 ...

  5. Eclipese Mars安装SVN的全步骤

    在做毕业设计的过程中,由于是团队项目,需要用到SVN,而全新的Eclipse Mars从官网下载下来没有SVN插件,需要自己下载. 1.选择Help-->Eclipese MarketPlace ...

  6. Servlet过滤器和监听器知识总结(转)

    Servlet过滤器和监听器知识总结(转)  Servlet过滤器是 Servlet 程序的一种特殊用法,主要用来完成一些通用的操作,如编码的过滤.判断用户的登录状态.过滤器使得Servlet开发者能 ...

  7. [编织消息框架][JAVA核心技术]动态代理应用2

    接下来如何实现 第一步:先把服务类,调用方法转换成数字,方便传输 第二步:提取元信息,提取又有三种方式,三种各有优点,最优方式是第一种 1.编译java时处理 2.程序启动时处理,预处理 3.调用时处 ...

  8. ubuntu用不了root用户:~$ su - root Password: su: Authentication failure怎么办?

    解除root锁定,为root用户设置密码. 打开终端输入:sudo passwd Password: <--- 输入你当前用户的密码 Enter new UNIX password: <- ...

  9. MySQL(Navicat)运行.sql文件时报错[Err] 2006 - MySQL server has gone away 的解决方法

    在my.ini里加上  max_allowed_packet=16M

  10. children 和childNodes 的区别

    1:childNodes /children相同点:它返回指定元素的子元素集合. 2:区别:children :  它是非标准的,仅返回HTML节点.甚至不返回文本节点.所有浏览器表现一 致. chi ...