注意条件：相邻，且同一级
属性选择器：可以将其看成数组（一维/二维数组）
div[name]{
}
div[name="Tom"]{
}
div[name][age]{
}
通配符：设置所有标签
*{
}
选择器的优先级与权值的关系
相同级别的选择器遵循：就近原则 > 叠加原则
不同类型的选择器：选择器的针对性越强，它的优先级就越高，这里涉及到权值的问题，先来看下面的表
选择器类型
权值
通配选择符
0
标签选择器
1
类选择器
10
属性选择器
10
伪类
10
伪元素
1
id选择器
100
important
1000
原则：选择器的权值累计越高，优先级越高，如果权值相同，后定义的优先（就近原则）
优先级排序：important > 内联 > id选择器 > 类选择器 > 标签选择器|伪类|属性选择 > 伪元素 > 通配符 > 继承
HTML标签类型
HTML有N多标签，根据显示的类型，主要分为三大类
块级标签：独占一行，能随时设置宽度和高度（如：div、p、h1…h6、ul、li）
<style>
/* div标签选择器 */
div{
/*背景色*/
background-color: yellow;
}
</style>
<body>
<div>我是div容器</div>
<div>我是div容器</div>
<div>我是div容器</div>
</body>
效果：
行内标签（内联标签）：多个行内标签能同时显示在一行，宽度高度取决于内容尺寸（如：span、a、label）
<style>
/* span标签选择器 */
span{
/*背景色*/
background-color: red;
}
</style>
<body>
<span>我是span容器</span>
<span>我是span容器</span>
<span>我是span容器</span>
<span>我是span容器</span>
</body>
效果：
行内-块级标签（内联-块级标签）：多个行内-块级标签可显示在同一行，能随时设置宽度和高度（如：input、button）
[Uploading Snip20160614_7_103697.png . . .]
```
<style>
/* input标签选择器 */
input{
/*背景色*/
background-color: yellow;
}
</style>
<body>
<input type="text">
<input type="date">
<input type="text">
<input type="date">
</body>
```
效果：
修改标签的显示类型 —— display/visibility
在开发中，我们经常需要将各种类型的标签拼凑在一起，而如果按照上面标签的类型来看，显然块级标签后就没办法再添加其他标签，这样也就大大降低了灵活性。这个时候我们就需要来看看`display属性，它们可以用来修改标签的显示类型，提高标签之间拼凑时的灵活性
display属性有4个值
inline-block：让标签变为行内-块级标签（内联-块级标签）
div{
/*设置背景色*/
background-color: red;
}
/* 隐藏 */
.noneDiv{
display: none;
/*设置背景色*/
background-color: yellow;
}
/* 块级 */
.blockInput{
display: block;
/*设置背景色*/
background-color:orange;
}
/* 行内 */
.inlineDiv{
display: inline;
/*设置背景色*/
background-color: green;
}
/* 行内-块级 */
.inline-blockDiv{
display: inline-block;
/*设置背景色*/
background-color: gray;
}
</style>
<body>
<div>默认的div</div>
<div class="noneDiv">隐藏div标签</div>
<div class="inlineDiv">变成行内标签的div</div>
<div class="inline-blockDiv">变成行内-块级标签的div</div><br><br>
<!--默认的input-->
<input type="text">
<input type="text">
<!--变成块级标签的input-->
<input class="blockInput" type="text">
<input class="blockInput" type="text">
</body>
相关文章
精彩导读
热门资讯
关注我们
