CSS选择器
来源:互联网 发布:android卡牌游戏源码 编辑:程序博客网 时间:2024/06/10 20:56
选择器
规则结构
选择器 声明块(属性:值;)h1 {color:red;}
分组
分组分为选择器分组和声明分组。
h1,h2 {color:red} //选择器分组h1 {color:red;background:yellow;} //声明分组
两者的结合,可以让代码更加简洁。
选择器分类
元素选择器,类选择器,ID选择器,属性选择器。
类选择器
.warning {font-style: italic;} //通用类选择器span.warning {font-weight: bold;} //元素特定类选择器
多类选择器
.waring {font-style: italic;}.urgent {font-weight: bold}.waring.urgent {background: silver}; //class中同时含有warning和urgent的所有元素
属性选择器
对于类选择器和ID选择器,你所做的实际上只是选择属性值。 另外,CSS2引入了属性选择器,它可以根据元素的属性及属性值来选择元素。共有四种类型的属性选择器。
简单属性选择器
如有希望选择有某个属性的元素,而不论该属性的值是什么,可以使用一个简单属性选择器。
h1[class] {color: silver;}*[title] {font-weight: bold;} //应用在所有包含title属性的元素a[href][title] {font-weight: bold;} //根据多属性进行选择
根据具体属性值选择
a[title="wilson"] {font-weight: bold;}a[title=wilson][href="wilsonliu.cn"] {color:red;} //根据多属性值进行选择p[class="urgent"] {color: red;} //必须与属性值完全匹配,如下p[class="urgent warning"] {font-weight: bold;}<p class="urgent warning">Welcome to China!</p>
根据部分属性值选择
p[class~="warning"] {font-weight: bold;}
还有一个更高级的CSS选择器模块,这是在CSS2完成之后发布的,其中包含更多的部分值属性选择器或者称为”子串匹配属性选择器”。
特定属性选择类型
一般地,[attr|="val"]
可以用于任何属性及其值。 用于特定地”-“标记
*[lang|="en"] {color:white;} //选择lang属性等于en或者以en-开头的所有元素img[src|="figure"] {border: 1px solid gray;} //匹配一系列图片,其文件名都形如figure-1.jpg和figure-2.jpg
使用文档结构
后代选择器
定义后代选择器就是来创建一些规则,他们仅在某些结构中起作用,而在另外一些结构中不起作用。解析的时候,是从右往左解析。
h1 em {color:gray}ul ol ul em {color:gray} //并不仅限于两个选择器
选择子元素
在某些情况下,可能并不想选择一个任意的后代元素;而是希望缩小范围,只选择另一个元素的子元素。
h1 > strong {color: red;}table.summary td > p {color:yellow} //可以在同一个选择器中结合使用后代选择器和子选择器
选择相邻兄弟元素
要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟结合符,这表示为一个加号(+)。 li + li {color:red}
伪类和伪元素
利用伪类和伪元素,可以为文档中不一定具体存在的结构指定样式,或者为某些元素(甚至是文档本身)的状态所指示的幻象类指定样式。
伪类选择器
伪类的实质,它是把某种幻像类关联到与伪类相关的元素。例如first-child,可以想象为是在父元素中第一个元素中的class="first-child"
,而visited则可以想象为是在a标签里class="visited"
。
链接伪类
要想区别哪些链接已经访问过,唯一的办法就是将文档中的链接与用户的浏览历史相比较。
:link //指示作为超链接并指向一个未访问地址的所有锚:visited //指示作为超链接并指向一个已访问地址的所有锚
动态伪类
CSS2.1定义了3个动态伪类,它们可以根据用户行为改变文档的外观。
:focus //指示当前拥有输入焦点的元素:hover //指示鼠标指针停留在哪个元素:active //指示被用户输入激活的元素
选择第一个子元素
p:first-child {font-weight: bold;}
最常见的错误是认为p:first-child
之类的选择器会选择p元素的第一个子元素。实际上,是指作为父元素的第一个子元素的p元素。
结合伪类
a:link:hover {color:red;}a:visited:hover {color: maroon;}
伪元素选择器
就像伪类为锚指定幻想类一样,伪元素能够在文档中插入假想的元素,从而得到某种效果。CSS2.1中定义了4个伪元素:设置首字母样式,设置第一行样式,设置之前和之后元素的样式。
设置首字母样式
第一个伪元素用于设置一个块级元素首字母的样式,而且仅对该首字母设置样式:
p:first-letter {color:red;}<p>test doc</p> //测试p<p><p:first-letter>t</p:first-letter>est doc</p> //由浏览器动态构造成的假想元素
设置第一行的样式
p:first-line {color:purple;}
设置之前和之后元素的样式
h1:before {content: "*";color:silver}
- CSS选择器,jQuery选择器
- jQuery选择器 CSS选择器
- css选择器-基本选择器
- css选择器-属性选择器
- CSS选择器选择器
- CSS选择器-属性选择器
- css选择器
- css选择器
- css选择器
- Css选择器!
- CSS选择器
- css选择器
- CSS选择器
- CSS选择器
- CSS选择器
- CSS选择器
- css选择器
- css选择器
- JAVA设计模式(05):创建型-原型模式(Prototype)
- sphinx原理以及索引流程
- Oracle10g下载地址--多平台下的32位和64位
- 多个条件判断二进制的简化
- spring mvc json date字符串格式化的问题
- CSS选择器
- Android onActivityResult获取返回值的用法
- MyEclipse8.5建立SpringMVC入门项目
- 自定义View之绘图篇(五):圆形水波
- HDU 1754 线段树
- 几个易混淆的概念(准确率-召回率,击中率-虚警率,PR曲线和mAP,ROC曲线和AUC)
- 手机抓包教程分享
- unity 调用安卓系统摄像机和相册并对图片进行裁剪(二)
- Retrofit2.0 android.os.NetworkOnMainThreadException解决方法