文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

css3选择器的基础知识点有哪些

2024-04-02 19:55

关注

本篇内容主要讲解“css3选择器的基础知识点有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css3选择器的基础知识点有哪些”吧!

一:属性选择器

[attr=val]:属性attr是val;
[attr*=val]:属性attr中包含val;
[attr^=val]:属性attr中开头是val;
[attr$=val]:属性attr结尾是val;

二:伪类选择器

:first-line,为某个元素中的第一行文字使用样式.
:first-letter,为某个元素中的文字的首字母(欧美文字)或第一个字(中文或日文等汉字)使用样式.
:before,在某个元素之前插入一些内容.
例如:.gys:before{content:'思思博士';}
:after,在某个元素之后插入内容.

:root,有效文本区域,即html区域
例子::root{ background:'red';}
body{ background:"yellow";}
这个时候整个页面背景就会变成黄色,而文本区域的背景色就是红色.
:not,排除不需要的子元素
例如:body *:not(h2){ color:red;} //body中所有的子元素,当时排除h2元素
:empty,当元素内容为空白是使用的样式.
:target,跳转到这个链接后,执行样式.
例如:
<a href="#test1">111111111111</a>
<a href="#test2">222222222222222</a>
<div id="test1">1111111111111111</div>
<div id="test2">222222222222</div>

#test1:target{ background-color:#000;}//跳转到id=test1时背景色变化

:first-child,第一个子元素
:last-child,最后一个子元素
:nth-child(n),指定父元素中第n的子元素.n如果是odd偶数序列的子元素,even技术序列的子元素
:nth-last-child(n),指定父元素中倒数第n的子元素,n如果是odd偶数序列的子元素,even基数序列的子元素
:nth-of-type(n),指定同类型中的指定n.
:nth-of-last-type(n),指定同类型中的倒数第n的元素.
:nth-child(an+i),循环使用样式.
例如:li:nth-child(4n+1){color:red;}
li:nth-child{4n+2}{ color:bluee;}
li:nth-child(4n+3){color:yellow;} 
li:nth-child(4n+4){color:black;}
:only-child,当父元素中只有一个子元素时使用.
例如:li:only-child{ color:red;}

三,表单伪类选择器

:active元素被激活(鼠标放下还没有抬起)
:focus获得焦点时,
:hover,鼠标悬浮在元素上
例如:input[type='text']:active{ color:#F00;}
input[type='text']:focus{ color:#F00; background-color:#960;}
input[type='text']:hover{ color:#0F0;}

:enabled,元素处于可用状态,
:disabled,元素处于不可用状态
:read-only,元素处于只读状态
:read-write,元素处于非只读状态

:checked,表单中radio或checkbox复选框处于选取状态时的样式
:default,当页面打开时默认处于选取状态的单选框或复选框的样式.
:indeterminate,用来指定页面打开时,如果一组单选框中任何一个单选框都没有设定选取状态时整租单选框的样式,如果用户选取其中任何一个单选框,这该样式被取消指定.目前只用opera支持.
:selection,但元素处于选中状态时的样子.

到此,相信大家对“css3选择器的基础知识点有哪些”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯