伪类
动态伪类
:link 超链接未被访问过的状态
：visited 超链接访问过的状态
:hover 鼠标悬停在元素上的状态
:active 被激活的时候，鼠标点击并且没有放开发状态
:focus 获取焦点的时候
- 注意
- 设置动态伪类的时候，需用 link，visited,hover,active的顺序来操作
- 只有表单元素才能用
focus伪类,(焦点)
结构伪类
:first-child 所有兄弟元素中的第一个
:last-child 所有兄弟元素中的最后一个
:nth-child(n) 所有兄弟元素中的第n个
:first-of-type 所有同类型兄弟中的第一个
:last-of-type 所有同类型兄弟元素中的最后一个
:nth-of-type(n) 所有同类型兄弟中的第n个
- n的值
- n：第几个
- 2n：偶数
- 2n+1/ 2n-1:奇数
- -n+3：前三个
否定伪类(排除的元素)
:not(选择器)
UI伪类
:checked 被选中的复选框或单选按钮
:enable 可用的表单元素(没有disabled属性)
：disabled 不可用的表单元素(有disabled属性)
语言伪类
:lang() 根据指定的语言选择元素
选择器练习作业
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* 一 */
section h1,
article h2{
font-size: 50px;
}
aside h3{
font-style: italic;
}
/* 二 */
input:required:focus{
border: 2px solid blue;
}
input::placeholder{
color: gray;
}
/* 三 */
.active:hover{
background-color: gray;
}
a:hover{
color:white ;
}
/* 四 */
.special-title::first-letter{
float: left;
line-height: 2.5;
color: gold;
}
/* 五 */
.list li ul li:first-child{
background-color: gray;
}
.list li ul li:hover{
color: blue;
}
/* 六 */
.container form input:focus{
border:3px solid green;
outline: none;
}
.container form label:hover{
background-color: skyblue;
}
</style>
<body>
<!-- 一 -->
<div class="main">
<section id="intro">
<h1>Welcome</h1>
<p>This is the introduction section.</p>
</section>
<article class="post">
<h2>Post Title</h2>
<p>Post content...</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</article>
<aside class="sidebar">
<h3>Sidebar Title</h3>
<p>Sidebar content...</p>
</aside>
</div>
<!-- 二 -->
<form>
<input type="text" name="username" required placeholder="Username">
<input type="email" name="email" required placeholder="Email">
<input type="submit" value="Submit">
</form>
<!-- 三 -->
<nav>
<ul>
<li><a href="#home" class="active">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<!-- 四 -->
<h2 class="special-title">Special Title</h2>
<!-- 五 -->
<ul class="list">
<li>Item 1
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Subitem 3</li>
<li>Subitem 4</li>
</ul>
</li>
</ul>
<!-- 六 -->
<div class="container">
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>