选择器的基本规则及使用
Posted liqiang95950523
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了选择器的基本规则及使用相关的知识，希望对你有一定的参考价值。
【基本选择器】
1、通配符选择器
书写格式：* {声明块}
功能：所有标签，都应用其样式
适用场景：统一样式
注:一般不建议使用此选择器。
2、元素选择器
3、类选选择器
类选选择器命名规范
1点号开始
2包含字母 数字 下划线 连字符
3点后面必须是字母
4区分大小写
命名规范要求：见名知意
4.ID选择器(JS之前不要用 预留给JS
书写格式：#ID{声明块})
5.组合选择器/并集选择器
书写格式：元素名，ID名，类名{声明块}
h1,p,span{
color:red;
}
/* 【层次选择器】
1.子级选择器
书写格式：父元素A>子元素B{声明块}
article>section{
color: yellow;
}
2.后代选择器
书写格式：祖先元素A+空格+后代元素B{声明块}
article p{ color:skyblue; }
3.兄弟选择器
书写格式：兄弟元素A+兄弟元素B{声明块}
注：AB之间不能有其他元素
h1+p{
color: skyblue;
}
4.通用选择器
书写格式：兄弟元素A+~+兄弟元素B{声明块}
h1~p {
color: yellowgreen;
}
【伪类选择器】
[结构伪类选择器]
1 选中某一个元素
书写格式 元素A：nth-child(n)
nth-child(序数词)
header>nav:nth-child(3) {
color: red}
如果第五个元素是nav就加样式
如果第五个元素不是nav就不加样式！！！！！
/2.选中第一个元素
书写格式：元素A：first-child
header>nav:first-child {
color: red;}
3.选中最后一个元素
书写格式：元素A：last-child
header>nav:last-child {
color: mediumvioletred;
4.选中奇数项元素
书写格式：元素A:nth-child(odd)
元素Anth-child(2n+1）
header>nav:nth-child(odd){
color: yellowgreen;
}
header>nav:nth-child(2n+1){
color: yellowgreen;
} n起始值为0 自增1
5.选中偶数项元素
书写格式：元素A:nth-child(even)
元素A：nth-child（2n）
header>nav:nth-child(even) {
color: red;
}
选中后面六个元素公式
header>nav:nth-child(n+6)
选中前面三个元素公式
header>nav:nth-child(-n+3)
header>nav:nth-child(n+6){
color: red;
}
header>nav:nth-child(-n+3){
color: red;
}
目标：把header下的第五个元素变换颜色
使用场景，header下的子元素必须是相同元素
header>nav:nth-child(5){
color: red;
}
6.选中指定标签的第n个元素
书写格式：header>nav:nth-of-type（n）{声明块}
header>nav:nth-of-type(3){
color: red;
}
7.否定伪类元类选择器
书写格式：header>nav：not（否定的元素)
目的：除了第三个元素以外，进行样式的添加
header>nav:not(:nth-child(3)){
color: red;
}
除3和7元素以外 ,其它为红色
header>nav:not(:nth-child(3)):not(:nth-child(7)){
color: red;
}
8.动态伪类选择器
有一个书写的顺序要求
A：:link :visited ：hover ：active
B：:visited :link ：hover ：active
四种状态
:link 未访问
：hover 悬停
：active 点击时
:visited 已访问
注：:link /:visited 静态伪类（仅适用于超链接 即a标签）
a:link{
color: skyblue;
}
a:visited{
color: deeppink;
}
a:hover{
color: red;
}
a:active{
color: yellowgreen;
}
[扩展：动态伪类选择器]
：focus
适用场景：1.使用键盘进行的页面操作 2.输入框
a:focus{
color: red;
}
9.选择最后一个指定类型的标签
书写格式：元素A：last-of-type{声明块}
footer>p:last-of-type{
color:deeppink;
}
10.选中第一个指定类型的标签
书写格式:元素A:first-of-type
footer>p:first-of-type{
color:skyblue;
}
11.选中无兄弟元素的标签
书写格式：元素A:only-child{声明块}
12.选中没有元素类容的标签
书写格式：元素A：empty{声明块}
注：空格也算元素内容（空格和回车）
p{
width: 100px;
height: 100px;
chocolate;
}
p:empty{
skyblue;
}
13.选中目标元素
书写格式：元素A：target{声明块}
适用场景：
锚点
1、不同锚点的信息，在同一个区域显示
注：只显示被选中的元素的信息，
其它信息进行隐藏。
2、被选中元素，进行高亮显示
.container{
width: 600px;
border: 1px solid red;
}
p{
display:none;
}
#box2:target{
display:block;
}
#box3:target{
display:block;
}
【伪元素选择器】
适用场景：
当需要多个元素前面或后面添加内容时
icon图片、公司logo、公司的名称
1、在元素之前添加内容
书写格式：元素A::before{声明块}
div::before{
content:"Lovo";
}
2、在元素之后添加内容
书写格式：元素A::after{声明块}
div::after{
content:"一组";
}
3、选中元素的第一行
书写格式：元素A::first-line{声明块}
p::first-line{
color:red;
}
4、选中元素的首字母/汉字
书写格式：元素A::first-letter{声明块}
p::first-letter{
color:skyblue;
font-size:30px;
}
5、选中元素的元素内容
书写格式：元素A::selection{声明块}
注：
1、设置背景色和文本颜色
2、text-shadow(文本阴影)
3、text-decoration
4.cursor
5.outline
p::selection {
color: white;
background-color: skyblue;
}
【属性选择器】
书写格式1：
元素【属性名="属性值"】
div[nema="lovoF68"] {
color: chocolate;
font-weight: bold;
}
选中以xxx开头的元素
书写格式2：
元素名【属性值="属性值"】
div[nema^="l"] {
color: red;
}
选中以xxx结束的元素
书写格式3：
元素名【属性值="属性值"】
div[nema$="8"] {
color: skyblue;
}
选中属性值中包含xxx的元素
书写格式4：
元素名【属性值*="属性值"】
div[nema*="v"] {
color: yellowgreen;
}
以上是关于选择器的基本规则及使用的主要内容，如果未能解决你的问题，请参考以下文章