CSS选择器的作用

一、CSS选择器的作用就是选择自己需要的标签。

二、选择器的类型有许多,主要的有标签选择器、类选择器、id选择器、通配符选择器……

选择器示例示例说明断续器
.类.intro选择所有class=“intro”的元素1
#编号#firstname选择所有id=“firstname”的元素1
**选择所有元素2
元素p选择所有<p>元素1
元素,元素div,p选择所有<div>元素和<p>元素1
元素元素div p选择<div>元素内的所有<p>元素1
元素>元素div>p选择所有父级是 <div> 元素的 <p> 元素2
元素+元素div+p选择所有紧跟在 <div> 元素之后的第一个 <p> 元素2
[属性][target]选择所有带有target属性元素2
[属性=值][target=-blank]选择所有使用target=“-blank”的元素2
[属性~=值][title~=flower]选择标题属性包含单词“flower”的所有元素2
[属性|=语言][lang|=en]选择 lang 属性等于 en,或者以 en- 为开头的所有元素2
:友情链接a:link选择所有未访问链接1
:已访问a:visited选择所有访问过的链接1
:活跃a:active选择活动链接1
:悬停a:hover选择鼠标在链接上面时1
:专注input:focus选择具有焦点的输入元素2
:首字母p:first-letter选择每一个<p>元素的第一个字母1
:一线p:first-line选择每一个<p>元素的第一行1
:第一个孩子p:first-child指定只有当<p>元素是其父级的第一个子级的样式。2
:之前p:before在每个<p>元素之前插入内容2
:之后p:after在每个<p>元素之后插入内容2
:郎(语言)p:lang(it)选择一个lang属性的起始值=“it”的所有<p>元素2
元素1~元素2p~ul选择p元素之后的每一个ul元素3
[属性^=值]a[src^=“https”]选择每一个src属性的值以“https”开头的元素3
[属性$=值]a[src$=“.pdf”]选择每一个src属性的值以“.pdf”结尾的元素3
[属性*=值]a[src*=“runoob”]选择每一个src属性的值包含子字符串“runoob”的元素3
:类型第一p:类型第一选择每个p元素是其父级的第一个p元素3
:最后一次p:最后一个类型选择每个p元素是其父级的最后一个p元素3
:仅限类型p:仅键入选择每个p元素是其父级的唯一p元素3
:独生子女p:独生子女选择每个p元素是其父级的唯一子元素3
:第 n 个子(n)p:第n个子(2)选择每个p元素是其父级的第二个子元素3
:第 n 个最后一个子(n)p:第n个最后一个孩子(2)选择每个p元素的是其父级的第二个子元素,从最后一个子项计数3
:第 n 个类型(n)p:第 n 个类型(2)选择每个p元素是其父级的第二个p元素3
:第 n 个类型的最后一个(n)p:第 n 个类型的最后一个(2)选择每个p元素的是其父级的第二个p元素,从最后一个子项计数3
:最后一个孩子p:最后一个孩子选择每个p元素是其父级的最后一个子级。3
:根:根选择文档的根元素3
:空p:空选择每个没有任何子级的p元素(包括文本节点)3
:目标#news:目标选择当前活动的#news元素(包含该锚名称的点击的URL)3
:已启用输入:已启用选择每一个已启用的输入元素3
:d可信赖输入:禁用选择每一个禁用的输入元素3
:已选中输入:选中选择每个选中的输入元素3
:不(选择器):not(p)选择每个并非p元素的元素3
::选择::选择匹配元素中被用户选中或处于高亮状态的部分3
:超出范围:超出范围匹配值在指定区间之外的input元素3
:范围内:范围内匹配值在指定区间之内的input元素3
:读写:读写用于匹配可读及可写的元素3
:只读:只读用于匹配设置 “readonly”(只读) 属性的元素3
:可选:可选用于匹配可选的输入元素3
:必填:必填用于匹配设置了 “required” 属性的元素3
:有效:有效用于匹配输入值为合法的元素3
:无效:无效用于匹配输入值为非法的元素
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值