简介CSS中的各种选择符

所属分类: 网页制作 / CSS 阅读数: 219
收藏 0 赞 0 分享

类型,类和ID选择器

    带有空格的字体名称要用''引起来
    对选择器分组可使同一规则适用于多个选择器,例子如下

CSS Code复制内容到剪贴板
  1. th,td {   
  2.     padding:0 10px 00;   
  3. }  

    选项的优先级

CSS Code复制内容到剪贴板
  1. h1 {   
  2.     font-family:'Times New Roman',serif;   
  3. }   
  4. //先选用前者,没有前者,再使用后者  

    类型名与类名中间不应有空格 div.btn-success
    通用选择器*,适用于文档所有元素

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

    后代选择器

CSS Code复制内容到剪贴板
  1. div.planet table td {   
  2.     padding:0 10px 0 0;   
  3. }   
  4. //是类为planet的div元素的后代table的后代的td样式  

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

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

    同胞选择符~和+

section ~ p {
    font-style:Italic;
}
//p在section后面就行
section + p {font-style:Italic;}
//p必须紧跟section

    非子选择符

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

    ID选择器

属性选择器

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

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

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

CSS Code复制内容到剪贴板
  1. a:visited {   
  2.     color:mangenta;   
  3. }  
  4. //被访问过的链接

UI伪类
链接伪类

    Link。此时,链接就在那儿等着用户点击。
    Visited。用户此前点击过这个链接。
    Hover。鼠标指针正悬停在链接上。
    Active。链接正在被点击(鼠标在元素上按下,还没有释放)。

focus伪类——鼠标放在上面

CSS Code复制内容到剪贴板
  1. input:focus {border:1px solid blue;}  

target伪类

CSS Code复制内容到剪贴板
  1. <a href="#more_info">More Information</a>     
  2. //位于页面其他地方、ID 为 more_info 的那个元素就是目标。该元素可能是这样的:   
  3.   
  4.   
  5. <h2 id="more_info">This is the information you are looking for.</h2>   
  6.   
  7.   
  8. //那么,如下 CSS 规则   
  9. #more_info:target {background:#eee;}  

结构化伪类

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

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

    first-letter
    first-line
    before 和 after

CSS Code复制内容到剪贴板
  1. p.age::before {content:"Age: ";}   
  2. p.age::after {content:" years.";}   
  3. //在类为age的p元素前面增加一段Age:    
  4. p::first-letter {font-size:300%;}   
  5. //放大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的盒模型造成的。 #test{margin:10px;padding:10px;width:100px;height:100px;}
收藏 0 赞 0 分享

在IE流览器中正确显示PNG透明图片

  png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景,如:在有颜色过度背景上插入不规则边框的图片带来极大很便利!   但目前IE中对于插入
收藏 0 赞 0 分享

CSS教程:DIV底部放置文字

  css对文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近的距离还可以精确到像素,自己可以调节,是不是很不错呢?
收藏 0 赞 0 分享

如何用CSS让文字居于div的底部

  这个问题是别人提出的,因为css对文字的布局上没有靠容器底部对齐的参数,(或许有但是我没有发现)不过目前我使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,我用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近
收藏 0 赞 0 分享

从A页面连接到B页面后并直接把B页面的隐藏层显示

  这个效果实现的是,在B页面里有两个层,一个显示层,我们暂定名c层,一个是隐藏层,我们暂定名d层,单独进B页面的时候,c层显示,d层隐藏,然而从A页面连接到B页面的时候,则是让d层显示,c层隐藏,我觉得这个效果对网页设计者以后会有很大帮助,现在把代码发出来,
收藏 0 赞 0 分享

CSS样式表定义标签li前面样式

定义LI前面的小点样式 view plaincopy to clipboardprint? 语法: list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lowe
收藏 0 赞 0 分享

符合标准的div css制作的弹出菜单

本文介绍了五款符合标准的div css制作的弹出菜单,而且不含有js的. NO.1最基本的:二级dropdown弹出菜单 <!DOCTYPE html PUB
收藏 0 赞 0 分享

CSS实现在文章每段后面加入带连接的隐藏文字

代码主要理解3个参数:createElement、createTextNode、appendChild。这3个js参数分别是创建元素、创建字符、追加节点。代码原理:循环页面段落标签<p>,创建连接元素<a>,创建要显示的连接字符,用SetAttribute
收藏 0 赞 0 分享

CSS:浏览器特定选择器介绍

当你想在一个浏览器里改变样式而不像在其他浏览器中改变时,这些选择器很有用。 IE6以下 *html{} IE 7 以下 *:first-child html {} * html {} 只对IE 7 *:first-child html {} 只对IE 7
收藏 0 赞 0 分享

WEB标准学习,认识两种网页声明的含义

即网页标准推出来以后,我们时常会看到两种不同的网页的声明,一个是Dhtml,一个是Xhtml。如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht
收藏 0 赞 0 分享
查看更多