CSS——选择器
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——选择器的更多相关文章
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- css选择器
常用css选择器,希望对大家有所帮助,不喜勿喷. 1.*:通用选择器 * { margin: 0; padding: 0; } 选择页面上的全部元素,通常用于清除浏览器默认样式,不推荐使用. 2.#i ...
- dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来
dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...
- CSS选择器的权重与优先规则?
我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...
- css选择器的使用详解
-.css选择器的分类: 二.常用选择器详解: 1.标签选择器: 语法: 标签名 { 属性:属性值; } 代码示例: h1 { color: #ccc; font-size: 28px; } 2.类选 ...
- js,jq,css选择器
js获取节点: var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; / ...
- CSS系列:CSS选择器
选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记样式都是通过不同的CSS选择器来控制的.用户只需要通过选择对不同的HTML标签进行选择,并赋予各种样式声明,即可实现各种效果. ...
- 细说CSS选择器
众所周知,CSS的一个核心特征就是能向文档中的一组元素类型应用某些规则.每个规则都有两个基本部分:选择器(selector)和声明块(declaration block).下图显示了规则的各个部分. ...
- CSS选择器 转
来自于:http://www.cnblogs.com/webblog/archive/2009/08/07/1541005.html 最近在研究jQuery的选择器,大家知道jQuery的选择器和cs ...
- HTML5 -入门 (---css样式-------------(css基础与css选择器)---------------------—)
---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...
随机推荐
- (转载)HTTP URL
HTTP URL的格式如下: http://host[“:”post][abs_path] 其中http表示要通过HTTP协议来定位网络资源.host表示合法的Internet主机域名或IP地址(以点 ...
- Project Euler 26 Reciprocal cycles
题意:求1到n中所有数的倒数中循环小数循环体最长的数 解法:如果一个数的质因子只有2和5,那么这个数的倒数一定不是一个循环小数.如果一个数含有质因子2或5,那么它的循环体和去掉质因子2和5之后的数的循 ...
- POJ 2481-Cows(BIT)
题意: n个牛,每个牛对应一个区间,对于每个牛求n个区间有几个包含该牛的区间. 分析: 先 区间右边界从大到小排序,相同时左边界小到大,统计第i头牛即左边界在前i-1头左边界的正序数. #includ ...
- Linux新手必看:浅谈如何学习linux
本文在Creative Commons许可证下发布 一.起步 首先,应该为自己创造一个学习linux的环境--在电脑上装一个linux或unix问题1:版本的选择 北美用redhat,欧洲用SuSE, ...
- css定位方式
CSS表达式 匹配元素说明 xpath * 匹配任何元素 //* div 标签 //div div#eleID by ID //div[@id='eleID'] div.class by clas ...
- bzoj 1411 [ZJOI2009]硬币游戏
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1411 [题意] N个硬币放在一个有2*N个位置的圆桌上,求T次操作后的情况.对于一个操 ...
- 5.1 CUDA atomic原子操作
和许多多线程并行问题一样,CUDA也存在互斥访问的问题,即当一个线程改变变量X,而另外一个线程在读取变量X的值,执行原子操作类似于有一个自旋锁,只有等X的变量在改变完成之后,才能执行读操作,这样可以保 ...
- JAVA一个关于传递引用的测试
以下测试主要为了说明:对传递对象或传递引用进行修改,对最终值的影响情况 public class PassTest { @Before public void setUp() thro ...
- 【Hadoop代码笔记】目录
整理09年时候做的Hadoop的代码笔记. 开始. [Hadoop代码笔记]Hadoop作业提交之客户端作业提交 [Hadoop代码笔记]通过JobClient对Jobtracker的调用看详细了解H ...
- Android应用正确使用扩展SD卡,特别是安卓4.4以后的版本
Android 开发时如何正确获取使用扩展存储路径 在 2.x 版本中,Android设备都是单存储,第三方App写文件,必须申请 WRITE_EXTERNAL_STORAGE 权限: 在4.0之后, ...