html选择器的一些书写规范

  我们都知道常用的选择器有id选择器、class选择器、以及直接标签选择，那如果我们想选择他们的子标签，而不使用id和class该怎么选择呢，这里我就给大家讲一下平时我们在书写中容易混淆的地方。

  例如我们在选择p标签下的span标签时，我们一般是通过这种写法来选择：

　　<style media="screen">
　　　　p span{
　　　　　　color: red;
　　　　}
　　</style>

　　<p><span>开心 <span>快乐</span></span></p>

  但这样写有个问题，会将p标签下的所有span标签都设置为红色，如果我们想将第二个span标签设置为绿色的话，这里就需要使用“>”符号来选择，他作用是一层一层的选择，表示的是父与子的关系，这时候我们就该这样写：

　　　　p>span>span{
　　　　　　color: yellow;
　　　　}

  这种写法就可以很好的选择到我们想选择的标签的颜色，同理“>”表示表示的是父子级关系，那如果是兄弟级的话我们就可以使用“+”这个符号来选择即可。

  例如：我们我们通过点击input框来改变span的颜色：

　　<style media="screen">
　　　　.inputText{
　　　　　　position: relative;
　　　　　　width: 100px;
　　　　　　height: 20px;
　　　　}
　　　　.inputText>input{
　　　　　　width: 100px;
　　　　　　height: 20px;
　　　　}
　　　　.inputText>span{
　　　　　　position: absolute;
　　　　　　top: 0;
　　　　　　right: 0;
　　　　　　width: 10px;
　　　　　　height: 20px;
　　　　　　background-color: red;
　　　　}
　　　　.inputText>input:focus +span{
　　　　　　background-color: green;
　　　　}
　　</style>　

　　<div class="inputText">
　　　　<input type="text" name="" value="输入">
　　　　<span></span>
　　</div>

 

转载于:https://www.cnblogs.com/abey/p/6159963.html