[分享]css3按钮选择器

CSS3按钮选择器是指在CSS样式表中，通过选择器来控制按钮的样式。这些按钮包括普通按钮、超链接、复选框、单选框等等。下面是一个使用CSS3按钮选择器的例子：button { backgroundco...

CSS3按钮选择器是指在CSS样式表中，通过选择器来控制按钮的样式。这些按钮包括普通按钮、超链接、复选框、单选框等等。

下面是一个使用CSS3按钮选择器的例子：

button[type="submit"] {
  background-color: #4CAF50; /* 绿色背景 */
  border: none; /* 边框为none */
  color: white; /* 字体为白色 */
  padding: 15px 32px; /* 内边距 */
  text-align: center; /* 文字居中 */
  text-decoration: none; /* 文字无下划线 */
  display: inline-block; /* 行内块元素，可以设置宽高 */
  font-size: 16px; /* 字体大小 */
  margin: 4px 2px; /* 外边距 */
  cursor: pointer; /* 鼠标样式为手型 */
} 

以上代码可以将所有type为submit的按钮样式设置为绿色背景、白色字体、无边框、居中、有内边距、文字无下划线、行内块元素、带外边距、鼠标样式为手型。

除了按钮类型的选择器，还有其他类型的选择器，如：

input[type="text"] {
  /* 样式 */
}

a:hover {
  /* 鼠标悬停时的样式 */
}

input:checked + label {
  /* 选择了input后，label的样式 */
} 

CSS3按钮选择器是完成网页美化的重要组成部分。掌握这些选择器的基本用法，可以让网页设计得更加漂亮。