巨推学院

Web前端开发-CSS入门干货02

关于CSS基础选择器、字体系列样式、文本样式以及CSS使用方式,参见Web前端开发-CSS入门干货01。下面再补充下属性选择器。e)属性选择器CSS 属性选择器可以根据元素的属性以及属性值来选择元素,其中类选择器和ID选择 ...

Web前端开发-CSS入门干货02


关于CSS基础选择器、字体系列样式、文本样式以及CSS使用方式,参见Web前端开发-CSS入门干货01。下面再补充下属性选择器。

e)属性选择器

CSS 属性选择器可以根据元素的属性以及属性值来选择元素,其中类选择器和ID选择器是属性选择器的特例。

属性选择器语法:

[属性] {样式}:为含有属性的标签设定样式;

[属性=属性值] {样式}:为含有属性且特定属性值的标签设定样式;

[属性=^部分属性值] {样式}:为含有属性且属性值的开头是满足条件的标签设定样式;

[属性$=部分属性值] {样式}:为含有属性且属性值的结尾是满足条件的标签设定样式;

[属性*=部分属性值] {样式}::为含有属性且属性值中含有满足条件片段的标签设定样式;

Web前端开发-CSS入门干货02

注意:IE7 和 IE8 需声明 !DOCTYPE 才支持属性选择器!IE6 和更低的版本不支持属性选择器。

1.CSS复合选择器


(1)复合选择器是什么

复合选择器是由两个或多个选择器通过不同方式组合而成,其中选择器可以说基础选择器也可以是复合选择器。

(2)复合选择器分类

后代选择器、子选择器、并集选择器、伪类选择器等

1)后代选择器

后代选择器:对于嵌套元素,通过后代选择器可以选择到所有后代元素。

应用语法:选择器1 选择器2 {样式}

通过上述语法可以将选择器1下的选择器2所对应的所有元素设定为相应样式。

Web前端开发-CSS入门干货02


2)子选择器

子选择器:对于嵌套元素,通过子选择器可以选择到子元素。

应用语法:选择器1>选择器2 {样式}

通过上述语法可以将选择器1下的选择器2直接对应的元素设定为相应样式。

Web前端开发-CSS入门干货02

后代选择器和子选择器的区别在于,后代选择器会选择所有复合条件的后代,包括儿子、孙子以及更多;子选择器回选择复合条件的儿子元素。


3)并集选择器

并集选择器:可以同时选择多个选择器,并为它们对应相同的样式。

应用语法:选择器1,选择器2 {样式}

通过上述语法可以将选择器1、选择器2对应的元素均设定为相应样式。

Web前端开发-CSS入门干货02


4)伪类选择器

伪类选择器:用于对元素添加特殊效果,比如给链接添加特殊效果

伪类选择器分类:链接伪类选择器、:focus伪类选择器

Web前端开发-CSS入门干货02


a)链接伪类选择器

a:link /*选择所有未被访问的链接*/

a:visited /*选择所有已被访问的链接*/

a:hover /*选择鼠标指针所在的链接*/

a:active /*选择活动链接(鼠标按下未弹起的链接)*/

为确保链接伪类选择器设定生效,在设置时需要按照LVHA的顺序进行。

b):focus伪类选择器

其用于选择获得焦点表单元素。

input:focus /选择input类表单元素/

2.CSS样式-背景


接着在Web前端开发-CSS入门干货01中介绍的字体、文本系列样式,下面介绍背景。

c)背景系列,属性有背景颜色、背景图片、背景平铺、背景图像固定、背景图片位置等;backgroud-color、backgroud-image、background-repeat、background-attachment、background-position;

Web前端开发-CSS入门干货02



Web前端开发-CSS入门干货02


#学问分亨官##闪光时刻二期##闪光时刻第二期主题征文#
分享到:
版权声明:本网页内容(包含但不限于文字、图片、视频)由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至zhanzhangtoutiao@163.com举报,一经查实,本站将立刻删除。
投诉

登录后发表评论

已有 4 人参与

评论

相关推荐

繁花即一梦

846篇文章

TA的文章
广告
广告
广告
  • 今日热文
  • 本周热文
  • 本月热文
小编推荐    
热门搜索     更多>>>
返回顶部