CSS:如何选择一个元素下的两种同级子元素？

html-css023

CSS:如何选择一个元素下的两种同级子元素？,第1张

css选择一个元素下的2中同级元素，我们首先还是需要获取到这个元素，可以通过给这个元素一个id或者是class来做，选择同级子元素，一般设置的都是相同的css样式，所以，在同级子元素的选取中css是通过一个','来隔开元素名，然后其他的还是一样的书写css样式，请看代码：

<html>

<head>

<style>

#div1{

width:600px

height:40px

font-size:13px

}

#div1 p,span{ //通过一个‘,’实现对2个同级子元素的选取

display:block

width:300px

height:30px

text-align:center

margin:0 auto

}

</head>

<body>

<div id='div1'>

<p>我是测试文字</p>

<span>我是测试文字1</span>

</div>

</body>

</html>

你可以让span相对于div来定位啊，这样就不用管input的长度和位置了。当然，input也要通过设置text-indent来给span腾出位置。下面是个简单的实现例子（为了方便，我用了内联的css，你可以改成外联的）：

<div style="position:relative"><input type="text" id="xj_zhanghao" class="xj_text" maxlength="16" style="text-indent:20px" placeholder="账号" onKeyUp="xjzhltishi()" onFocus="qcxjtishi()"/><span id="xjzhtishi" style="position:absolute left:3px top:3px width:14px padding:1px line-height:1 text-align:center background-color:red color:white font-size:11px border-radius:2px">99</span></div>

b这一类的元素都是a的同级元素并且是a元素之后的就可以a:hover~b{....}

完美解决 ，经测试！

附上我自己的代码：

ul li a img:hover ~h3 {

    padding-bottom: 10px

    color: #25AAFF!important

    border-bottom: 2px solid #25AAFF

}