1.聚焦选择器
input:focus
<style>
input{
outline:none;
}
/* 聚焦选择器,选中时边框变色 */
input:focus{
border-color:blue;
}
</style>
</head>
<body>
<input type="text">
</body>
运行实例:
选中框时边框会聚焦变色。
2.属性选择器
<style>
[href]{
color:green;
}
a[href]{
color:red;
}
a[href="#"]{
color:blue;
}
input[value="登陆"]{
background-color: #0000FF;
}
</style>
<body>
<a href="">百度</a>
<a href="#">淘宝</a>
<a>文字</a>
<b href="">出人</b>
<input type="password" value="登陆">
</body>
</html>
[href] | 选择具有href这个属性的进行定义 |
a[href] | 选择在a标签下,具有href属性的进行定义 |
a[href="#"] | 在a标签在,具有href属性,并且里面有#号的标签进行定义 |
3.伪类选择器
<style>
div span:first-child{
color:red;
}
div :last-child{
color:blue;
}
/* 3.精准定位元素
括号中写元素的位置
odd奇数位置元素
even偶数位置元素
*/
div :nth-child(n){
color:green;
}
div :nth-of-type(1){
color:green;
}
div :first-of-type{
color:#008000;
}
</style>
<body>
<div>
<span>大儿子</span>
<span>hello</span>
<p>哈哈</p>
<p>托马斯</p>
</div>
<div class="box">
<span>heool</span>
<span>哈哈哈</span>
<p>tuoams</p>
<p>cai</p>
</div>
</body>
first-child | 选择第一个元素 |
last-child | 选择最后一个元素 |
nth-child(n) | 精准定位元素的位置 |
nth-of-type(1) | 找到div每一种类型的第n个元素 |
first-of-type | div下面的每个类型的第一个元素 |