CSS选择器之基本选择器总结
一、元素选择器(所有浏览器支持)
元素选择器(标签名选择器)其实就是文档的元素,如html,body,p,div等等,
下面例子中选择了span元素,并设置了字体颜色为红色。
<body>
<p>这里使用<span>标签名选择器</span>改变了样式</p>
</body>
CSS:
span{
color: red;
}
效果:
二、类选择器
(所有浏览器都支持类选择器,但多类选择器(.className1.className2)不被ie6支持。)
类选择器根据类名来选择,前面以”.”来标志,使用类选择器之前需要在html元素上定义类名,类名自定义。
<body>
<div class="demo"></div>
</body>
CSS
.demo{
width: 150px;
height: 150px;
background:#0e0;
}
效果:
三、ID选择器(所有浏览器都支持)
根据元素ID来选择元素,具有唯一性。前面以”#”号来标志。
<body>
<div id="demo"></div>
</body>
CSS
#demo{
width: 150px;
height: 150px;
background:red;
}
效果:
四、后代选择器( E F )(所有浏览器都支持)
后代选择器也称为包含选择器,用来选择特定元素或元素组的后代,后代选择器用两个常用选择器,中间加一个空格表示。
其中前面的常用选择器选择祖元素,后面的常用选择器选择子元素,样式最终会应用于子元素中。
比如说:E F,前面E为祖先元素,F为后代元素。
所表达的意思就是选择了E元素的所有后代F元素,这里F不管是E元素的子元素或者是孙元素或者是更深层次的关系,都将被选中。
换句话说,不论F在E中有多少层关系,都将被选中。
<body>
<div class="demo">
<div class="one">
<ul>
<li>列表一</li>
</ul>
<p>这里是一个段落</p>
</div>
</div>
</body>
CSS
.demo .one{
color: red;
}
效果:
五、通配符选择器(所有浏览器支持)
1、通用选择器用*来表示,下例中表示所有的元素的字体大小都是12px;
*{
font-size: 12px;
}
2、 通用选择器还可以和后代选择器组合。
<body>
<p>
所有的文本都被定义成红色<br>
<span>所有的文本都被定义成红色</span><br>
<span>所有的文本都被定义成红色</span><br>
<span>所有的文本都被定义成红色</span>
</p>
</body>
CSS
p *{
color: red;
}
表示所有p元素后代的所有元素都应用这个样式,注意,若p元素后没有元素,则样式没有效果。
3、与后代选择器的搭配容易出现浏览器不能解析的情况。
<body>
<p>
<p>所有的<span>文本</span>都被定义成红色</p>
<span>此处没有变色</span><br>
<span>此处没有变色</span>
</p>
</body>
CSS
p *{
color: red;
}
效果:
六、子元素选择器(IE6不支持)
请注意这个选择器与后代选择器的区别:
子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一个后代。
而后代选择器是作用于所有子后代元素。
后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择
<body>
<p id="links">
<a href="#">链接一</a>
<span><a href="#">链接二</a></span>
<span><a href="#">链接三</a></span>
</p>
</body>
CSS
#links a {color:red;} #links > a {color:blue;}
效果:
七、群组选择器(所有浏览器都支持)
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔。
<body>
<p>这里是一个段落!</p>
<ul><li>列表</li></ul>
<a href="#" class="demo1">链接一</a><br>
<span class="demo2">文字文字!</span>
</body>
CSS
p,li{
color: blue;
}
.demo1,.demo2{
color: red;
}
效果:
八、相邻兄弟元素选择器(E+F)(IE6不支持这个选择器)
相邻兄弟选择器可以选择紧接在另一元素后的元素,而且他们具有一个相同的父元素。
换句话说,EF两元素具有一个相同的父元素,而且F元素在E元素后面,而且相邻,这样我们就可以使用相邻兄弟元素选择器来选择F元素(选中的仅一个元素)。
<body>
<ul>
<li>列表一</li>
<li class="active">列表二</li>
<li>列表三</li>
<li>列表四</li>
<li>列表五</li>
</ul>
</body>
CSS
.active+li{
background: #0e0;
}
效果:
注释:选择了li.active后面相邻的li元素,注意了和li.active后面相邻的元素仅只有一个的。
九、通用兄弟选择器(E 〜 F)(IE6不支持这个选择器)
通用兄弟元素选择器是CSS3新增加一种选择器。
这种选择器将选择某元素后面的所有兄弟元素,他们也和相邻兄弟元素类似,需要在同一个父元素之中。
换句话说,E和F元素是属于同一父元素之内,并且F元素在E元素之后,那么E ~ F 选择器将选择中所有E元素后面的F元素。
<body>
<ul>
<li>列表一</li>
<li class="active">列表二</li>
<li>列表三</li>
<li>列表四</li>
<li>列表五</li>
</ul>
</body>
CSS
.active~li{
background: #0e0;
}
效果:
选择器的优先级问题?
如何规定优先级?
一般而言,选择器越特殊,优先级越高。也就是选择器指向越准确,它的优先级就越高。
如用数字来表示优先级高低:
标签名选择器 = 1
类选择器 = 10
ID选择器 = 100
例:
结果是蓝色,color没有效果
结果:
原因:
.demo span{ color: blue;}的选择器优先级是10+1=11
.color{color: red;}的优先级是10
所以浏览器显示的是蓝色。
后代选择器定位原则:
对于后代选择器,浏览器是如何查找元素的呢?
浏览器CSS匹配不是从左到右进行查找,而是从右到左进行查找。
比如DIV#divBox p span.red{color:red;},
浏览器的查找顺序如下:先查找html中所有class='red'的span元素,找到后,再查找其父辈元 素中是否有p元素,再判断p的父元素中是否有id为divBox的div元素,如果都存在则匹配上。
浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。
如果按从左到右查找,那会先查找到很多不相关的p和span元素。
而如果按从左到右的方式进行查找,则首先就查找到<span class='red'>的元素。
firefox称这种查找方式为key selector(关键字查询),所谓的关键字就是样式规则中最后(最右边)的规则,上面的key就是span.red。
CSS选择器之基本选择器总结的更多相关文章
- CSS 选择器之基本选择器 属性选择器 伪类选择器
CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className) 所有浏览器都支持类选择器,但多类选择器(.classNa ...
- CSS选择器之通配符选择器和多元素选择器
1.通配符选择器 如果希望所有的元素都符合某一种样式,可以使用通配符选择器. 基本语法: *{margin:0; padding:0} 可以让所有的html元素的外边距和内边距都默认为0. 写一段ht ...
- CSS选择器之基本选择器
一.通用选择器 选择器 * 匹配 所有元素 最低支持CSS版本 2 二.类型选择器 选择器 <元素类型> 匹配 所有指定类型的元素 最低支持CSS版本 1 三.类选择器 选择器 <类 ...
- CSS选择器之基本选择器+属性选择器
1.1 id选择器 #main{ font-size:12px; margin:0; padding:0; } 其中的#main就是id选择器,用于选择HTML页面中id = "m ...
- CSS选择器之兄弟选择器(~和+)
今天在改以以前人家写的网页的样式的时候,碰到这个选择器,‘~’,当时我是懵逼的,傻傻分不清 ‘+’ 跟 ‘~’的区别,虽然我知道他们都是兄弟选择器. 后来网上查了下,也许是我查找的方式不对,没有找到我 ...
- CSS选择器之伪类选择器(伪元素)
selection [CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分).(IE8及以下不支持)(火狐-moz-selection) first-line 选择每个 < ...
- css笔记08:id选择器之父子选择器
1.父子选择器 (1)01.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器
× 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...
- DOM选择器之元素选择器
DOM中元素选择器 在DOM中我们可以将元素选择器分为两类:1.元素节点选择器:2.其它节点选择器.通过选择器选择HTML中的元素以对其进行操作,以此实现用JS对页面的操作. 一.元素节点选择器 1. ...
随机推荐
- Last Day in Autodesk
今天是我的最后一天在Autodesk上海了,以后将不再折腾那么大的软件了,还是回到CG开发中捣鼓短小精悍的东西——我还将继续整理开源CG生产工具. Today is my last day in Au ...
- Android IPC机制(五)用Socket实现跨进程聊天程序
1.Socket简介 Socket也称作“套接字“,是在应用层和传输层之间的一个抽象层,它把TCP/IP层复杂的操作抽象为几个简单的接口供应用层调用以实现进程在网络中通信.它分为流式套接字和数据包套接 ...
- OkHttp的封装和使用详解
Github地址 compile 'cn.yuan.yu:library:1.0.2' 第一步:初始化我们的工具类 public class MyApplication extends Applica ...
- Hive内部表与外部表的区别
1.未被external修饰的是内部表[managed table],被external修饰的为外部表[external table]. 2.内部表数据由Hive自身管理,外部表数据由HDFS管理. ...
- 使用Visual Studio Team Services敏捷规划和项目组合管理(二)——VSTS中的工作项
使用Visual Studio Team Services敏捷规划和项目组合管理(二)--VSTS中的工作项 1.通过project/team下拉菜单选择MyHealthClinic\Web,导航到W ...
- 将DataTable中的数据一次性提交到数据库中
实现功能的核心代码 SqlConnection destinationConnection = new SqlConnection(connectionString);destinationConne ...
- IO测试工具之fio详解
目前主流的第三方IO测试工具有fio.iometer和Orion,这三种工具各有千秋. fio在Linux系统下使用比较方便,iometer在window系统下使用比较方便,Orion是oracle的 ...
- python中------decode解码出现的0xca问题解决方法
一.错误: 解决方法: #源代码 data = sk.recv(1024) print(str(data,'gbk')) #修改代码 data = sk.recv(1024) print(str(da ...
- 【2018.05.11 智能驾驶/汽车电子】非技术向:关于Simulink和AutoSar的几种观点
最近看到几篇关于Simulink及AutoSar的Blog和Paper,感觉比较有意思,转载备忘之. 1. 看衰Simulink及AutoSar From:Tumiz的技术天地 https://blo ...
- Unity基础6 Shadow Map 阴影实现
这篇实现来的有点墨迹,前前后后折腾零碎的时间折腾了半个月才才实现一个基本的shadow map流程,只能说是对原理理解更深刻一些,但离实际应用估计还需要做很多优化.这篇文章大致分析下shadow ma ...