天天看点

基本CSS选择器,复合选择器,后代选择器

基本CSS选择器有标记选择器、类别选择器、ID选择器3种

1。标记选择器

    每一种HTML标记的名称都可以作为相应的标记选择器的名称,如h1,p,等等

2。类别选择器

    类别选择器的名称可以由用户自定义

   格式如下:.class{color:green;font-size:20px;}

3。ID选择器

    与类别选择器相试

   格式如下:#id{color:green;font-size:20px;}

复合选择器:就是两个或者多个基本选择器,通过不同方式连接而成的选择器

有两种情况:”交集“选择器、“并集”选择器 

1。“交集”选择器:由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集,其中第一必须是标记选择器,第二个必须是类别选择器或者ID选择器,两个选择器之间不能有空格,必须连续书写

如:h3.class{color:red;font-size:23px;}

2。“并集”选择器:同时选中各个基本选择器所选择的范围,任何形式的选择器都可以,并集选择器是多个选择器通过逗号连接而成的,

格式如:h1,h2,h3{color:red;font-size:23px;}

后代选择器:

后代选择器书写方法:把外层的标记写在前面,内层的标记写在后面,之间用空格分隔,当标记发生嵌套时,内层的标记就成为外层标记的后代了

举个列子

基本CSS选择器,复合选择器,后代选择器

<html>

基本CSS选择器,复合选择器,后代选择器

<head>

基本CSS选择器,复合选择器,后代选择器

<title>后代选择器</title>

基本CSS选择器,复合选择器,后代选择器

<style type="text/css">

基本CSS选择器,复合选择器,后代选择器

p span{

基本CSS选择器,复合选择器,后代选择器

   color:red

基本CSS选择器,复合选择器,后代选择器

}

基本CSS选择器,复合选择器,后代选择器

span

基本CSS选择器,复合选择器,后代选择器

{

基本CSS选择器,复合选择器,后代选择器

  color:blue;

基本CSS选择器,复合选择器,后代选择器
基本CSS选择器,复合选择器,后代选择器

</style>

基本CSS选择器,复合选择器,后代选择器

</head>

基本CSS选择器,复合选择器,后代选择器

<body>

基本CSS选择器,复合选择器,后代选择器

<p>嵌套<span>用CSS</span>标记的方法</p>嵌套之外的<span>标记</span>不生效

基本CSS选择器,复合选择器,后代选择器

</body>

基本CSS选择器,复合选择器,后代选择器

</html>

基本CSS选择器,复合选择器,后代选择器

效果是:“用CSS”的显示红色,其他用<span>包围起来的是兰色

后代选择器产生的影响不仅限于元素的“直接后代”,而且会影响到它的“各级后代”

子选择器:也就是只有对直接后代有影响的选择器,而对“孙子”以及对个层的后代不产生作用。

格式如下:p>span{color:blue;}

本文转自    风雨萧条 博客,原文链接:   http://blog.51cto.com/1095221645/1792385     如需转载请自行联系原作者