伪类
动态伪类
: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() 根据指定的语言选择元素
选择器练习作业
<!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>
