html选择器的一些书写规范-白红宇

html选择器的一些书写规范

阅读量：5964 次

发布时间：2019-06-19

本文共 1054 字，大约阅读时间需要 3 分钟。

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

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

　　　　p span{

　　　　　　color: red;

　　　　}

　　</style>

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

　　　　p>span>span{

　　　　　　color: yellow;

　　　　}

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

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

　　　　.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>

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

你可能感兴趣的文章