数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究伪类和所有 CSS 类
伪类关键字用于指定添加它的选择器的特殊状态。这给了我们更多的控制权，现在我们可以在选择器处于特定状态时（例如：悬停、选中、已访问等）对其进行定位。
伪类
以下是几个关键的伪类：
:active = 选择活动链接
:checked = 选择每个选中的<input>元素
:first-child = 选择元素父元素的第一个子元素
:first-of-type = 选择其父元素的第一个元素
:focus = 选择具有焦点的元素
:hover = 选择鼠标悬停时的链接
:link = 选择所有未访问的链接
:not(selector) = 选择不是<p>元素的每个元素
:nth-of-type(n) = 选择其父元素的第二个元素
:only-of-type = 选择其父元素中唯一的元素
:only-child = 选择其父元素中唯一的子元素
:out-of-range = 选择值超出指定范围的元素
:valid = 选择具有有效值的元素
:visited = 选择所有已访问的链接
使用 CSS 伪类操作链接
当我们使用<a>元素创建链接时，可以使用各种伪类来设置链接颜色、已访问链接颜色、悬停、活动链接等。我们已经使用伪类实现了同样的效果：
a:link {
color: rgb(17, 0, 255);
}
a:visited {
color: rgb(128, 0, 107);
}
a:hover {
color: rgb(255, 105, 243);
}
a:active {
color: rgb(255, 153, 0);
}
示例
让我们看看代码：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
a {
font-size: 18px;
font-weight: bold;
}
a:link {
color: rgb(17, 0, 255);
}
a:visited {
color: rgb(128, 0, 107);
}
a:hover {
color: rgb(255, 105, 243);
}
a:active {
color: rgb(255, 153, 0);
}
</style>
</head>
<body>
<h1>Pseudo class example</h1>
<a href="#">This is some sample link text</a>
<h2>Hover, click on the above link to see the pseudo class in action</h2>
</body>
</html>
nth-of-type 伪类
在此示例中，我们根据 nth-of-type() 伪类设置了不同的背景颜色：
child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
.child:nth-of-type(4){
background-color: #4CAF50;
}
.child:nth-of-type(5){
background-color: #03A9F4;
}
.child:nth-of-type(6){
background-color: #FEDC11;
}
示例
让我们看一个例子：
<!DOCTYPE html>
<html>
<head>
<title>CSS Inline-level Elements and Inline Boxes</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
}
input[type="button"] {
border-radius: 10px;
}
.child{
color: white;
border: 4px solid black;
}
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
.child:nth-of-type(4){
background-color: #4CAF50;
}
.child:nth-of-type(5){
background-color: #03A9F4;
}
.child:nth-of-type(6){
background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Inline-level Elements and Inline Boxes</legend>
<div><span class="child">Orange</span> Color<span class="child">Red</span> Color<span class="child">Violet</span> Color</div><br>
</body>
</html>
：focus 伪类
要选择具有焦点的元素，请使用 :focus 伪类。在这里，当获得焦点时，搜索字段将在搜索框周围显示一个轮廓，供用户输入搜索关键字：
.searchField:focus {
outline: 3px solid #ddd;
}
示例
让我们看看示例：
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: rgb(76, 78, 175);
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #4f3e8e;
}
.searchField {
box-sizing: border-box;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
.searchField:focus {outline: 3px solid #ddd;}
.dropdown {
position: relative;
display: inline-block;
}
.dropdownList {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: 1px solid #ddd;
z-index: 1;
}
.dropdownList a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>
</head>
<body>
<h1>Search/filterText Dropdown Example</h1>
<div class="dropdown">
<button class="dropbtn" onclick="showDropList()">Dropdown</button>
<div id="myDropdown" class="dropdownList">
<input type="text" placeholder="Search.." class="searchField">
<a href="#">Cow</a>
<a href="#">Cat</a>
<a href="#">Dog</a>
<a href="#">Giraffe</a>
<a href="#">Lion</a>
<a href="#">Leopard</a>
<a href="#">Cheetah</a>
</div>
</div>
<script>
function showDropList(){
let dropDiv = document.querySelector('.dropdownList');
if(dropDiv.style.display==="block"){
dropDiv.style.display = "";
} else {
dropDiv.style.display = "block";
}
}
document.querySelector('.searchField').addEventListener('keyup',filterDropdown);
function filterDropdown() {
var inputSearch, filterText, ul, li, links, i,div;
inputSearch = document.querySelector(".searchField");
filterText = inputSearch.value.toUpperCase();
div = document.getElementById("myDropdown");
links = div.getElementsByTagName("a");
for (i = 0; i < links.length; i++) {
txtValue = links[i].textContent || links[i].innerText;
if (txtValue.toUpperCase().indexOf(filterText) > -1) {
links[i].style.display = "";
} else {
links[i].style.display = "none";
}
}
}
</script>
</body>
</html>
更新于： 2023-12-26
165 次查看
广告