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

html-css015

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>

css中的绝对定位,意思就是把元素的左上角固定到浏览器窗口的某个指定的唯一的坐标点上。

css中的相对定位,意思是是相对于上一个相对定位的,总是相对于前面的同级标签为基准标签。

不管是什么定位都需要有一个参照物。相对定位的参照物是本身。绝对定位的参照物就是父级元素。两种定位产生的影响也不同。相对定位,设置后,原来的位置始终保留着。绝对定位,设置后,原来的位置会被后面的内容占据。

你可以让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>