.wrapper > div:nth-of-type(2n-1),
.wrapper > p:nth-of-type(2n){
background: orange;
}
/*或者*/
.wrapper > :nth-child(4n-3),
.wrapper > p:nth-of-type(2n){
background: orange;
}
/*或者*/
.wrapper > div::nth-of-type(odd),
.wrapper > p:nth-of-type(even){
background: orange;
}
.wrapper > p:nth-of-type(2n){
background: orange;
}
/*或者*/
.wrapper > :nth-child(4n-3),
.wrapper > p:nth-of-type(2n){
background: orange;
}
/*或者*/
.wrapper > div::nth-of-type(odd),
.wrapper > p:nth-of-type(even){
background: orange;
}
2018-05-08
:first-child 父元素下面的第一个元素
P:first-of-type 父元素下面类型为P的第一个元素
P:first-of-type 父元素下面类型为P的第一个元素
2018-05-08
<style>
a[class^="column"]{background:red;}
a[href$="doc"]{background:green;}
a[title*="box"]{background:blue;}
</style>
a[class^="column"]{background:red;}
a[href$="doc"]{background:green;}
a[title*="box"]{background:blue;}
</style>
2018-05-08
ul li:only-child,ol li:only-child{
background:orange;
}
background:orange;
}
2018-05-07
感觉为input设置enabled后,所有的input都有了这个属性,至于第二个框被禁用,是disabled="disabled"起作用,将
/*input[type="text"]:disabled{*/
/* box-shadow: none;*/
结果还是一样
/*}*/
/*input[type="text"]:disabled{*/
/* box-shadow: none;*/
结果还是一样
/*}*/
2018-05-06
这个例子比较明显
<style>
:target
{
background-color: #e5eecc;
}
</style>
</head>
<body>
<p><a href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p>
<p>请点击上面的链接,:target 选择器会突出显示当前活动的 HTML 锚。</p>
<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>
<style>
:target
{
background-color: #e5eecc;
}
</style>
</head>
<body>
<p><a href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p>
<p>请点击上面的链接,:target 选择器会突出显示当前活动的 HTML 锚。</p>
<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>
2018-05-03
:root优先级高
:root{
background:green;
}
html{
background:red;
}
:root{
background:green;
}
html{
background:red;
}
2018-05-03
div {
width: 300px;
height: 200px;
background: red;
color:#fff;
margin: 20px auto;
animation: changecolor 5s linear infinite .2s ;
}
width: 300px;
height: 200px;
background: red;
color:#fff;
margin: 20px auto;
animation: changecolor 5s linear infinite .2s ;
}
2018-05-02