层级选择器
/*子代选择器:选出box下的所有li标签*/
.box>li{
background-color: aliceblue;
}
/* 选出box后面的第一个兄弟li标签 */
.box+li{
background-color: aliceblue;
}
/* 选出box后面的所有兄弟li标签 */
.box~li{
background-color: aliceblue;
}
属性选择器
/* 属性选择器:选出所有带有class属性的标签 class也可以为其他属性 */
[class]{
background-color: aliceblue;
}
/* 属性选择器:选出所有带有class属性的div标签 class也可以为其他属性 */
div[class]{
background-color: aliceblue;
}
/* 属性选择器:选出所有带有class=box1属性的div标签 class也可以为其他属性 */
div[class=box1]{
background-color: aliceblue;
}
/* 属性选择器:选出所有class属性以b开头的div标签 class也可以为其他属性 */
div[class^=b]{
background-color: aliceblue;
}
/* 属性选择器:选出所有class属性以b结尾的div标签 class也可以为其他属性 */
div[class$=b]{
background-color: aliceblue;
}
/* 属性选择器:选出所有class属性包含b的div标签 class也可以为其他属性 */
div[class*=b]{
background-color: aliceblue;
}
/* 属性选择器:选出所有带有class属性中包含box1的div标签 class也可以为其他属性 */
div[class~=box1]{
background-color: aliceblue;
}
伪类选择器
结构伪类选择器
/* 结构伪类选择器 */
/* 选择box下的最后一个div标签 */
.box div:last-child{
background-color: aliceblue;
}
/* 找到第一个li标签 */
li:first-child{
background-color: aliceblue;
}
/* 找到最后一个li标签 */
li:last-child{
background-color: aliceblue;
}
/* 找到第二个li标签 */
li:nth-child(2){
background-color: aliceblue;
}
/* 找到第偶数个li标签,2n可以用even代替 */
li:nth-child(2n){
background-color: aliceblue;
}
/* 找到第奇数个li标签,2n-1可以用odd代替 */
li:nth-child(2n-1){
background-color: aliceblue;
}
目标伪类选择器
/* 目标伪类选择器:隐藏锚点的导向位置 */
div.content{
display: none;
}
div.content:target{
display: block;
}
状态伪类选择器
<style>
/*
状态伪类选择器(checkbox有默认样式,需要清楚默认样式才能使用)
enabled:可用标签选择
disabled:禁用标签选择
focus:聚焦选择器,作用于焦点标签
*/
/* 去掉checkbox的默认样式 */
input[type=checkbox]{
appearance: none;
width: 20px;
height: 20px;
background: red;
}
input:enabled{
background: red;
}
input:disabled{
background: yellow;
}
input:focus{
background: blue;
}
/* 选择状态伪类选择器(当文字被选中时的状态) */
div::selection{
background: red;
color: blue;
}
</style>
</head>
<body>
<!--
层级选择器
-->
<form action="">
用户名: <input type="text"><br>
密码: <input type="password"><br>
记住用户名: <input type="checkbox">
<input type="submit" disabled>
</form>
<div>
dsfgbahjshfaslhfasdhfasddhfasdhfjasdhfoiasd
</div>
</body>
文章来源地址https://www.toymoban.com/news/detail-618561.html
文章来源:https://www.toymoban.com/news/detail-618561.html
到了这里,关于选择器的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!