CSS-选择器和注释
本文最后更新于2022.12.15-14:03，某些文章具有时效性，若有错误或已失效，请在下方留言或联系涛哥。
CSS
概述
CSS，全称“Cascading Style Sheets”（层叠样式表），用于设置HTML标签的样式
CSS引用方式
行内样式
内嵌样式
外链样式
导入式
CSS引用优先级
行内样式 > 内嵌样式 > 外链样式 > 导入样式
选择器结构
<head>
<style type="text/css">
选择器（即修饰对象）{
对象属性1: 属性值1！important;
对象属性2: 属性值2;
}
</style>
</head>
！important：表示一定使用这种样式，权重无限大，并不是1000标签选择器：权重为1
含义：用于修饰同类HTML标签的共性风格
举例：img{
属性:属性值;
}
类选择器（class）：权重为10
含义：通过class指定单个或多个元素独立样式
实例：
<li class="blue"></li>
.blue{color:red;}
ID选择器：权重为100
含义：含义：通过唯一id指定单个元素独立样式，
实例：
<li id="blue"></li>
#blue{color:red;}后代选择器
含义：用空格把选择器隔开，表示选择某个标签内的某种标签，权重直接相加
实例：选择器 选择器{属性:属性值}
群组选择器
含义：通过逗号把多个选择器隔开，权重分别独立计算
实例：选择器,选择器{属性:属性值}
伪类选择器：权重为10
1、动态伪类选择器：不同的状态，使用不同的样式。
-
- : link 选择所有未访问链接
- : visited 选择所有访问过的链接
- : active 选择正在活动链接
- : hover 把鼠标放在链接上的状态（鼠标移上去激活）
- : focus 选择元素输入后具有焦点
2、目标伪类选择器：用来匹配页面的URI中某个标识符的目标元素。
-
- : target 选择匹配E的所有元素，且匹配元素被相关URL指向。
3、语言伪类选择器：用来匹配使用指定语言的元素。
-
- : lang(language)
4、元素状态伪类选择器：当元素处于某种状态下时，才起作用，在默认状态下不起作用。
-
- : checked
- : input[type="checkbox"]:checked{}
- : enabled
- : input[type="text"]:checked{}
- : disabled
- : input[type="text"]:disabled{}
5、结构伪类选择器：这个就比较多了，平时用的也比较频繁。
-
- :last-child 最后一个元素
- :nth-child(n) n表示具体的第几个 odd/2n+1 奇数 even/2n 偶数
- :only-child 仅仅/唯一的元素
- :nth-last-child(n) 倒数第几个元素 :nth-last-child(1) <=> :last-child
- :first-of-type 第一个同级兄弟元素
- :last-of-type 最后一个同级兄弟元素
- :only-of-type 只有一个同级兄弟元素
- :nth-of-type(n) 第几个同级兄弟元素
- :nth-last-of-type(n) 倒数第几个同级兄弟元素
- :empty 空内容
6、否定伪类选择器
-
- : not(F) 匹配所有除F外的E元素
同级选择器：权重相加
选择器1+选择器2：选择器1同级的下一个选择器2，选择器2紧随在选择器1后
选择器1~选择器2：同级下选择器1后的所有选择器2
div+p{样式} //与div同级下的下一个p，相紧随div之后
div~p{样式} //与div同级在div后面的所有p子元素选择器
选择器1>选择器2：选择器1层级之下的所有选择器2
属性选择器：权重为10
- [属性名]{...样式设置内容...}将标签中的一个属性作为选择选择器
- [属性名="属性值"]{...样式设置内容...}将标签中的一个属性名值对作为选择器
- [type^="datetime"]{...样式设置内容...}将标签中的一个属性名名为“type”，属性值以“datetime”开头的属性名值对作为一个选择器
- [title$="picture"]{...样式设置内容...}将标签中的一个属性名名为“title”，属性值以“picture”结束的属性名值对作为一个选择器
- [title*="is"]{...样式设置内容...}将标签中的一个属性名名为“title”，属性值含有“is”的属性名值对作为一个选择器
- [title~="a"]{...样式设置内容...}将标签中的一个属性名名为“title”，属性值含有空格分隔的词为“a”的属性名值对作为一个选择器
- [title|="this"]{...样式设置内容...}将标签中的一个属性名名为“title”，属性值等于“this”或以“this-”开头的属性名值对作为一个选择器
选择器权重的计算
权重：每个选择器在选中同样的标签时，判断谁生效的唯一标准
CSS注释
- 单行注释：//内容
- 多行注释：/*内容*/
阅读剩余
版权声明：
作者：涛哥
链接：https://ltbk.net/front/css/article/388.html
文章版权归作者所有，未经允许请勿转载。
作者：涛哥
链接：https://ltbk.net/front/css/article/388.html
文章版权归作者所有，未经允许请勿转载。
THE END
