属性选择器可以根据元素特定属性来选择元素,这样就可以不用藉助於类或者ID选择器
/* 必须是input但是具有value这个属性 */
input[value] {
color: pink;
}
/* 只选择type=text文本框的input */
input[type=text] {
color: pink;
}
/* 首先是div 然後具有class属性 且属性开头以icon */
div[class^=icon] {
color: powderblue;
}
section[class$=data] {
color: purple;
}
结构伪类选择弃主要根据文档结构来选择元素,经常用於根据父级选择器里面的子元素
nth-child(n) 选择某个父元素的一个或多个特定的子元素
<style>
/* 选择ul里面的第一个li */
ul li:first-child {
background-color: purple;
}
/* 选择最後一个li */
ul li:last-child {
background-color: red;
}
/* 选择第3个li */
ul li:nth-child(3) {
background-color: royalblue;
}
/* 把所有偶数的li都选出来 */
ul li:nth-child(even) {
background-color: darkcyan;
}
/* 把所有奇数的li都选出来 */
ul li:nth-child(odd) {
background-color: powderblue;
}
/* nth-child(n) 从0开始 每次+1 往後面计算 这里面必须是n 不能是其他字母 选择了所有li*/
ol li:nth-child(n) {
background-color: rosybrown;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ol>
</body>
备注:
::before 在元素的前面插入内容
::after 在元素的後面插入内容
备注:
>>: IT 铁人赛 k8s 入门30天 -- day19 k8s Task Coarse Parallel Processing Using a Work Queue
今天是30天程序语言研究的第九天,研究的语言一样是python,今天主要学习的是档案的写入和写出 网...
2021 最後一季拉!!! 倒数 3 个月 当兵有破百 每年的此时此刻也进入破百的阶段拉!!! 前...
这是 Roblox 从零开始系列,使用者介面章节的第三个单元,在今天你将学会如何在萤幕上制作出技能按...
又是一个新的一天又要想今天要打什麽了(;´д`)ゞ,今天打算来讲v-on,以及讲解如何用v-on监听...
股市只有两种人:输家跟赢家。 其中长期赢家只占极少部分,若我们不想成为绝大部分的输家,以下几种行为请...