脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS教程 >

简介CSS中的各种选择符

segmentfault   发布时间：2015-07-17 18:58:45   作者：suemi   我要评论
这篇文章主要介绍了CSS中的各种选择符,是CSS入门学习中的基础知识,需要的朋友可以参考下

类型，类和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入门学习中的基础知识,需要的朋友可以参考下
    2015-08-01

  • 详解CSS中的类和ID选择符

    这篇文章主要介绍了CSS中的类和ID选择符,是CSS入门学习中的基础知识,需要的朋友可以参考下
    2015-08-01

  • CSS中的选择符实际使用指南

    这篇文章主要介绍了CSS中的选择符实际使用指南,是CSS入门学习中的基础知识,需要的朋友可以参考下
    2015-07-28

  • 几个特殊的CSS选择符使用介绍

    这篇文章主要介绍了几个特殊的CSS选择符使用，在某些特殊情况下还是比较实用的，需要的朋友可以参考下
    2014-08-20

  • css选择符类型详细介绍

    这篇文章主要介绍了css选择符类型详细介绍，包括标签选择符、类选择符、ID选择符、包含选择符、通配选择符、选择符分组、标签指定式选择符、组合选择符,需要的朋友可以参考
    2014-04-16

  • CSS 选择符的用法和实例

    成天都要与样式打交道的朋友，相信对CSS选择符(CSS Selectors)都不会陌生。不过对于刚接触或者还不是很熟悉css的朋友来说，能够找到一份对于CSS选择符的相关例子集合，还是
    2009-12-08

  • 详解如何编写高效的 CSS 选择符

    本篇文章主要介绍了详解如何编写高效的 CSS 选择符，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-10

最新评论

关注微信公众号

扫一扫