CSS3基础教程(三) - 博客详情

其它组合选择器有：子选择器、后代选择器、分组选择器和兄弟选择器等等。

1.子选择器

子元素选择器用于选择指定标签元素的第一代子元素。其写法就是把父级标签写在后面，中间跟个>进行连接，再写子元素。注意，符号左右两侧各保留一个空格。

例如：把id='mylist'后的第一代子元素li前面的小圆点去掉。

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="utf-8">
    <title>子选择器</title>
    <style>
        #mylist > li {
            list-style: none;
        }
    </style>
</head>
<body>

<h1>子选择器</h1>
<ul id="mylist">
    <li class="fruit">
        水果
        <ul>
            <li>苹果</li>
            <li>香蕉</li>
            <li>菠萝</li>
        </ul>
    </li>
    <li class="vg">
        蔬菜
        <ul>
            <li>土豆</li>
            <li>西红柿</li>
            <li>黄瓜</li>
        </ul>
    </li>
    <li class="appliances">
        家电
        <ul>
            <li>电视机</li>
            <li>冰箱</li>
            <li>洗衣机</li>
        </ul>
    </li>


</ul>
</body>
</html>

运行效果：

2.后代选择器

即加入空格,用于选择指定标签元素下的后辈元素。请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

==总结：>作用于元素的第一代后代，空格作用于元素的所有后代。== 上面的例子，如果改写为后代选择器，其效果是id='mylist'后的所有li元素的小圆点都去除。

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="utf-8">
    <title>后代选择器</title>
    <style>
        #mylist  li {
            list-style: none;
        }
    </style>
</head>
<body>

<h1>后代选择器</h1>
<ul id="mylist">
    <li class="fruit">
        水果
        <ul>
            <li>苹果</li>
            <li>香蕉</li>
            <li>菠萝</li>
        </ul>
    </li>
    <li class="vg">
        蔬菜
        <ul>
            <li>土豆</li>
            <li>西红柿</li>
            <li>黄瓜</li>
        </ul>
    </li>
    <li class="appliances">
        家电
        <ul>
            <li>电视机</li>
            <li>冰箱</li>
            <li>洗衣机</li>
        </ul>
    </li>


</ul>
</body>
</html>

运行效果：

3.分组选择器

在样式表中有很多具有相同样式的元素。为了尽量减少代码，你可以使用分组选择器。每个选择器用逗号分隔。

例如：对页面中的p,div,img元素使用统一的边框样式。

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="utf-8">
    <title>分组选择器</title>
    <style>
        p,div{
            margin: 0px auto;
            width: 600px;
            height: auto;
            text-indent: 2em;
        }

        p,div,img {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>

<h1>分组选择器</h1>
<p>
    HTML的英文全称是 Hypertext Marked
    Language，即超文本标记语言。HTML是基于SGML语言演变而来的，并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据，使用HTML语言描述的文件需要通过WWW浏览器显示出效果。HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将影像、声音、图片、文字动画、影视等内容显示出来。
</p>
<br>
<div>
    HTML的英文全称是 Hypertext Marked
    Language，即超文本标记语言。HTML是基于SGML语言演变而来的，并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据，使用HTML语言描述的文件需要通过WWW浏览器显示出效果。HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将影像、声音、图片、文字动画、影视等内容显示出来。

</div>

<img src="http://img.simoniu.com/CSS%E7%AE%80%E4%BB%8B02.jpg"/><br>
</body>
</html>

运行效果：

4.兄弟选择器

相邻兄弟选择器（以加号分隔）例：p+h3{样式} 只对p后的相邻的h3有效。

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="utf-8">
    <title>相邻兄弟选择器</title>
    <style>
        p+h3 { background-color: #0099FF; /* 设置背景色 */ }
    </style>
</head>
<body>

<h1>相邻兄弟选择器</h1>
<p>我是一个段落的内容1</p>
<h3>相邻选择器h3</h3>
<h2>相邻选择器h2</h2>
<h3>相邻选择器h3</h3>
</body>
</html>

运行效果：

普通兄弟选择器（以破折号分隔）例：p~h3{样式} 对p后所有的h3都有效。

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="utf-8">
    <title>普通兄弟选择器</title>
    <style>
        p~h3 { background-color: #0099FF;   /* 设置背景色 */ }
    </style>
</head>
<body>

<h1>普通兄弟选择器</h1>

<h3>相邻选择器h3</h3>
<h2>相邻选择器h2</h2>
<p>我是一个段落的内容1</p>
<h3>相邻选择器h3</h3>
<h2>相邻选择器h2</h2>
<h3>相邻选择器h3</h3>
</body>
</html>

运行效果：