【css】属性选择器

科学熊

于 2023-08-07 11:28:31 发布

阅读量850

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/qq_22744093/article/details/132143018

前端专栏收录该内容

80 篇文章

订阅专栏

有些场景中需要在相同元素中获取具有特定属性的元素，比如同为input，type属性有text、button，可以通过属性选择器设置text和button的不同样式。
代码：

<style>
input[type=text] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}

input[type=button] {
  width: 120px;
  margin-left: 35px;
  display: block;
}
</style>
</head>
<body>
<form name="input" action="" method="get">
  Firstname:<input type="text" name="Name" value="Bill" size="20">
  Lastname:<input type="text" name="Name" value="Gates" size="20">
  <input type="button" value="Example Button">
</form>

</body>