选择器
标签选择器
标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式.
类选择器
.value{
width: 100px;
height: 100px;
background-color: #096;
}
<div class="value"></div>
**命名规范**
- 命名需要是具备语义性的单词，不能用 数字 拼音 符号
正确示范 ： wrap description title content
错误示范 : aaaa a1 $we 4tdds - 命名需要多个单词连接的情况下, 标记语言中可以使用 _ - 进行连接 不能直接单词拼接 或者驼峰命名 注意: 书写风格必须统一 不容许出现 _ -一起使用的情况 推荐使用 -
正确示范 : header-nav content-left slide-bar
错误示范 : headernav slideBar ContentLeft - 命名需要进行适当的缩写, 单词连接层级不要超过4层
正确示范 : head-tit_ico
错误示范 : header-title-left-logo-icon
多类名选择器
注意
样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。各个类名中间用空格隔开。
.cls{
background: #096;
}
.content{
width: 100px;
}
.value{
height: 100px;
}
<div class="cls content value"></div>
id选择器
id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次。
#name{
width: 100px;
height: 100px;
background-color: #096;
}
<div id="name"></div>
通配符选择器
通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。
*{
margin: 0px;
padding: 0px;
list-style: none;
}
复合选择器
组合选择器
选择器,选择器{
background-color: #096;
}
子代选择器
其内部的子代
父>子代{
background-color: #096;
}
邻居选择器
兄紧挨着的第
兄 + 弟{
background-color: #096;
}
后续选择器
兄后面的第不管之间有没有间隔
兄 ~ 弟{
background-color: #096;
}
属性选择器
[属性]{代码}
<style>
[alt]{
width: 100px;
height: 100px;
background-color: #096;
}
</style>
<img src="路径" alt="">
[属性="值"]{代码}
<style>
[alt="鞠婧祎"]{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<img src="路径" alt="鞠婧祎">
[属性*="值(属性内部包含该值)"]{代码}(拥有)
<style>
[href*="baidu"]{
background-color: #096;
}
</style>
<a href="https://www.baidu.com">百度</a>
[属性$="值(属性结尾包含该值)"]{代码}(结尾)
<style>
[href$="com"]{
background-color: #096;
}
</style>
<a href="https://www.baidu.com">百度</a>
[属性^="值(属性开头包含该值)"]{代码}(开头)
<style>
[href^="https"]{
background-color: #096;
}
</style>
<a href="https://www.baidu.com">百度</a>
伪类选择器
:hover鼠标悬停
<style>
div{
width: 100px;
height: 100px;
background-color: #242424;
}
div:hover{
background-color: #096;
}
</style>
<div></div>
:link未被访问的链接（特指a标签）
a:link{
color: #096;
}
<a href="https://www.baidu.com" target="_block">卡卡西</a>
:visited被访问过的链接（特指a标签）
a:visited{
color: #096;
}
<a href="https://www.baidu.com" target="_block">卡卡西</a>
:active 被点击按下状态
a:active{
color: #096;
}
<a href="https://www.baidu.com" target="_block">卡卡西</a>
:hover :active 不仅仅能用在a标签上.
:hover最为常用最为重要.
可以进一步在伪类后进行选择，比如：#wrap:hover .nav{display:none;}
:focus(获得焦点状态)
input:focus{
border:1px solid #096;
}
<input type="text">
:checked(（单选/多选）表单被勾选状态)
input:checked{
background-color:#096;
}
<input type="text">
结构(位置)伪类选择器
:first-child:选取属于其父元素的第一个子元素.:last-child:选取属于其父元素的最后一个子元素.:nth-child(n):匹配属于其父元素的第n个子元素，不论元素的类型.:nth-last-child(n):匹配属于其元素的第n个子元素，不论元素的类型，从最后一个子元素开始计数，n 可以是数字、关键词或公式.:nth-of-type(n): 匹配同类型中的第n个同级兄弟元素，n可以是一个数字，一个关键字，或者一个公式.:first-of-type: 匹配同类型中的第一个同级兄弟元素 没有() 参数.:last-of-type: 匹配同类型中的最后一个同级兄弟元素 没有() 参数:only-of-type匹配同类型中的唯一一个指定类型元素 没有() 参数:not(s)匹配每个元素是不是指定的元素/选择器 (s为选择器 selector的缩写)
上述选择器 n 所表示的可以是一个 **数字** 或者 奇数**odd** 或者 偶数**even** 或者 一个**表达式**
伪元素
.content::before 相当于在content元素的最前面添加一个额外的子元素
#wrap::before{content:"Hello World!"}
.content::after 相当于在content元素的最后面添加一个额外的子元素
#wrap::after{content:"Hello World!"}
必须拥有content样式，上述两个伪元素才会生效.
样式优先级：!important **>** 行内样式 **>** id **>** class | 属性 | 伪类 | 伪元素 **>** 标签 | + | ~ | + | 子代 **>** *
- p::first-letter文本的第一个单词或字（如中文、英语、日语…）
- p::first-line 文本第一行；
- p::selection 可改变选中文本的样式；
/* 首字特殊样式 */
p::first-letter {
font-size: 20px;
color: hotpink;
}
/* 首行特殊样式 */
p::first-line {
color: skyblue;
}
p::selection {
/* font-size: 50px; */
color: orange;
}