【css】属性选择器

有些场景中需要在相同元素中获取具有特定属性的元素,比如同为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>

渲染效果:
【css】属性选择器_第1张图片

你可能感兴趣的:(前端,css,前端)