请问实用CSS如何消除A标签的图片边框

html-css031

请问实用CSS如何消除A标签的图片边框,第1张

去除a标签中图片的表框，那就直接css中将a标签中的img的border属性设置为0即可，css如下：

a img{border:0}

这样写的意思就是所有a标签下的图片，边框都为0。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

.list { width: 500px margin: 0 auto display: flex }

.list > .item { flex: 1 margin: 10px position: relative text-align: center }

.list > .item input { opacity: 0 position: absolute left: 0 top: 0 right: 0 bottom: 0 width: 100% height: 100% z-index: 2 }

.list > .item input ~ .text { border: 1px solid #eee padding: 10px position: relative }

.list > .item input:checked ~ .text { border-color: red color: red }

</style>

</head>

<body>

<div class="list">

<div class="item">

<input type="radio" name="list" value="1" />

<div class="text">选项1</div>

</div>

<div class="item">

<input type="radio" name="list" value="2" />

<div class="text">选项2</div>

</div>

<div class="item">

<input type="radio" name="list" value="3" />

<div class="text">选项3</div>

</div>

<div class="item">

<input type="radio" name="list" value="4" />

<div class="text">选项4</div>

</div>

</div>

</body>

</html>

CSS3 element1~element2 选择器

CSS3 :checked 选择器