公众号视频网站怎么做,经营网站挣钱,什么网站可以做TCGA病理分期,公司 网站 模板引用父选择器需要用到“”符号
#xff06;运算符表示嵌套规则的父选择器#xff0c;并且在修改类或伪类选择器的应用中非常普遍 ul{li{:nth-child(2) a {color: red;:hover {color: yellow;}}}
}//编译为
ul li:nth-child(2) a {color: red;
}
ul li:nth-ch…引用父选择器需要用到“”符号
运算符表示嵌套规则的父选择器并且在修改类或伪类选择器的应用中非常普遍 ul{li{:nth-child(2) a {color: red;:hover {color: yellow;}}}
}//编译为
ul li:nth-child(2) a {color: red;
}
ul li:nth-child(2) a:hover {color: yellow;
} 也可以用在其他场景例如产生重复的类名 .button{-submit{color:blue;}-click{color:yellow;}-btn{color:red;}
}
//编译成
.button-submit {color: blue;
}
.button-click {color: yellow;
}
.button-btn {color: red;
} .item{ 1{ color:green; } 2{ color:red; }}//编译成 .item1 { color: green;}.item2 { color: red;} .header{p{color:red;} .content{color:yellow;} div{color:red;}~p{color:green;}{color:green;}{color:blue;}
}
//编译成
.header p {color: red;
}
.header .content {color: yellow;
}
.header div {color: red;
}
.header ~ p {color: green;
}
.header.header {color: green;
}
.header .header {color: blue;
} 还可以改变选择器的顺序将后置将当前的选择器提到父级 .side{div{color:cyan;}
}
#side{div{color:green;}
}ul{li{.item{div {color:orange;}}}
}编译为
div.side {color: cyan;
}
div#side {color: green;
}
div ul li .item {color: orange;
} 当多个同级选择器用“”隔开时其子级使用连续多个时例如 或-等会生成所有可能的组合 div,p,a,li{ {color:red;}
}//编译为
div div,
div p,
div a,
div li,
p div,
p p,
p a,
p li,
a div,
a p,
a a,
a li,
li div,
li p,
li a,
li li {color: red;
} 本文转载于:猿2048https://www.mk2048.com/blog/blog.php?idhbahc1jtitleless学习三---父选择器
