1.01.18CSS选择器2
1. 伪类选择器
- 伪类选择器前面是有冒号(:)的
- 伪类选择器一般的用法,都使用交集选择器:
如:选择器:伪类选择器{
样式:值;
} - 也可以直接用,如:
:伪类选择器{
样式:值;
} - 伪类选择器后可以接其他选择器的,可以参考下面的:hover例子
-
用于a标签
- link
- 未访问时的样式
- 用法:
a:link{
样式:值;
}
- visited
- 访问过后的样式
- 用法
a:visited{
样式:值;
}
- 注意:a标签的四种状态(link、vixited、active、hover)的样式时,要遵循LVHA的顺序,不然会有样式覆盖,有些样式会不生效,没有效果
- link
-
其他
-
active
- 点击但不松开的样式(针对a标签)或获取焦点时(针对输入框)的样式
- 用法
a:active{
样式:值;
}
input:active{
样式:值;
}
-
hover
- 鼠标悬浮时的样式
- 用法
- :hover后面不带东西时,选择器1选中的元素样式会改变:
选择器1:hover{
样式:值
} - :hover后面带东西时,悬浮住选择器1,其他的选择器选择中的元素的样式改变:
选择器1:hover~兄弟选择器{
样式:值;
}
- :hover后面不带东西时,选择器1选中的元素样式会改变:
-
focus
- 获取焦点时的样式
- 一般用在input标签:type=radio checkbox text
-
disabled
- 被禁用的元素的样式,一般用于带有disabled属性的元素
-
enabled
- 可以交互并且可用的元素的样式,一般用于不带有disabled属性并且可以用作交互的元素
-
checked
- 处于选中状态的元素
- 一般针对单选框与复选框
- 获取焦点与选中状态的区别:
- 就是单选框与复选框点击了选中状态,其一定获取了焦点
- input type="text"获取焦点时,其不是选中状态
-
not
- 选中不含有选择器的元素
- 用法:
选中选择器1选中的但不包含选择器2的元素:
选择器1:not(选择器2){
样式:值;
}
-
empty
- 选中空元素,即没有任何子元素或内容的标签,还有一些单标签(因为其绝对不含子标签与内容)
-
target
- a标签设置了锚点,锚到的元素的样式
-
-
用于描述位置的伪类选择器
-
选中的是该元素的父代元素的子元素(选中的是一组兄弟元素中的元素)
- 一般搭配后代或子代选择器使用
- first-child
- last-child
- nth-child()
- 从前往后数
- ()里面可以写n,n默认为>=0的整数
- 选前面x个,()里面可以写-n+x:nth-child(-n+x)
- 选后面x个,()里面可以写n+x:nth-child(n+x)
- 注意:n需要写在前面,即-n+2,不能写成2-n,不然没有效果
- nth-last-child()
- 从后往前数,规则如nth-child
- only-child
HTML:
<ul>
<!-- <div>这是一个div</div> -->
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
<li>这是第6个li</li>
<li>这是第7个li</li>
<li>这是第8个li</li>
<!-- <i>asdfasdf</i> -->
</ul>
<ol>
<!-- <p>a</p> -->
<li>这是唯一一个li</li>
</ol>
对应的CSS
/* 伪类选择器 */
/* :first-child 第一个子元素*/
ul>li:first-child{
color: lightcoral;
}
/* :last-child 最后一个子元素*/
ul>li:last-child{
color: lightgreen;
}
/* :nth-child( n【从0开始】 | odd | even ) 指定第n个元素*/
/* 选中第三个子元素 */
ul>li:nth-child(3){
color: orange;
}
/* 选中奇数个li */
/* ul>li:nth-child(odd){ */
ul>li:nth-child(2n-1){
font-weight: bolder;
letter-spacing: 3px;
}
/* 选中偶数个li */
/* ul>li:nth-child(even){ */
ul>li:nth-child(2n){
background-color: slategrey;
}
/* 前面3个li */
/* n = 0 1 2 3 4 5 6 7 8 ....... */
/* -n+3 = 3 2 1 (0 -1 -2 -3) */
ul>li:nth-child( -n+3 ){
font-style: italic;
}
/* 从第3个li开始带后面的所有li */
/* n = 0 1 2 3 4 5 6 7 8 ....... */
/* n+3 = 3 2 1 (0 4 5 6) */
ul>li:nth-child(n+3){
font-style: italic;
}
/* :nth-last-child(n) 选中倒数第n个元素*/
ul>li:nth-last-child(2){
line-height: 60px;
}
/* 最后两个元素 */
/* n: 0 1 2 3 4 5 .... */
/* -n+2: 2 1 (0 -1) */
ul>li:nth-last-child(-n+2){
border-left: 10px solid red;
}
/* :only-child 选中唯一一个子元素*/
ol>li:only-child{
color: red;
}
- 选中的是该元素的父代元素的指定类型子元素(选中的是一组指定类型的兄弟元素中的元素)
- first-of-type
- last-of-type
- nth-of- type
- only-of-type
HTML:
<ul>
<div>div元素</div>
<div>div元素</div>
<div>div元素</div>
<div>div元素</div>
<div>div元素</div>
<li>第1个li</li>
<li>第2个li</li>
<li>第3个li</li>
<li>第4个li</li>
<li>第5个li</li>
<li>第6个li</li>
<li>第7个li</li>
<li>第8个li</li>
<i>斜体</i>
<i>斜体</i>
<i>斜体</i>
<span>啊的撒法发</span>
</ul>
对应的CSS:
/* :first-of-type 选中第一个指定类型(这里是li)的元素*/
ul>li:first-of-type{
color: red;
}
/* :last-of-type 选中最后一个指定类型(这里是li)的元素*/
ul>li:last-of-type{
color: blue;
}
/* :nth-of-type(n) 选中第n个指定类型(这里是li)的元素 */
ul>li:nth-of-type(1){
color: skyblue;
}
/* 选中倒数第3个指定类型(这里是li)的元素 */
ul>li:nth-last-of-type(3){
color: teal;
}
/* 选中子元素中, 唯一一个指定类型(span)的元素 */
ul>span:only-of-type{
background-color: red;
}
2. 伪元素选择器
-
伪元素选择器前面是有两个冒号(::)的
-
before
- 元素前面的样式
- 一定要content属性,不然不起效果,content可以为空值:content:""
- 同span元素特性一致,即span有的css属性他也都有
- 他是选中元素的子元素,所有单标签没有before,因为单标签规定不具有子元素
-
after
- 元素后面的样式
- 一定要content属性,不然不起效果,content可以为空值:content:""
- 同span元素特性一致,即span有的css属性他也都有
- 他是选中元素的子元素,所有单标签没有after,因为单标签规定不具有子元素
-
selection
- 元素被I型(光标)鼠标标选中时的样式,一般用于图片和文字标签
-
first-line
- 首行文字的样式
-
first-letter
- 首字的文字样式
3. 选择器的优先级
- !important关键字>内联样式(元素自身style设置属性) > id选择器>类选择器(属性选择器、伪类选择器) >元素选择器>通配符选择器>继承的样式>浏览器的默认样式
- 选择器层级越多,样式优先级越高
- 层级方面的优先级也受上面那条规则的影响,就是说,一个2层级的id选择器>一个3层级的类名选择器
- 选择器权重相同,遵循就近原则
- 使用VS Code编辑器时,鼠标悬浮在CSS文件的选择器上可以显示优先级的权重
4. 基准参考点
- 把相同的域名放到头部,页面中可以忽略掉域名,直接写路径和文件名就行
关键字>内联样式(元素自身style设置属性) > id选择器>类选择器(属性选择器、伪类选择器) >元素选择器>通配符选择器>继承的样式>浏览器的默认样式 - 选择器层级越多,样式优先级越高
- 层级方面的优先级也受上面那条规则的影响,就是说,一个2层级的id选择器>一个3层级的类名选择器
- 选择器权重相同,遵循就近原则
- 使用VS Code编辑器时,鼠标悬浮在CSS文件的选择器上可以显示优先级的权重
4. 基准参考点
- 把相同的域名放到头部,页面中可以忽略掉域名,直接写路径和文件名就行
- base规定的是页面上所有链接的默认URL,是所有! 其包括src,href等所有URL。使用到的链接都会与base里的href链接拼接