css选择器

  css选择器可分为:标签(元素)选择器,ID选择器,类选择器,属性选择器,后代选择器,子代选择器,相邻兄弟选择器和兄弟选择器....

  标签选择器:

 //E{attr:value;attr:value;}
p{display:inline;color:#eee;

  ID选择器:

//E#ID{attr:value;attr:value;}
//html
<p id="pro">hello css</p>
//css
p#pro{
color:#eee;
}

  ID选择器不能使用空格符,也不能多ID使用

  类选择器:

//E.CLASS{attr:value;attr:value;}
//html
<p class="pro">hello css</p>
//css
p.pro{
color:#eee;
}

  类选择器之间可以使用空格符,如

<p class="pro la">hello css</p>

此时p元素会同时应用.pro与.la的样式,若两者的样式存在重叠,则后者覆盖掉前者。

 属性选择器:

//html
<input type="text" />
//css
input[type="text"]{
text-align:center;
}
p[foo="bar"] 对p元素属性foo值为bar的p应用样式
p[foo^="bar"] 对p元素属性foo值以bar开头的应用样式
p[foo$="bar"] 以bar结尾
p[foo*="bar"] 包含bar的

  后代选择器:

  

p span{
color:red;
}

  选择p元素中后代为span的应用样式 ,既然是后代,则存在隔代关系,而不需要是直系子代。

 子元素选择器: 

  其与后代选择器的区别是:只能选择直系子代应用样式。

  

 相邻兄弟选择器:

p+div{
}

  只能选择紧邻p元素的div

 兄弟选择器:

p~div{}

  选择与p元素具有相同父元素的在p元素之后的div.

 

  

CSS——选择器的更多相关文章

  1. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  2. css选择器

    常用css选择器,希望对大家有所帮助,不喜勿喷. 1.*:通用选择器 * { margin: 0; padding: 0; } 选择页面上的全部元素,通常用于清除浏览器默认样式,不推荐使用. 2.#i ...

  3. dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来

    dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...

  4. CSS选择器的权重与优先规则?

    我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...

  5. css选择器的使用详解

    -.css选择器的分类: 二.常用选择器详解: 1.标签选择器: 语法: 标签名 { 属性:属性值; } 代码示例: h1 { color: #ccc; font-size: 28px; } 2.类选 ...

  6. js,jq,css选择器

    js获取节点: var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; / ...

  7. CSS系列:CSS选择器

    选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记样式都是通过不同的CSS选择器来控制的.用户只需要通过选择对不同的HTML标签进行选择,并赋予各种样式声明,即可实现各种效果. ...

  8. 细说CSS选择器

    众所周知,CSS的一个核心特征就是能向文档中的一组元素类型应用某些规则.每个规则都有两个基本部分:选择器(selector)和声明块(declaration block).下图显示了规则的各个部分. ...

  9. CSS选择器 转

    来自于:http://www.cnblogs.com/webblog/archive/2009/08/07/1541005.html 最近在研究jQuery的选择器,大家知道jQuery的选择器和cs ...

  10. HTML5 -入门 (---css样式-------------(css基础与css选择器)---------------------—)

    ---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...

随机推荐

  1. Java多线程 -- 深入理解JMM(Java内存模型) --(五)锁

    锁的释放-获取建立的happens before 关系 锁是Java并发编程中最重要的同步机制.锁除了让临界区互斥执行外,还可以让释放锁的线程向获取同一个锁的线程发送消息. 下面是锁释放-获取的示例代 ...

  2. ios游戏开发--cocos2d学习(3)

    ------------继续上一节的内容. “接收触摸事件”: CCLayer类是用来接收触摸输入的.不过你要首先启用这个功能才可以使用它. self.isTouchEnabled = YES;//此 ...

  3. 设计模式_Bridge

    形象的例子: —早上碰到MM,要说早上好,晚上碰到MM,要说晚上好:碰到MM穿了件新衣服,要说你的衣服好漂亮哦,碰到MM新做的发型,要说你的头发好漂亮哦.不要问我“早上碰到MM新做了个发型怎么说”这种 ...

  4. 第一章 :绪论-Twitter数据的收集和处理

    为什么要用twitter,我心里是一万头CNM在飞奔.这个国外的东西很不好访问到的,国内的政策,你懂的,不说这个了,还是想办法翻出去再说吧. 不知道别人都用的什么工具,看到太多的注册就头大,就选了一个 ...

  5. 【JS】Advanced1:Object-Oriented Code

    Object-Oriented Code 1. var Person = function (name) { this.name = name; }; Person.prototype.say = f ...

  6. 【暑假】[数学]UVa 1262 Password

    UVa 1262  Password 题目: Password   Time Limit: 3000MS   Memory Limit: Unknown   64bit IO Format: %lld ...

  7. CentOS安装nvidia显卡驱动

    1.下载 nvidia 相应的驱动: 2.修改/etc/modprobe.d/blacklist.conf文件,在里面加入blacklist nouveau. 3.重建image $ mv /boot ...

  8. 为zend studio增加Extjs代码提示功能

    http://blog.163.com/liuhaijun_83/blog/static/61175622201223114216786/ 需要将其中的http://www.spket.com/upd ...

  9. algorithm@ Strongly Connected Component

    Strongly Connected Components A directed graph is strongly connected if there is a path between all ...

  10. POJ 3648-Wedding(2-SAT)

    题面很邪恶啊... 一对新人请n-1对夫妻吃饭,人们坐在一张桌子的两侧,每一对互为夫妻关系的人必须坐在桌子的两侧.而且有些人两两之间会存在“通奸”关系,通奸关系不仅在男女之间,同性之间也有.新娘对面不 ...