CSS选择器

已于 2024-08-09 22:32:48 修改
阅读量471 收藏 9
点赞数 7
分类专栏： CSS3基本功 文章标签： CSS 元素选择器 类选择器 ID选择器 属性选择器 伪类选择器 伪元素选择器
于 2024-08-09 21:56:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011506951/article/details/140966791
版权

文章目录

前言

CSS之所以强大，很大一部分原因都要归结于它的选择器，非常丰富，特别灵活。

本文不讲选择器的机制和原理，只对选择器进行汇总，把经常使用的列举出来，作为工具类文章，方便日后参考和查阅。

元素选择器

匹配文档中同一类型的所有元素。

/* 匹配文档根元素 */
body {
    font-size: 20px;
}

/* 匹配文档中所有的<div>元素 */
div {
    border: solid 1px red;
}

类选择器

元素必须要有class属性，属性值可以有多个，其中一个或多个属性值能和选择器匹配即可。

/* 匹配class属性值含有"info"的任意元素 */
.info {
    border: solid 1px red;
}

/* 匹配class属性值含有"info"的<div>元素 */
div.info {
    font-size: 24px;
}

/* 匹配class属性值含有"photo"和"image"的任意元素，属性值顺序不重要 */
.image.photo {
    width: 100px;
    height: 100px;
}

ID选择器

元素必须要有id属性。

/* 匹配id属性值为"content"的任意元素 */
#content {
    border: solid 1px red;
}

/* 匹配id属性值为"content"的<div>元素 */
div#footer {
    border: solid 1px red;
}

属性选择器

简单属性选择器

元素声明了某个属性即可，不用关心属性值是什么。

/* 匹配具有title属性的任意元素 */
[title] {
    color: red;
}

/* 匹配具有title属性的<a>元素 */
a[title] {
    color: green;
}

属性值完全匹配选择器

元素具有某个属性，且属性值完全相等。

/* 匹配具有title属性，且属性值为"content"的任意元素 */
[title="content"] {
    border: solid 1px red;
}

/* 匹配具有title属性，且属性值为"content"的<a>元素 */
a[title="content"] {
    border: solid 1px red;
}

属性值部分匹配选择器

针对可以设置多个值（空格分隔）的属性，其中一个属性值能匹配即可。

/* 匹配具有title属性，且属性值含有"any"的任意元素 */
[title~="any"] {
    border: solid 1px red;
}

/* 匹配具有title属性，且属性值含有"any"的<a>元素 */
a[title~="any"] {
    border: solid 1px red;
}

属性值包含字符串选择器

属性值字符串包含某个子串。

/* 匹配title属性值包含"part"子串的任意元素 */
[title*="part"] {
    border: solid 1px red;
}

/* 匹配title属性值包含"part"子串的<a>元素 */
a[title*="part"] {
    border: solid 1px red;
}

属性值匹配起始字符串选择器

属性值以某个字符串开始。

/* 匹配title属性值以"start"字符串开始的任意元素 */
[title^="start"] {
    color: green;
}

/* 匹配title属性值以"start"字符串开始的<a>元素 */
a[title^="start"] {
    color: green;
}

属性值匹配结尾字符串选择器

属性值以某个字符串结尾。

/* 匹配title属性值以"end"字符串结尾的任意元素 */
[title$="end"] {
    color: green;
}

/* 匹配title属性值以"end"字符串结尾的<a>元素 */
a[title$="end"] {
    color: green;
}

属性值匹配连字符字符串选择器

指定一个字符串string，属性值等于string或者以string-开头，就能匹配。

/* 匹配lang属性值等于"zh"或者以"zh-"开头的任意元素 */
[lang|="zh"] {
    color: green;
}

/* 匹配lang属性值等于"zh"或者以"zh-"开头的<html>元素 */
html[lang|="zh"] {
    color: green;
}

结构选择器

后代选择器

匹配指定元素的后代子元素，子元素在第几层级都可以。

/* 匹配<div id="app">元素的后代<span>元素 */
div#app span {
    border: solid 1px red;
}

直接后代选择器

匹配指定元素的直接后代子元素，子元素必须是第一代后代。

/* 匹配<div id="app">元素的直接后代<span>元素，元素<span>必须是第一代元素 */
div#app > span {
    border: solid 1px red;
}

兄弟选择器

同一层级所有元素都能以兄弟相称，但在这里，只能以某一元素为基准，匹配后面的兄弟，不匹配前面的兄弟。

/* 匹配<div id="app">元素后面的兄弟<p>元素，这些<p>元素和<div>之间可以有其它元素 */
div#app ~ p {
    border: solid 1px red;
}

相邻兄弟选择器

同一层级所有元素都能以兄弟相称，但在这里，只能以某一元素为基准，匹配紧随其后的第一个兄弟，忽略其它兄弟。

/* 匹配紧跟在<div id="app">元素后面的兄弟<p>元素，最多只会匹配到一个<p>元素，且<div>和<p>之间不能有其它元素 */
div#app + p {
    border: solid 1px red;
}

伪类选择器

结构伪类

:root

匹配文档根元素，在HTML文档中根元素就是<html>元素，所以和html元素选择器效果是一样的。

/* 匹配文档根元素 */
:root {
    font-size: 24px
}

:empty

匹配空元素，空元素是指不包含任何东西（可见内容、后代元素、空白字符）的元素，注释不算。自闭合元素<img>、<input>等也算空元素，没有内容的<textarea>也算空元素。

/* 匹配任意空元素 */
:empty {
    border: solid 1px red;
}

/* 匹配空的<p>元素 */
p:empty {
    display: none;
}

:only-child

匹配元素是其父元素的唯一后代元素，也就是说它没有兄弟元素，但是可以有自己的子元素。

/* 匹配具有"唯一后代元素身份"的任意元素 */
:only-child {
    border: solid 1px red;
}

/* 匹配具有"唯一后代元素身份"的<p>元素 */
p:only-child {
    border: solid 1px red;
}

:only-of-type

匹配同级兄弟元素中，元素类型只有一个实例的元素。

/* 匹配同级兄弟元素中，元素类型实例唯一的任意元素 */
:only-of-type {
    border: solid 1px red;
}

/* 匹配同级兄弟元素中，唯一的段落<p>元素，如果有多于一个的<p>元素，那么所有<p>元素就都不能匹配 */
p:only-of-type {
    border: solid 1px red;
}

/* 注意！对这个选择器的理解很容易出错！！！ */
/* 错误理解：匹配同级兄弟元素中唯一具有class属性值含有"unique"的<p>元素 */
/* 正确理解：匹配同级兄弟元素中唯一的段落<p>元素，并且该元素还要满足class属性值含有"unique"的要求 */
p.unique:only-of-type {
    color: green;
}

:first-child

当一个元素是其父元素的第一个直接后代元素时，匹配该元素。

/* 匹配具有"第一个直接后代元素身份"的任意元素 */
:first-child {
    border: solid 1px red;
}

/* 匹配具有"第一个直接后代元素身份"的<h1>元素 */
h1:first-child {
    border: solid 1px red;
}

:last-child

当一个元素是其父元素的最后一个直接后代元素时，匹配该元素。

/* 匹配具有"最后一个直接后代元素身份"的任意元素 */
:last-child {
    border: solid 1px red;
}

/* 匹配具有"最后一个直接后代元素身份"的<h1>元素 */
h1:first-child {
    border: solid 1px red;
}

:first-of-type

同级兄弟元素中，根据元素类型分组，匹配每组第一个元素。

/* 匹配同级兄弟元素中，每个元素类型分组中的第一个实例元素 */
:first-of-type {
    border: solid 1px red;
}

/* 匹配同级兄弟元素中，<p>元素分组中的第一个<p>元素 */
p:first-of-type {
    border: solid 1px red;
}

:last-of-type

同级兄弟元素中，根据元素类型分组，匹配每组最后一个元素。

/* 匹配同级兄弟元素中，每个元素类型分组中的最后一个实例元素 */
:last-of-type {
    border: solid 1px red;
}

/* 匹配同级兄弟元素中，<p>元素分组中的最后一个<p>元素 */
p:last-of-type {
    border: solid 1px red;
}

:nth-child(an±b)

同级兄弟元素中，从前往后，匹配第an±b位置的元素，元素位置从1开始向后计数。

/* 匹配同级兄弟元素中，正着数，第2、5、8、11、...位置的任意元素 */
:nth-child(3n+2) {
    border: solid 1px red;
}

/* 匹配同级兄弟元素中，正着数，第4、8、12、16、...位置的<p>元素 */
p:nth-child(4n) {
    border: solid 1px red;
}

/* 关键字even等价于表达式2n，偶数 */
p:nth-child(even) {
    border: solid 1px red;
}

/* 关键字odd等价于表达式2n+1，奇数 */
p:nth-child(odd) {
    border: solid 1px red;
}

:nth-last-child(an±b)

同级兄弟元素中，从后往前，匹配第an±b位置的元素，元素位置从1开始向前计数。

/* 匹配同级兄弟元素中，倒着数，第2、5、8、11、...位置的任意元素 */
:nth-last-child(3n+2) {
    border: solid 1px red;
}

/* 匹配同级兄弟元素中，倒着数，第4、8、12、16、...位置的<p>元素 */
p:nth-last-child(4n) {
    border: solid 1px red;
}

/* 关键字even等价于表达式2n，偶数 */
p:nth-last-child(even) {
    border: solid 1px red;
}

/* 关键字odd等价于表达式2n+1，奇数 */
p:nth-last-child(odd) {
    border: solid 1px red;
}

:nth-of-type(an±b)

同级兄弟元素中，按元素类型分组，从前往后，匹配每组第an±b位置的元素，每组元素都从1开始向后计数。

/* 同级兄弟元素，按元素类型分组，正着数，匹配每组第2、5、8、11、...位置的任意元素 */
:nth-of-type(3n+2) {
    border: solid 1px red;
}

/* 同级兄弟元素，按元素类型分组，正着数，匹配<p>元素分组中的第4、8、12、16、...位置的<p>元素 */
p:nth-of-type(4n) {
    border: solid 1px red;
}

/* 关键字even等价于表达式2n，偶数 */
p:nth-of-type(even) {
    border: solid 1px red;
}

/* 关键字odd等价于表达式2n+1，奇数 */
p:nth-of-type(odd) {
    border: solid 1px red;
}

:nth-last-of-type(an±b)

同级兄弟元素中，按元素类型分组，从后往前，匹配每组倒数第an±b位置的元素，每组元素都从1开始向前计数。

/* 同级兄弟元素，按元素类型分组，倒着数，匹配每组第2、5、8、11、...位置的任意元素 */
:nth-last-of-type(3n+2) {
    border: solid 1px red;
}

/* 同级兄弟元素，按元素类型分组，倒着数，匹配<p>元素分组中的第4、8、12、16、...位置的<p>元素 */
p:nth-last-of-type(4n) {
    border: solid 1px red;
}

/* 关键字even等价于表达式2n，偶数 */
p:nth-last-of-type(even) {
    border: solid 1px red;
}

/* 关键字odd等价于表达式2n+1，奇数 */
p:nth-last-of-type(odd) {
    border: solid 1px red;
}

动态伪类

动态伪类选择器，关注的是当前页面的变化，页面处于某种状态中样式才会生效，和鼠标的动作有很大关系。

其它选择器，关注的是元素结构及位置变化，文档渲染完成后，样式就会立即生效。

:link

适用：超链接<a>元素。

匹配具有href属性，且该属性指向资源未被访问（浏览器历史记录中找不到）的<a>元素。

/* 匹配具有href属性，且指向资源未被访问过的<a>元素 */
:link {
    color: red;
}

/* 效果同上，因为这个伪类只适用于<a>元素 */
a:link {
    color: red;
}

:visited

适用：超链接<a>元素。

匹配具有href属性，且该属性指向资源已被访问（浏览器历史记录中能找到）的<a>元素。

课外知识：已访问链接的隐私保护。

/* 匹配具有href属性，且指向资源已被访问过的<a>元素 */
:visited {
    color: red;
}

/* 效果同上，因为这个伪类只适用于<a>元素 */
a:visited {
    color: red;
}

:focus

适用：具有交互效果的元素。例如：超链接、表单控件、可编辑内容的元素。

当鼠标在页面上的最后一次点击操作，作用在交互元素上，这个元素就获取到了焦点。

/* 匹配获得了页面焦点的任意元素 */
:focus {
    color: red;
}

/* 匹配获得了页面焦点的<a>元素 */
a:focus {
    color: red;
}

/* 匹配获得了页面焦点的<input>元素 */
input:focus {
    color: red;
}

:hover

适用：具有交互效果的元素。例如：超链接、表单控件、可编辑内容的元素。

鼠标指针悬停在交互元素上。

/* 匹配鼠标指针放置其上的任意元素 */
:focus {
    color: red;
}

/* 匹配鼠标指针放置其上的<a>元素 */
a:focus {
    color: red;
}

/* 匹配鼠标指针放置其上的<input>元素 */
input:focus {
    color: red;
}

:active

适用：具有交互效果的元素。例如：超链接、表单控件、可编辑内容的元素。

鼠标指针作用于元素上，指针按下去还未松开的那段时间内。

/* 匹配鼠标指针按下去的那段时间内，正处于点击状态的任意元素 */
:focus {
    color: red;
}

/* 匹配鼠标指针按下去的那段时间内，正处于点击状态的<a>元素 */
a:focus {
    color: red;
}

/* 匹配鼠标指针按下去的那段时间内，正处于点击状态的<input>元素 */
input:focus {
    color: red;
}

UI状态伪类

这种选择器关注的是页面UI元素的各种状态。

:enabled

适用：具有交互效果的元素。

和元素的disabled属性有关，超链接和href属性有关。元素可用，处于非禁用状态。

/* 匹配当前可用元素，元素没有disabled属性，超链接有href属性 */
:enabled {
    color: red;
}

/* 匹配当前可用的<a>元素，有href属性 */
a:enabled {
    color: red;
}

/* 匹配当前可用的<input>元素，没有disabled属性 */
input:enabled {
    color: red;
}

:disabled

适用：具有交互效果的元素。

和元素的disabled属性有关，超链接和href属性有关。元素不可用，处于禁用状态。

/* 匹配当前不可用元素，元素有disabled属性，超链接没有href属性 */
:enabled {
    color: red;
}

/* 匹配当前不可用的<a>元素，没有href属性 */
a:enabled {
    color: red;
}

/* 匹配当前不可用的<input>元素，有disabled属性 */
input:enabled {
    color: red;
}

:checked

适用：具有选中和未选中状态的交互元素。

和元素的checked属性有关，被选中的复选框、单选按钮、下拉菜单项。

/* 匹配当前处于选中状态的元素，元素有checked属性 */
:checked {
    background-color: red;
}

/* 匹配当前处于选中状态的单选框，元素有checked属性 */
input[type="radio"]:checked {
    outline: solid 3px red;
}

/* 匹配当前处于打开状态的下拉菜单项 */
select:checked {
    color: red;
}

:indeterminate

适用：元素状态处于既未选中也没有未选中的交互元素。

这个状态只能有DOM脚本能设置，在浏览器中也就是JavaScript脚本，用户无法从页面上设定。很少用，仅作了解。

/* 具有相同name属性值的同组单选框<input>元素，如果都没有标记checked属性时，就处于"既未选中也没有未选中"状态 */
input[type="radio"]:indeterminate + label {
    background: lime;
}

:default

适用：具有交互效果的元素。

在文档中默认就被选中的元素，有checked属性，后续在页面上切换其选中状态也不影响该效果。

/* 匹配默认选中，具有checked属性的任意元素 */
:default {
    outline: solid 1px red;
}

/* 匹配默认选中，具有checked属性的单选框元素 */
input[type="radio"]:default {
    outline: solid 1px red;
}

:valid

适用：能校验用户输入数据有效性的表单输入框。

匹配用户输入数据校验通过的输入框元素。

/* 用户在输入框中输入数据，通过校验，就匹配该元素 */
:valid {
    border: solid 1px green;
}

/* 当有<input type="email" />元素时，用户不输入或者输入数据满足邮箱格式，就匹配该元素 */
input[type="email"]:valid {
    border: solid 1px green;
}

/* 当有<input type="text" pattern="[a-z]+" />元素时，用户不输入或者输入数据满足正则，就匹配该元素 */
input[type="text"]:valid {
    border: solid 1px green;
}

:invalid

适用：能校验用户输入数据有效性的表单输入框。

匹配用户输入数据校验不通过的输入框元素。

/* 用户在输入框中输入数据，校验不通过，就匹配该元素 */
:valid {
    border: solid 1px green;
}

/* 当有<input type="email" />元素时，用户输入数据不满足邮箱格式，就匹配该元素 */
input[type="email"]:valid {
    border: solid 1px red;
}

/* 当有<input type="text" pattern="[a-z]+" />元素时，用户输入数据不满足正则，就匹配该元素 */
input[type="text"]:valid {
    border: solid 1px red;
}

:in-range

适用：有min和max属性的元素。

匹配用户输入数据在最小值和最大值之间的元素。

/* 当有<input type="number" min="1" max="10" />元素时，输入10，就能匹配该元素 */
input[type="number"]:in-range {
    color: red;
}

:out-of-range

适用：有min和max属性的元素。

匹配用户输入数据不在最小值和最大值之间的元素。

/* 当有<input type="number" min="1" max="10" />元素时，输入11，就能匹配该元素 */
input[type="number"]:in-range {
    color: red;
}

:required

适用：表单控件。

和元素的required属性有关，匹配必填表单元素。

/* 匹配必填的表单元素 */
:required {
    border: solid 1px red;
}

/* 匹配必填的<input>元素 */
input:required {
    border: solid 1px red;
}

:optional

适用：表单控件。

和元素的required属性有关，匹配非必填表单元素。

/* 匹配非必填的表单元素 */
:optional {
    border: solid 1px red;
}

/* 匹配非必填的<input>元素 */
input:optional {
    border: solid 1px red;
}

:read-write

适用：可读可写的元素。

匹配可读可写的元素，表单元素和disabled属性有关，元素div如果有属性contenteditable="true"也可以匹配到。

/* 匹配可读可写的元素 */
:read-write {
    background-color: yellow;
}

/* 匹配可读可写的<input>元素 */
input:read-write {
    background-color: yellow;
}

/* 匹配有contenteditable="true"属性值的<div>元素 */
div:read-write {
    background-color: yellow;
}

:read-only

适用：只读元素，就是那些不可编辑内容的元素。

匹配可读不可写的元素，表单元素和disabled属性有关。

/* 匹配只读元素 */
:read-only {
    background-color: yellow;
}

/* 匹配只读的<input>元素，设置了disabled属性 */
input:read-only {
    background-color: yellow;
}

目标伪类

:target

适用：所有元素。

跟浏览器地址栏URL中的片段标识符#fragment有关系，它所指向的文档片段在CSS中叫做目标（target），打开URL对应的页面，如果有某个<div>元素的id属性和target相等，就会匹配这个元素。

/* 比如URL：http://localhost:8080/index.html#content */
/* 在index.html页面有个<div id="content">元素，就匹配这个<div>元素 */
:target {
    background-color: yellow;
}

/* 特别指定，URL中的片段标识符，只能匹配div类型的元素 */
div:target {
    background-color: yellow;
}

语言伪类

:lang(xx)

适用：具有语言编码信息lang属性的任意元素。

匹配属性值等于lang="xx"，或者属性值开始于lang="xx-"的元素。和|=属性选择器作用相同，但是两者略有区别：

  1. 对|=属性选择器来说，元素自身必须有lang属性才能匹配
  2. 而:lang伪类能匹配有lang属性的元素及其所有的后代元素

所以多数情况下，:lang伪类选择器更具有实用性。

/* 匹配属性值为lang="en"或者lang="en-XX"的元素及其后代元素 */
:lang(en) {
    border: solid 1px red;
}

/* 匹配有lang="en"或lang="en-XX"属性值，或者能从父代元素继承lang属性的<p>元素及其后代元素 */
/* 比如有<html lang="en">的父代元素存在，就能匹配到<p>元素及其后代元素 */
p:lang(en) {
    border: solid 1px red;
}

否定伪类

:not(element)

适用：任意元素，参数element代表CSS简单选择器（元素选择器、类选择器、ID选择器、属性选择器、伪类选择器）。

前面讲的都是表达肯定意义的选择器，匹配应该选择的元素。否定伪类刚好反过来，表达否定意义的选择器，即匹配不应该选择的那些元素。

/* 匹配没有class="info"的所有元素 */
:not(.info) {
    color: red;
}

/* 匹配没有class="info"的<p>元素 */
p:not(.info) {
    color: red;
}

伪元素选择器

伪元素和伪类很像，为了实现特定效果，它在文档中插入虚构的元素：

  1. CSS2定义了四个基本伪元素，之后的规范又定义了其它伪元素（暂不讨论）
  2. 伪元素只能出现在选择器最后，类似p::first-line em是无效的
  3. 目前，一个选择器中只能有一个伪元素

::before

适用：所有元素。

在所选元素的前面添加一个伪元素，该伪元素默认为内联元素，可用display属性修改。

/* 在所有元素前面添加点内容：++ */
::before {
    content: "++";
    color: silver;
}

/* 在<h2>元素前面加上++符号，content表示伪元素内容，其余样式都是作用于伪元素上的 */
h2::before {
    content: "++";
    color: silver;
}

::after

适用：所有元素。

在所选元素的后面添加一个伪元素，该伪元素默认为内联元素，可用display属性修改。

/* 在所有元素后面添加点内容：++ */
::before {
    content: "++";
    color: silver;
}

/* 在<h2>元素后面加上++符号，content表示伪元素内容，其余样式都是作用于伪元素上的 */
h2::before {
    content: "++";
    color: silver;
}

::first-letter

适用：块级元素，元素display取值block、inline-block、list-item、table-cell、table-caption。

为所选元素的内容首字符添加样式，首字符前面如果有标点符号，一并算在首字符之内。注意，可以使用的CSS属性有限。

/* 所有元素的内容首字符字体颜色统一为红色 */
::first-letter {
    color: red;
}

/* 所有<p>元素的内容首字符字体颜色统一为红色 */
p::first-letter {
    color: red;
}

::first-line

适用：块级元素，元素display取值block、inline-block、list-item、table-cell、table-caption。

为所选元素的内容首行添加样式，首字符前面如果有标点符号，一并算在首字符之内。注意，可以使用的CSS属性有限。

/* 所有元素的内容首行字体颜色统一为红色 */
::first-line {
    color: red;
}

/* 所有<p>元素的内容首行字体颜色统一为红色 */
p::first-letter {
    color: red;
}

群组选择器

适用：任意CSS选择器，用逗号,分隔多个选择器

如果多个元素具有相同的样式，或者有部分相同样式，想将相同样式抽出来仅写一遍，或许就可以用上这个选择器。

严格意义上讲，这不算是一种新的选择器，它更像是CSS语言提供的语法糖，最大的好处就是精简抽象CSS代码。

/* 用逗号分隔两个元素选择器，这两个选择器有相同的color样式 */
h2, p {
    color: gray;
}

/* 等价于分开写，缺点就是相同的color样式要写两遍 */
h2 {
    color: gray;
}
p{
    color: gray;
}

通用选择器

在HTML文档中，这个选择符不常用，因为它的作用范围太大，并且性能最低，仅做了解。

/* 使用*号代表任意元素，设置任意元素字体大小为24px */
* {
    font-size: 24px;
}
仲夏北斗星
关注
  • 7
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 选择器
langmanboy的博客
04-08 1964
CSS 选择器 1. 什么是 CSS 选择器？ CSS 选择器用于查找（或选取）要设置样式的 HTML 元素 CSS 选择器可以分为五大类： 简单选择器（根据名称、id、类来选取元素） 组合器选择器（根据它们之间的特定关系来选取元素） 伪类选择器（根据特定状态选取元素） 伪元素选择器（选取元素的一部分并设置其样式） 属性选择器（根据属性或属性值来选取元素） 选择器 {属性: 属性值;} 2. 简单选择器 元素选择器 类选择器 id 选择器 * 通用选择器（通配符） 交集与并集选择器 2-1 元素
css选择器
总结前端开发中遇到的问题，分享前端知识
08-25 6286
通配选择器（Universal selector）作用：选中页面中的所有元素;元素选择器（Type selector）也叫类型选择器、标签选择器
css 选择器
qq_42638586的博客
04-10 1410
css选择器
css 选择器 详解
2301_76669854的博客
12-12 1612
使用。
CSS选择器优先级
热门推荐
qq_46133833的博客
04-30 5万+
CSS选择器优先级 （1）CSS选择器都有权重值，权重值越大优先级越高。 内联样式表的权重值最高，值为1000。 id选择器的权重值为100。 class选择器的权值为10。 类型（元素）选择器的优先级为1。 通配符选择器的优先级为0。 （2）当权值相等时，后定义的样式表要优于先定义的样式表。 （3）在同一组属性设置中表有**“!important"**规则的优先级最大。 后代选择器 CSS后代选择器指为某标签元素内的特定后代标签元素来定义其样式。在CSS后代选择器中，规则左边的选择器一端包含两个或多个
css选择器有哪些？
weixin_47450807的博客
04-04 1万+
一、写在前面 css选择器有很多，但是常用到的也就几个，今天总结一下。 二、具体选择器 2.1、id选择器 #myId {} 2.2、类选择器 .myClass {} 2.3、标签选择器 p,h1 {} 2.4、后代选择器 div h1 {} 2.5、子选择器 div>h1 {} 2.6、兄弟选择器(所有的兄弟) ul~h1 {} 2.7、相邻兄弟选择器 ul+h1 {} 2.8、属性选择器 li[name='sss'] {} 2.9、伪类选择器 h1:hover {} 2.10 h
CSS选择器分类大全
m0_67859656的博客
11-05 6325
CSS选择器分类大全 基础选择器 一、基础选择器 二、复合选择器 三、CSS3选择器补充： （一）层级选择器： （二）属性选择器 （三）伪类选择器
CSS 选择器优先级
频繁记录
06-13 2149
CSS 选择器优先级
CSS 选择器支持列表
09-25
CSS 选择器支持列表 CSS 选择器是 CSS 中的一个重要组成部分，它允许开发者根据特定的规则来选择和应用样式到 HTML 元素上。下面是 CSS 选择器支持列表的详细解释： ### 一、基本选择器 * `E`：选择所有 HTML ...
CSS教程之css选择器 、属性、值
10-30
本教程将深入探讨CSS选择器、属性以及值，帮助你更好地理解和应用CSS来美化你的网页。 首先，我们要了解CSS选择器。选择器是CSS的核心组成部分，它的主要作用是定位HTML文档中的特定元素，以便对这些元素应用样式。...
CSS选择器.pdf
10-09
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 "CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。）
四大类CSS选择器的使用说明
01-31
### 四大类CSS选择器的使用说明 #### 一、基础选择器 **基础选择器**主要包括四种类型：标签（元素）选择器、类选择器、ID选择器以及通配符选择器。 1. **标签选择器**：用于选取文档中的特定HTML标签。例如： `...
财务费用支出表-可查询.xlsx
08-09
工资表，财务报表，对账表，付款申请，财务报告，费用支出表 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
ssm_160_mysql_强国有我党建网站_.zip
08-09
强国有我党建网站采用JAVA语言来进行开发，因为JAVA语言作为主流的web开发语言，其技术成熟，较为对各类开发者友好，社区也有十分多的文档，同时搭配SSM框架进行使用，可以做到更加高的开发效率帮助完成本次的开发和设计，在本次的开发选用的数据库为MySQL数据库，MySQL数据库可以很好的连接和搭配本次使用的JAVA语言，同时数据库也是一个开源免费完全不需要花钱的良心数据库，使用免费版本已经足已完成本次要实现的开发和设计的功能，最后本次的开发使用工具为eclipse，本工具在实际的开发使用中也是程序员进行java开发的不二选择，虽然目前后继者也有，但这个是完全开源免费的因为很适合本次开发工作，综上所述本次的开发与设计工作室用了目前语言排行榜第一的JAVA以及流行的web框架SSM，同时使用了MySQL数据库实现数据的储存，最后确定了eclipse作为我们的IDE环境。
PHP赞支付最新易支付系统源码 全新界面
08-09
安装说明： 访问 域名/install 进行安装 后台地址：/admin 账号admin 密码123456 后台可以对接码支付平台 这个源码余额需要监控，大家可以使用360网站监控来监控。 监控地址：域名/cron.php 域名/cron.php?do=settle
财务报表-自动管理收支表.xlsx
08-09
工资表，财务报表，对账表，付款申请，财务报告，费用支出表 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
ATM基础管理系统java窗口界面完整版.docx
最新发布
08-09
ATM基础管理系统java窗口界面完整版
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值