手记

【金秋打卡】第6天 CSS3中的选择器(三)

课程名称:十天精通CSS3

课程章节: 征服CSS3选择器(下)

主讲老师:大漠

课程内容:

今天学习的内容包括:enabled选择器的使用?:disabled选择器的使用?:checked选择器的使用?::selection选择器的使用? :read-only选择器的使用? :read-write选择器的使用?::before::after的使用?

课程收获:

enabled用于有些表单元素有可用(:enabled)和不可用(:disabled)状态,其中有输入框,密码框,复选框等。在默认情况之下,这些表单元素都处在可用状态。那么我们可以通过伪选择器:enabled对这些表单元素设置样式,下面我们使用enabled对输入框进行设置。

:disabled选择器刚好与:enabled选择器相反,用来选择不可用表单元素。要正常使用:disabled选择器,需要在表单元素的HTML中设置“disabled”属性。通过“:disabled”选择器,给不可用输入框设置明显的样式。下面将不可操作的按钮设置为灰色。

在表单元素中,单选按钮和复选按钮都具有选中和未选中状态。我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。而“:checked”表示的是选中状态。我们通过“:checked”状态来自定义复选框效果。

::selection伪元素是用来匹配突出显示的文本指的是我们用鼠标选择文本时的文本。浏览器默认情况下,用鼠标选择网页文本是以“深蓝的背景,白色的字体”显示的,我们可以实现我们需要的颜色。有的时候设计要求,不使用上图那种浏览器默认的突出文本效果,需要一个与众不同的效果,那么我们就可以使用这个伪元素。我们需要的是在Firefox浏览器还需要添加前缀。

:read-only伪类选择器用来指定处于只读状态元素的样式。

:read-write主要用来指定当元素处于非只读状态时的样式。

::before::after这两个主要用来给元素的前面或后面插入内容,这两个常和"content"配合使用,使用的场景最多的就是清除浮动。

今天学习了边框的7-1到7-8的8个小结,花费了60分钟,今天学习了很多写特效用到的选择器,我们可以使用enabled对输入框设置我们想要的边框或者阴影效果。我们还可以使用disabled将一些不可以选中的按钮,设置成灰色,从而用户更直观的可以看到这个效果。我们平时在网站按住鼠标移动文字的时候,发现颜色不是我们想要的,我们就可以使用::selection来设置。除此之外::before::after是我们工作中用到比较多的,我们可以用它们实现箭头效果还可以在各种元素中添加小图标或者其他文字。

1人推荐
随时随地看视频
慕课网APP