标签：基本 color 书写 规则 元素 child 格式 选择器
【基本选择器】 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 自增15.选中偶数项元素 书写格式：元素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:"一组"; }
4、选中元素的首字母/汉字 书写格式：元素A::first-letter{声明块} p::first-letter{ color:skyblue; font-size:30px; }
注： 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; }
标签：基本,color,书写,规则,元素,child,格式,选择器 来源： https://www.cnblogs.com/liqiang95950523/p/13061904.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。