手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >简介CSS中的各种选择符
简介CSS中的各种选择符
摘要:类型,类和ID选择器带有空格的字体名称要用''引起来对选择器分组可使同一规则适用于多个选择器,例子如下CSSCode复制内容到剪贴板th,t...

类型,类和ID选择器

带有空格的字体名称要用''引起来

对选择器分组可使同一规则适用于多个选择器,例子如下

CSS Code复制内容到剪贴板 th,td{ padding:010px00; }

选项的优先级

CSS Code复制内容到剪贴板 h1{ font-family:'TimesNewRoman',serif; } //先选用前者,没有前者,再使用后者

类型名与类名中间不应有空格 div.btn-success

通用选择器*,适用于文档所有元素

CSS Code复制内容到剪贴板 *{ font-family:Arial; }

后代选择器

CSS Code复制内容到剪贴板 div.planettabletd{ padding:010px00; } //是类为planet的div元素的后代table的后代的td样式

万万牢记,上下文选择符以空格作为分隔符,而分组选择符则以逗号作为分隔符,不要弄混。

子选择符>

CSS Code复制内容到剪贴板 section>p{ font-style:Italic; } //section的子元素p

同胞选择符~和+

section ~ p {

font-style:Italic;

}

//p在section后面就行

section + p {font-style:Italic;}

//p必须紧跟section

非子选择符

CSS Code复制内容到剪贴板 selection*a{ ***; } //所有是selection元素孙子的a元素

ID选择器

属性选择器

标签名[属性="属性值"]

CSS Code复制内容到剪贴板 img[title="hhjj"]{...}

伪类选择器:动态事件,状态改变

CSS Code复制内容到剪贴板 a:visited{ color:mangenta; }

//被访问过的链接

UI伪类

链接伪类

Link。此时,链接就在那儿等着用户点击。

Visited。用户此前点击过这个链接。

Hover。鼠标指针正悬停在链接上。

Active。链接正在被点击(鼠标在元素上按下,还没有释放)。

focus伪类——鼠标放在上面

CSS Code复制内容到剪贴板 input:focus{border:1pxsolidblue;}

target伪类

CSS Code复制内容到剪贴板 <ahref="#more_info">MoreInformation</a> //位于页面其他地方、ID为more_info的那个元素就是目标。该元素可能是这样的: <h2id="more_info">Thisistheinformationyouarelookingfor.</h2> //那么,如下CSS规则 #more_info:target{background:#eee;}

结构化伪类

first-child 一组同胞元素的第一个

last-child

nth-child(3) 一组同胞元素的第三个

伪元素——似有实无的元素

first-letter

first-line

before 和 after

CSS Code复制内容到剪贴板 p.age::before{content:"Age:";} p.age::after{content:"years.";} //在类为age的p元素前面增加一段Age: p::first-letter{font-size:300%;} //放大p的第一个字母

继承和层叠

浏览器默认样式表

用户样式表

作者链接样式表(按照它们链接到页面的先后顺序)

作者嵌入样式

作者行内样式

越后面优先级越高

规则一:包含 ID 的选择符胜过包含类的选择符,包含类的选择符胜过包含标签名的选择符。

规则二:如果几个不同来源都为同一个标签的同一个属性定义了样式,行内样式胜过嵌入样式,嵌入样式胜过链接样式。在链接的样式表中,具有相同特指度的样式,后声明的胜过先声明的。

规则一胜过规则二。换句话说,如果选择符更明确(特指度更高),无论它在哪里,都会胜出。

规则三:设定的样式胜过继承的样式,此时不用考虑特指度(即显式设定优先)。下面简单解释一下规则三。比如下面的标记

Inheritance is weak in the Cascade

和下面的规则

div#cascade_demo p#inheritance_fact {color:blue;}

2 - 0 - 2(高特指度)

会导致单词“weak”变成蓝色,因为它从父元素 p 那里继承了这个颜色值。

但是,只要我们再给 em 添加一条规则

em {color:red;}

0 - 0 - 1 (低特指度)

em 就会变成红色。因为,虽然它的特指度低(0-0-1),但 em 继承的颜色值,会被为它明确(显式)指定的颜色值覆盖,就算(隐式)遗传该颜色值的规则的特指度高(2-0-2)也没有用。

【简介CSS中的各种选择符】相关文章:

CSS圆角技术

CSS复合选择器使用介绍

DIV+CSS常见的错误

CSS学习中的一些技巧

CSS代码中进行注释的三种方法

CSS基础教程:Class以及ID选择器

CSS改变文字被选择时的背景颜色

DIV垂直居中的办法

手写CSS应该注意的技巧

用firebug查看网页中的元素信息

精品推荐
分类导航