一、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~元素2 | p~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 |
:无效 | :无效 | 用于匹配输入值为非法的元素 |