/* 必须是input,但是要具有value这个属性 */
input[value]{
color: pink;
}
input[type=tel] {
color: skyblue;
}
/* 选择div中以icon开头的元素 */
div[class^=icon]{
color: green;
}
/* 选择div中以data结尾的元素 */
section[class$=data]{
color: pink;
}
/* 类选择，属性选择器，伪类选择器，权重都是10 */
/* 选择ul中的第一个孩子 */
ul li:first-child {
background-color: pink;
}
/* 选择ul中的最后一个孩子 */
ul li:last-child {
background-color: pink;
}
/* 选择其他的孩子nth-child(数字代表第几个) */
ul li:nth-child(2){
background-color: skyblue;
}
ul li:nth-child(4){
background-color: green;
}
/* 把所有偶数的孩子选择出来，odd，2n,都代表偶数 */
ul li:nth-child(even) {
background-color: purple;
}
/* 把所有偶数的孩子选择出来，even，2n+1,都代表奇数 */
ul li:nth-child(odd){
background-color: aqua;
}
/* 选择了所有孩子，nth-child(n),括号里只能是n,不能是其他字母 */
ol li:nth-child(n){
background-color: blue;
}
/* 从第三个开始，后面的颜色为淡黄色 */
ol li:nth-child(n+3){
background-color: bisque;
}
/* 从第四个开始，前面的颜色为橘色 */
ol li:nth-child(-n+4){
background-color: orange;
}
</style>
</head>
<body>
<!-- box1里是关于新增属性选择器 -->
<div class=".box1">
<!-- 1.利用属性选择器可以不借助类或者id选择器 -->
<input type="text" value="请输入用户名">
<input type="text">
<!-- 2,属性选择器可以选择属性=值的某些元素((重点)-->
<input type="tel" name="" id="">
<input type="password" name=""id>
<!-- 标签选择器为权重为1 -->
<!-- 权重相同采用就近原则 -->
<!-- 3,属性选择器可以选择属性值开头的某些元素 -->
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div class="icon5">小图标5</div>
<div>我是打酱油的</div>
<section class="icon1data">1111</section>
<section class="icon2data">2222</section>
<section class="icon2data">3333</section>
<section class="icon2da">444</section>
</div>
<!-- box里是关于新增伪类选择器 -->
<div class="box2">
<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>
</ol>
</div>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
