选择器按照权重,从前到后执行
权重相同时,后面的会覆盖前面的
选择器:选择HTML(DOM树)上的某一个元素
基本选择器
- 标签选择器,选择器可以组合使用
/*
*是全选所有内容(一般初始化页面的内外边距:浏览器默认有8px的margin)
*/
*,ul,li{
margin: 0px;
padding: 0px;
font-size: 12px;
list-style: none;
}
我们可以在浏览器控制台事先修改好数值,再直接粘贴到代码中
2. 类选择器和id选择器:给标签分类,提高复用
id是#,类是.
id应保证全局唯一
#nav{
width: 100%;
height: 36px;
background: rgba(245,245,245,0.5);
}
.nav{
width: 100%;
height: 36px;
background: rgba(245,245,245,0.5);
}
层次选择器
看到代码时脑子里就有结构图
<body>
<ul></ul>
<dl></dl>
<ul>
<li></li>
<li></li>
</ul>
</body>
- 后代选择器:父 子{ 作用于所有的子类上,比如爷爷下面的所有儿子,爸爸和孙子都可以作用 }
body ul{
width: 100px;
height: 100px;
background: #33c900;
}
<ul>yes</ul>
<ul id="ul">host,yes</ul>
<ul>yes</ul>
<dl>
<ul>yes</ul>
</dl>
<ul>yes</ul>
<ul>yes</ul>
- 后代直接选择器:父 + 子{ 必须是父类下面的第一个子类,只能作用于儿子 }
body > ul{
width: 100px;
height: 100px;
background: #33c900;
}
<ul>yes</ul>
<ul id="ul">host,yes</ul>
<ul>yes</ul>
<dl>
<ul>no</ul>
</dl>
<ul>yes</ul>
<ul>yes</ul>
- 相邻兄弟选择器:子 + 兄:对下不对上(只往下找,不往上找),且只找一个
#ul + ul{
width: 100px;
height: 100px;
background: #33c900;
}
<ul></ul>
<ul id="ul"></ul>
<ul>只有这一行作用</ul>
<ul>
<ul></ul>
</ul>
- 通用兄弟选择器:子 ~ 兄:向下所有的,兄弟级(同级别 )元素
#ul ~ ul{
width: 100px;
height: 100px;
background: #33c900;
}
<ul>无效</ul>
<ul id="ul">主,但无效</ul>
<ul>只有这一行作用</ul>
<dl>
<ul>无效</ul>
</dl>
<ul>有效</ul>
<ul>有效</ul>
结构伪类选择器:带:号的都是伪类选择器
- 按位置查找:ul:nth-child(2):
- 先找到ul的父级,再往下找,第二个出现的,且必须是ul元素
- first-child和last-child同理,一个是第一个,和最后一个
ul:nth-child(2){
width: 100px;
height: 100px;
background: #33c900;
}
<body>
<ul>1</ul>
<ul id="ul">只有这个作用</ul>
<ul>u2</ul>
<dl>
<ul>这个是父级dl的第一个,所有没有作用</ul>
</dl>
<ul>u4</ul>
<ul>u5</ul>
</body>
- 按元素查找:ul:nth-of-type(2)
- 先找到ul的父级,再往下找
- 找到第二个出现的ul标签
ul:nth-of-type(2){
width: 100px;
height: 100px;
background: #33c900;
}
<ul id="ul">1</ul>
<ul>有作用</ul>
<ul>u4</ul>
<ul>u5</ul>
id+css=属性选择器
- class可以有多个
- 除了标签名外都可以当属性
- 属性值可以写正则表达式
- font组合写时,字体大小后面就是行高
- class属性值只要包含4就可以
ul[class*="4"]{
width: 100px;
height: 100px;
background: #33c900;
/*字体,粗细,大小/行高*/
font:italic bold 12px/25px none;
}
<ul class="ul1 ul2 ul3">1</ul>
<ul class="ul4 ul1">有作用</ul>
<ul>u4</ul>
<ul class="ul4">有作用</ul>
- ^=“ul”(以ul开头),$=“4”(以4结尾)
ul[class$="4"]{
width: 100px;
height: 100px;
background: #33c900;
/*字体,粗细,大小/行高*/
font:italic bold 12px/25px none;
}
<ul class="ul1 ul2 ul3">1</ul>
<ul class="ul4 ul1">没有作用</ul>
<ul>u4</ul>
<ul class="ul4">有作用</ul>