注:(1)CSS层叠性特点,相同层级的选择器,后相同属性的代码会覆盖前面的代码
(2)选择器的优先级,ID>类名>标签名>通配符(*)
ID选扦器的值(100)
类名选择器的值(10)
标签选扦器的值(1)
(3)类名的组合可以是1个或者多个而id名的组合只能有1个
1.标签选择器
div{
width: 80px;
height: 80px;
border: 5px solid purple;
}
2.类名选择器
.item{
width: 100px;
height: 100px;
border: 5px solid green;
}
3.ID选择器
#box{
width: 120px;
height: 120px;
border: 5px solid orange;
}
4.并集选择器
.item1,
.item2,
.item3 {
background-color: blue;
}
5.组合选择器(交集选择器)
设置相同类名下不同的标签,可以使用交集选择器
/* 类名叫做item的div标签 */
/* 层级(标签 + 类名 = 11) */
div.item {
border: 5px solid lightgreen;
}
/* 类名叫做item的p标签 */
p.item {
border: 5px solid red;
}
6.后代选择器
.container {}
.container ul {}
.container ul li {}
(1)间接后代选择器
.container li {}
(2)直接子代选择器(选择器子元素)
.container ul > li {
color: red;
}
.container ol > li {
color: green;
}
.container ol > li.active {
font-weight: bold;
font-size: 50px;
}
#总结:
1.由父元素或祖先元素来确定选择的范围,这种选择器可以叫做派生选择器。
后代选择器 ul li {}
子代选择器 ul > li {} (只能是父子关系的标签)
2.遇到组合的选择器带有空格的,他们是嵌套关系的标签。
没有空格的选择器,表示同一个标签。
3.li.active 表示类名叫做active的li标签
li .active 表示选择li标签下,类名叫做active的子元素
7.伪类选择器
带有冒号的这种选择器,叫做伪类选择器
a:hover {}
(1)p:nth-child( )
p:nth-child(1) {
color: red;
}
/* n: 1,2,3,4,5,........ */
/* 选择偶数对应标签 */
p:nth-child(2n) {
color: blue;
}
/* 选择奇数对应标签 */
p:nth-child(2n-1) {
color: yellowgreen;
font-weight: bold;
}
(2)first-child
last-child
/* 选择ul标签下的第一个li子元素 */
ul li:first-child {
color: red;
}
/* 选择ul标签下的最后一个li子元素 */
ul li:last-child {
color: red;
}
(3)nth-of-type( )
/* 选择ul标签下的第一个div类型的子元素 */
ul div:nth-of-type(1) {
font-size: 40px;
}
/* 选择ul下的偶数系列的li标签 */
ul li:nth-of-type(2n) {
color: yellowgreen;
}
<ul>
<div>块标签1</div>
<li>无序列表标签</li>
<li>无序列表标签</li>
<li>无序列表标签</li>
<li>无序列表标签</li>
<li>无序列表标签</li>
<!-- <div>块级标签</div> -->
</ul>
#伪类元素:
1.属于行内元素
2.::before
::after
3.选择器:: {
content: ""; 必须要有这个content属性
}
4.伪类选择器是选择器 (选择标签)
伪类元素是元素 (生成标签)
/* 伪类元素: 是指由CSS生成的标签。 */
.header::before {
content: "abc";
color: green;
font-weight: bold;
}
.header::after {
content: "ABC";
color: red;
}
8.属性选择器
1.class^="i" :选择class属性值为“i”字符开头的标签
[class^="i"] {
width: 60px;
height: 60px;
background-color: red;
border-radius: 6px;
margin: 5px;
}
2.class$="1" :选择class属性值以“1”字符结尾的标签
[class$="1"] {
background-color: green;
}
3.class*="o" :选择class属性包含字符 “o”的标签
[class*="o"] {
font-size: 50px;
}
4.class="box" :属性选择器 等于 平时用的.box
5.input[type="text"] :属性选择器
input[type="text"] {
height: 60px;
border: 2px solid red;
}
input[type="password"] {
height: 40px;
border: 2px solid green;
}