常用选择器:标签选择器、类选择器、ID选择器

子选择器(Child selectors)

还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。

.con>p{color:red;} 

* IE6不支持该选择器

包含(后代)选择器

包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。

.con p{color:red;} 

通用选择器

通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素。

* {color:red;}

* 也可以用于选择器下使用  .con * {color:red;},意为con类下所有元素。

伪类选择符

更有趣的是伪类选择符,为什么叫做伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色

a:hover{color:red;}

关于伪选择符:到目前为止,可以兼容所有浏鉴器的“伪类选择符”就是a标签上使用:hover了(其实伪类选择符还有很多,尤其是css3中,但是不能兼容所有浏鉴器)。其实:hover可以放在任意的标签上,比如说p:hover,但是它们的兼容性也是很不好的,所以现在比较常用的还是a:hover的组合。

分组选择符

当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,),如下:

h1,span{color:red;}

相邻兄弟选择器(Adjacent sibling selector)

可选择紧接在另一元素后的元素,且二者有相同父元素。

http://www.w3school.com.cn/css/css_selector_adjacent_sibling.asp

CSS 属性选择器

CSS 2 引入了属性选择器。属性选择器可以根据元素的属性及属性值来选择元素。

http://www.w3school.com.cn/css/css_selector_attribute.asp

记录:CSS选择器学习的更多相关文章

  1. html之css选择器学习

    相关内容: 什么是css选择器 标签选择器 类选择器 id选择器 并集选择器(分组选择器) 交集选择器 后代选择器 子标签选择器 属性选择器 相邻兄弟选择器 伪类选择器 伪元素选择器(伪对象选择器) ...

  2. CSS选择器学习小结

    关于CSS选择器的问题,在实际项目中,以及一般的前端面试中会经常遇到.下面对此做一小结,梳理和巩固相关方面知识.(如有不妥之处,还望大家及时批评指正,以免误导他人) 一.选择器种类 1.id选择器(# ...

  3. css选择器学习(一)

    1.通用选择器“*”和元素选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  4. CSS 选择器学习总结

    1.id 选择器 #idname{color:red;} 2.class选择器 .classname{} 3.标签选择器 div{} 4.通配符选择器 *{} 5. 属性选择器 [id]{ } 5.选 ...

  5. css选择器学习(二)属性选择器

    属性选择器 /*******************************************css2中的属性选择器*************************************** ...

  6. css 选择器 (学习笔记)

    参考 http://zachary-guo.iteye.com/blog/605116 1. div+p  选择紧接在 <div> 元素之后的所有 <p> 元素.解释 : fi ...

  7. XPath、CSS 选择器 -学习地址

    http://www.w3school.com.cn/cssref/css_selectors.asp http://www.w3school.com.cn/xpath/xpath_syntax.as ...

  8. 第七十节,css选择器

    css选择器 学习要点: 1.选择器总汇 2.基本选择器 3.复合选择器 4.伪元素选择器 本章主要探讨 HTML5中  CSS选择器,通过选择器定位到想要设置样式的元素.目前CSS选择器的版本已经升 ...

  9. HTML&CSS基础学习笔记1.33-元素选择器

    元素选择器 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器: p { text-indent:10px; color:blue; } 什么情况下使用元素选择器,一般我们这 ...

随机推荐

  1. js中用变量作为$()内id的值、动态获取id,及获取其下面的class元素

    在开发中写了一个公共方法对模板tpl进行渲染,然而他的id是通过变量传值过来的,在网上查阅后找到解决方法,写法如下: $("#"+tplVal).html(html); 用$(&q ...

  2. java的eclipse的使用

    1下载eclipse地址:www.eclipse.org/downloads/ 解压就可安装 注意: 这可能你是没有安装java运行环境(jre或jdk) 直接www.java.com,下载就行 下一 ...

  3. Java 7.35 游戏:猜字游戏(C++&Java)

    Ps: 有人可能好奇我为什么大费周章的去写主函数,而不直接把所有操作放在类中,Why?类就好比骨干(存放核心的数据和功能),最好提供接口, 避免了类中的输入输出,当然,这也不是绝对的. C++: #i ...

  4. hdu 1558 (线段相交+并查集) Segment set

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1558 题意是在坐标系中,当输入P(注意是大写,我当开始就wa成了小写)的时候输入一条线段的起点坐标和终点坐 ...

  5. Squid 搭建正向代理服务器

    Squid 是一款缓存代理服务器软件,广泛用于网站的负载均衡架构中,常见的缓存服务器还有varnish.ATS等. 正向代理服务器可满足内网仅有一台服务器可以上网,而要供内网所有机器上网的需求,也可以 ...

  6. nim博弈

    尼姆博弈 1.问题模型:有三堆各若干个物品,两个人轮流从某一堆取任意多的物品,规定每次至少取一个,多者不限,最后取光者得胜. 2.解决思路:用(a,b,c)表示某种局势,显证(0,0,0)是第一种奇异 ...

  7. linux如何查询系统驱动是否支持该型号显卡

    操作系统在做硬件适配时,经常会检查系统内核是否支持硬件的显卡:如果不支持,则一般是通过升级内核或者该型号对应品牌的显卡驱动来解决(开源或者闭源): 操作流程如下 1> 查询本机的显卡型号 因显卡 ...

  8. 20172325 2018-2019-2 《Java程序设计》第五周学习总结

    20172325 2018-2019-2 <Java程序设计>第五周学习总结 教材学习内容总结 本次学习第九章内容,主要学习查找和排序. 查找 查找的定义:是一个过程,即在某个项目组中寻找 ...

  9. [Robot Framework] 通过Robot Remote Server调用White Library测试WPF开发的桌面产品

    参考 : https://github.com/jatalahd/WhiteRobotLibrary 通过此源代码编译WhiteRobotLibrary.dll,然后把高亮标记的这5个dll全部拷贝到 ...

  10. 在离线安装gazebo的时候可能在运行turtlebot_gazebo的时候会出现问题

    问题显示如下 gzserver: /build/ogre-1.9-mqY1wq/ogre-1.9-1.9.0+dfsg1/OgreMain/src/OgreRenderSystem.cpp:546: ...