CSS视频教程,第3章 CSS选择器

课程目录
1 CSS元素选择器
2 CSS选择器分组
3 CSS类选择器
4 CSS id选择器
5 CSS属性选择器
6 CSS子选择器
7 CSS包含(后代)选择器
8 CSS派生选择器

1 CSS元素选择器

文档的元素就是最基本的选择器，类似css文件中h1{color:red}

2 CSS选择器分组

h1,h2,h3,h4,h5,h6{color: aquamarine;}

3 CSS类选择器

允许一个独立与文档元素的方式来制定样式，举例.clas{}，注意的是点开头，这是类选择器的标志，点后面的声明，花括号里面具体设置

            <div class="content1">荒野古道，白云悠悠。
            古道的尽头是一片连绵起伏的山脉，远远看去，见一座高峰，直插七层云海，欲与天接！
            古道之上，一个满身是血的消瘦男子，怀中抱着一个婴儿，正在奋力的奔跑。
            那男子一边奔跑，一边还不时的朝着身后张望，似乎身后有什么凶兽猛禽在追杀他。
            片刻之后，只见他身后的半空中出现了一道黑气，如翻滚的黑龙，朝他追击而来。
            消瘦男子看到黑气，脸色骤变，从后腰抽出一面三角小旗，旗帜上画着许多铭文图</div>

.content1{line-height: 24px;direction: rtl;}

4 CSS id选择器

id选择器的引用就是用”#”就和类选择器的“.”一样设置#content1{line-height: 24px;direction: rtl;}
id选择器和类选择器的区别：
①为标签设置id=“ID名称”，而不是class=“类名称”
②id选择器前面开头的是#号，而不是英文圆点

5 CSS属性选择器

对带有指定属性的html设置样式，而不限于class和id选择器，作用前提h5，IE6以下不支持属性选择器
举例属性和值选择器，title=‘php’的所有元素设置样式
<div title="php">时间燃着痛苦，为何生活如此狼狈</div>
[title=php]{color: saddlebrown;}/*针对title=php的html属性*/

6 CSS子选择器

用于选择指定标签的第一代子元素.food>li{border:1px solid red;}这样是什么选择器?答：子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。

7 CSS包含(后代)选择器

包含选择器即加入空格，用于选择器指定标签下的后辈元素；其中子选择器与后代选择器有何区别？
子选择器仅是指它的直接后代，作用于子元素的第一代后代，而后代选择器的作用是它作用于所有子后代元素，后代通过空格来选择，子选择器通过>;其中>作用于元素的第一代后代，空格作用于元素的所有后代

8 CSS派生选择器

允许根据文档的上下级关系来确定某个标签的样式，效果等同后代选择器