CSS视频教程|CSS选择器

弹指间学会CSS admin 632浏览

第3章CSS选择器

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

CSS元素选择器

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

CSS选择器分组

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

CSS类选择器

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

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

CSS id选择器

id选择器的引用就是用”#”就和类选择器的“.”一样设置#content1{line-height: 24px;direction: rtl;}

id选择器和类选择器的区别:

①为标签设置id=“ID名称”,而不是class=“类名称”

②id选择器前面开头的是#号,而不是英文圆点

CSS属性选择器

对带有指定属性的html设置样式,而不限于class和id选择器,作用前提h5,IE6以下不支持属性选择器

举例属性和值选择器,title=‘php’的所有元素设置样式

<div title="php">时间燃着痛苦,为何生活如此狼狈</div>
[title=php]{color: saddlebrown;}/*针对title=php的html属性*/

CSS子选择器

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

CSS包含(后代)选择器

包含选择器即加入空格,用于选择器指定标签下的后辈元素;其中子选择器与后代选择器有何区别?

子选择器仅是指它的直接后代,作用于子元素的第一代后代,而后代选择器的作用是它作用于所有子后代元素,后代通过空格来选择,子选择器通过>;其中>作用于元素的第一代后代,空格作用于元素的所有后代

CSS派生选择器

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

转载请注明:大灰牛博客 » CSS视频教程|CSS选择器