CSS-选择器1-概述-阿里云开发者社区

开发者社区> java小工匠> 正文

CSS-选择器1-概述

简介: CSS选择器-系列文章 选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素。 1 #id #firstname 选择 id="firstname" 的所有元素。
+关注继续查看

CSS选择器-系列文章

选择器 例子 例子描述 CSS
.class .intro 选择 class="intro" 的所有元素。 1
#id #firstname 选择 id="firstname" 的所有元素。 1
* * 选择所有元素。 2
element p 选择所有 p 元素。 1
eleme element div,p 选择所有 div 元素和所有 p 元素。 1
element element div p 选择 div 元素内部的所有 p 元素。 1
element>element div>p 选择父元素为 div 元素的所有 p 元素。 2
element+element div+p 选择紧接在 div 元素之后的所有 p 元素。 2
element1~element2 div~p 选择在div元素之后的所有p元素。 3
:link a:link 选择所有未被访问的链接。 1
:visited a:visited 选择所有已被访问的链接。 1
:active a:active 选择活动链接。 1
:hover a:hover 选择鼠标指针位于其上的链接。 1
:focus input:focus 选择获得焦点的 input 元素。 2
:checked input:checked 选择每个被选中的 input 元素。 3
:enabled input:enabled 选择每个启用的 input 元素。 3
:disabled input:disabled 选择每个禁用的 input 元素 3
:first-letter p:first-letter 选择每个 p 元素的首字母。 1
:first-line p:first-line 选择每个 p 元素的首行。 1
::selection ::selection 选择被用户选取的元素部分。 3
:before p:before 在每个 p 元素的内容之前插入内容。 2
:after p:after 在每个 p 元素的内容之后插入内容。 2
[attribute] [target] 选择带有 target 属性所有元素。 2
[attribute=value] [target=_blank] 选择 target="_blank" 的所有元素。 2
[attribute~=value] [title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。注意是以单词为单位的,不能匹配单词的一半 2
[attribute1=value] [lang1=en] 选择 lang 属性值以 "en" 开头的所有元素。竖线等号 注意是以单词为单位的,不能匹配单词的一半 2
[attribute^=value] a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 a 元素。 3
[attribute$=value] a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 a 元素。 3
[attribute*=value] a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 a元素。 3
:first-child p:first-child 选择属于父元素的第一个子元素的每个 p元素。 2
:last-child p:last-child 选择属于其父元素最后一个子元素每个 p 元素。 3
:only-child p:only-child 选择属于其父元素的唯一子元素的每个 p 元素。 3
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 p 元素。 3
:nth-last-child(n) p:nth-last-child(2) 同上,从最后一个子元素开始计数。 3
:first-of-type p:first-of-type 选择属于其父元素的首个 p 元素的每个 p 元素。 3
:last-of-type p:last-of-type 选择属于其父元素的最后 p 元素的每个 p 元素。 3
:only-of-type p:only-of-type 选择属于其父元素唯一的p 元素的每个 p 元素。 3
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 p 元素的每个p元素。 3
:nth-last-of-type(n) p:nth-last-of-type(2) 同上,但是从最后一个子元素开始计数。 3
:empty p:empty 选择没有子元素的每个 p元素(包括文本节点)。 3
:not(selector) :not(p) 选择非 p元素的每个元素。 3
:root :root 选择文档的根元素。 3
:target #news:target 选择当前活动的 #news 元素。 3

CSS选择器-系列文章
下一节 CSS选择器2-类选择器
CSS3参考手册

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9488 0
css2.1中的属性选择器(css高手请绕道)
早上看了司徒先生的js版属性选择器(http://www.cnblogs.com/rubylouvre/archive/2009/10/27/1590102.html),也激发了我深入了解css选择器的学习欲望, 整理于此以便日后备查 *:匹配任何元素。
830 0
使用css修改checkbox选择框的样式
二. 修改思路: 给原本的checkbox框加上visibility: hidden;属性,使其隐藏同时又占据原本在页面上面的位置,说直白点就是,使checkbox看不见,但是仍然占有原来的位置。
1256 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
2922 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13168 0
CSS_选择器
版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/54696007 类选择器 class 属性规定元素的类名(classname) 类选择器以一个点号显示 .center {text-align: center} class类似一个标记。
666 0
Scrapy CSS选择器
官方文档的CSS选择器太简短,整理了一个比较全的。 * 选择所有节点 #container 选择id为container的节点 .
598 0
+关注
java小工匠
个人研究方向: 微服务、netty、物联网、mqtt、modbus、工作流、流程设计器、消息中间件、高并发、大数据 、区块链等
103
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载