墨记 day2|自学编程:CSS选择器
21个月前
638 1
+1
分享 收藏

一、标签选择器 对于HTML中的标签都可以使用标签选择器。例如:',

,,

,'等。

​代码: 选择器{ 样式 } 例如: body{colro:red}

二、类选择器

语法: .类选择器名称{CSS样式代码}

使用方法: 第一步:用合适的标签把要修饰的内容标记起来 第二步:使用class="类选择器名称"为标签设置一个类 第三步:设置类选择器CSS样式

三、ID选择器

语法:

#ID名称{CSS样式代码} 用法同类选择器,不在细说。

类选择器和ID选择器的区别: ID选择器在HTML文档中只能使用一次,类选择器可以多次使用

四、子选择器

子选择器用来选择制定标签的第一代子元素。

语法: .选择器名称>子元素

例如: .food>li{border:1px solid red;}

五、包含选择器

加入空格,用来选择制定标签下的后辈元素

例如: .first span{color:red;}

六、通用选择器 通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素

语法: *{CSS样式}

七、伪类选择器

更有趣的是伪类选择符,为什么叫做伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:

例如: a:hover{css样式}

即为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。

八、分组选择器

想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,),如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色:

例如: h1,span{CSS样式}

标签
评论 0
写评论
提交

暂无点评,你也可以点评哦:)

添加到资源集
+创建资源集
取消
确定
新建资源集 ×
标题:
描述:

返回
创建
用户名不正确!
下次自动登录
×
创建资源集目前仅对内测用户开放,点击获取内测权限。