码迷,mamicode.com
首页 > Web开发 > 详细

【html】CSS选择器

时间:2015-08-01 09:57:32      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:

CSS选择器有:

  • 元素选择器
  • 选择器分组*
  • 类选择器
  • ID选择器
  • 属性选择器*
  • 后代选择器*
  • 子元素选择器*
  • 相邻兄弟选择器*

选择器分组:

h1,h2{
/*同时对h1,h2定义样式*/
   ...
}

 

通配符“*”:

*{
   ...
}
/*用“*对所有元素定义样式*/

 

类选择器+标签选择器:

<h class="cww" ...>
<a class="cww" ...>

a.cww{
    ...      
}

 

多类选择器:

<p class="p1">...</p>
<p class="p2">...</p>
<p class="p1 p2">...</p>

.p1{
   ...
}   

.p2{
   ...
}

.p1.p2{
   ...
}

其中".p1.p2"会包含自身样式以及前面".p1"和".p2"的样式。

 

id选择器:

<p id="cww">...</p>

#cww{
   ...
}
/*用“#”定位*/
  • 使用js需要用到获取id
  • id只能一次性使用,而类可以多次使用
  • id选择器不可以结合使用

 

属性选择器:

<a href="http://www.cww.com">...</a>
<a href="http://www.mochayo13.com">...</a>

/*对属性href定义样式*/
[href]{
   ...
}
  • 属性选择器可以具体到属性值来下定义
  • 可以根据部分属性选择,
    <p tltle="cw"></p>
    <p tltle="cww"></p>
    <p tltle="cww13"></p>
    
    
    [title~="cww"]{
       ...
    }
    /*“~”可以理解为省略,即该样式只对title属性值包含“cww”字符串的部分元素作用*/

     

后代选择器:

<!DOCTYPE html>
<html>
<body>
    <p>米娜桑,<b>这里是<i>陈玩玩</i></b>,早安QwQ</p>
</body>

<style>
    p b i{
       color: blue;
    }
</style>
</html>

效果如下:

技术分享

相比用class,id来实现,这样要快很多。

 

子元素选择器:

/*仍用上述的例子:*/
<!DOCTYPE html>
<html>
<body>
    <p>米娜桑,<b>这里是<i>陈玩玩</i></b>,早安QwQ</p>
</body>

<style>
    p>b>i{
       color: blue;
    }
</style>
</html>

注意这里通过子元素定义的格式,用到符号“>”一层一层表示:

 p>b>i{
       color: blue;
    }
  • 注意子元素选择器和后代选择器的区别,前者要定义<i></i>中内容需要通过先找到<b></b>,共三层关系一个不能漏;而后者则可以直接由<p>转到<i>可以省略中间的<b>层。

 

相邻兄弟选择器:

  • 从相邻元素的后一个开始作用
  • 必须属于同一父元素

 

【html】CSS选择器

标签:

原文地址:http://www.cnblogs.com/suzyc/p/4693625.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!