12-高级选择器和伪元素应用
高级选择器的种类
伪类选择器之状态类
checked
:hover
:active
:focus
伪类选择器之结构类
:nth-child(n)
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)
伪类选择器之属性类
[ att ]
[ att = value ]
[ att ^= value ]
[ att $= value ]
[ att *= value ]
CSS 伪类(pseudo-class) 是一个以冒号(:)作为前缀,被添加到一个选择器末尾的关键字
当你希望样式在特定状态下才被呈现到指定的元素时,你可以往元素的选择器后面加上对应的伪类(pseudo-class)
伪类伪类
link 没有访问的链接
visited 已访问的链接
:hver 鼠标悬停
active 鼠标按下未抬起
状态类伪类书写顺序如上:爱恨准则love->hate也可以记为lv ha
checked 改变的是表单被选中时的样式,还需要设置具体样式
:focus
该伪类表示当用户点击,触摸,通过键盘的 “tab” 键选择表单元素、链接等元素时会被触发
结构类伪类选择器
nth-child()
首先找到伪类前选择器选中的元素的所有兄弟元素,然后按照位置先后顺序从1开始排序
也可以理解为nth-child() 既要满足选择器前面的需求,其次要是父级中的第几个
不同的结构会重新排序
nth-of-type()首先要满足选择器前面的需求,其次是在选择器中排序
括号内可以是数字也可以是带n的公式,但是带n部分必须写在括号内
不同的结构会重新排序
nth-last-child() 设置的元素属性相反
列:
first-child()必须是第一个,且是选择器前的结构
列
如果不是则不行
列如:
last-child 必须是最后一个,且是选择器前的结构
first-of-type 必须是第一个,且是选择器前的结构,就算有其他元素在前面也不会构成影响
列:
伪类选择器之属性类
~包含属性为XXX的元素
^属性一XXX开头的标签
$属性以XXX结尾的标签
*属性包含XXX的标签 概念比~模糊
伪元素
伪元素必须要有content。没有内容引导引号内就为空的
伪元素是行内的特性,要加display:block
::before 和::after设置的元素属性相反 前者设置元素属性是在开头,而after则相反
<style>
div{
width: 300px;
height: 300px;
border: 2px solid pink;
}
div::before{
/* 伪元素必须要有content。没有内容引导引号内就为空的 */
content: "";
/* 伪元素是行内的特性,要加display:block */
display: block;
width: 100px;
height: 50px;
background-color: rosybrown;
}
p{
width: 200px;
height: 50px;
background-color: red;
}
div::after{
/* 伪元素必须要有content。没有内容引导引号内就为空的 */
/* 伪元素是行内的特性,要加display:block */
content: "";
display: block;
width: 100px;
height: 50px;
background-color: rosybrown;
}
ul{
background-color: royalblue;
}
li{
float: left;
}
/* ul>div{
clear: both;
} */
/* 伪元素用得最多的地方就是清除浮动 */
ul::after{
content: "";
display: block;
clear: both;
}
/* ::before 和::after设置的元素属性相反 前者设置元素属性是在开头,而after则相反*/
</style>
</head>
<body>
<div>
<p>3242345</p>
<p>3242345</p>
<p>3242345</p>
<p>3242345</p>
</div>
<ul>
<li>332</li>
<li>3r</li>
<li>r2</li>
<li>r2</li>
<li>r2</li>
<!-- <div></div> -->
</ul>
运行结果:
其他伪元素
::selection 被选中得到内容
::first-letter 首字符(/是个例外
::first-line 首行