数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会研究
时尚研究
法律研究CSS 中的通用选择器
CSS * 选择器是一个通配符选择器，用于选择 HTML DOM 中的所有元素。如果你想为整个文档设置类似的样式，那么就使用通配符选择器。
语法
CSS 通配符选择器的语法如下：放置你想要为整个 HTML 文档设置的样式 −
* {
/*declarations*/
}
以下示例说明了 CSS 通配符选择器 −
为文档设置边距和内边距
要为网页上的所有元素设置边距和内边距设置，在通配符选择器下进行设置 −
* {
padding: 2px;
margin:5px;
}
示例
让我们看示例 −
<!DOCTYPE html>
<html>
<head>
<title>Custom Cursor Using CSS</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
#tech1 {
cursor: pointer;
}
#tech2 {
cursor: pointer;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Custom Cursor Using CSS</legend>
<h1>Learn</h1>
<input type="button" id="tech1" value="DBMS">
<input type="button" id="tech2" value="Python">
</fieldset>
</form>
</body>
</html>
使用通配符选择器设置盒子尺寸
我们已经使用了通配符选择器，设置了盒模型属性。盒模型使用 border-box 值设置；以便内边距和边框包含在宽度和高度中 −
* {
box-sizing: border-box;
}
示例
以下是示例 −
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
input {
width: 100%;
padding: 12px;
margin-top: 6px;
margin-bottom: 16px;
}
input[type="submit"] {
background-color: rgb(69, 27, 117);
color: white;
font-weight: bold;
font-size: 20px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
form {
padding: 20px;
}
#checksField {
display: none;
background: #f1f1f1;
color: #000;
position: relative;
padding: 20px;
margin-top: 10px;
}
#checksField p {
padding: 10px 35px;
font-size: 18px;
}
.correct {
color: green;
}
.correct:before {
position: relative;
left: -35px;
content: "✔";
}
.wrong {
color: red;
}
.wrong:before {
position: relative;
left: -35px;
content: "✖";
}
</style>
</head>
<body>
<h1 style="text-align: center;">Password Validation Example</h1>
<form>
<label for="uname">Username</label>
<input type="text" id="uname" name="uname" required />
<label for="pass">Password</label>
<input type="password" id="pass" name="pass" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required/>
<input type="submit" value="Submit" />
</form>
<div id="checksField">
<h3>Password must contain the following:</h3>
<p id="letter" class="wrong">A <b>lowercase</b> letter</p>
<p id="capital" class="wrong">A <b>capital (uppercase)</b>letter</p>
<p id="number" class="wrong">A <b>number</b></p>
</div>
<script>
var myInput = document.getElementById("pass");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
myInput.onfocus = function() {
document.getElementById("checksField").style.display = "block";
};
myInput.onblur = function() {
document.getElementById("checksField").style.display = "none";
};
myInput.onkeyup = function() {
var lowerCaseLetters = /[a-z]/g;
if (myInput.value.match(lowerCaseLetters)) {
letter.classList.remove("wrong");
letter.classList.add("correct");
} else {
letter.classList.remove("correct");
letter.classList.add("wrong");
}
var upperCaseLetters = /[A-Z]/g;
if (myInput.value.match(upperCaseLetters)) {
capital.classList.remove("wrong");
capital.classList.add("correct");
} else {
capital.classList.remove("correct");
capital.classList.add("wrong");
}
var numbers = /[0-9]/g;
if (myInput.value.match(numbers)) {
number.classList.remove("wrong");
number.classList.add("correct");
} else {
number.classList.remove("correct");
number.classList.add("wrong");
}
};
</script>
</body>
</html>
为文档设置字体
使用通用选择器为网页上设置的所有元素选择相似的字体 −
* {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
示例
以下是示例 −
<!DOCTYPE html>
<html>
<head>
<style>
* {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>Tutorials</h1>
<h2>Text Tutorial</h2>
<p>This includes the text library.</p>
<h2>Video Tutorial</h2>
<p>This includes the video lectures.</p>
</body>
</html>
更新于: 2024-01-02
1K+ 浏览量
广告