'不同类型的 CSS 选择器”
- Linda Hamilton原创
- 2025-01-06 18:15:43528浏览
CSS 中选择器的类型：
类别选择器：
代码：
<body>
<p>
<pre class="brush:php;toolbar:false"><style>
.heighlight {
color: red;
font-weight: bold;
}
</style>
ID选择器：
代码：
<body>
<h1>
<pre class="brush:php;toolbar:false"><style>
#main-heading {
color: blue;
font-size: 24px;
}
#intro-paragraph {
background-color: yellow;
padding: 10px;
}
</style>
元素选择器：
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<a href="https:///www.google.com">Visit Example Website</a>
</body>
<style>
h1 {
color: blue;
}
p {
font-size: 16px;
}
a {
text-decoration: none;
color: red;
}
</style>
通用选择器
代码：
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph</p>
<div>
<h2>About Us</h2>
<p>This is another paragraph</p>
</div>
</body>
<style>
*{
margin: 0;
padding: 0;
border: 1 px solid;
}
</style>
分组选择器：
代码：
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph.</p>
<a href="#">Click me</a>
<button>Submit</button>
</body>
<style>
h1,p {
color: blue;
}
a,button {
background-color: yellow;
padding: 10px;
}
</style>
属性选择器：
代码：
<form>
<label for="name">Name:</label>
<input type="text">
<pre class="brush:php;toolbar:false"><style>
input[type="submit"] {
background-color: #4caf50;
color: white;
}
input[required] {
border: 1px solid red;
}
</style>
以上是'不同类型的 CSS 选择器”的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn