CSS选择器
CSS的组成
CSS由以下几部分组成:选择器、{}、声明。
选择器下面会着重介绍,先来看一下{}和声明,{}代表的就是CSS的样式,几乎所有的样式都会写在{}中,在{}中每一个属性和属性值对应起来的就是一条声明,格式:属性:属性值。一个css可以有一个或多个声明,每个声明之间用分号隔开。
CSS的写法分为两种:紧凑型、展开型:
p{color:red;background-color:blue;font-size:18px......} /*紧凑型的样式*/
p {
color:red;
background-color:blue;
font-size:18px;
.......
} /*展开型的样式*/
这里建议采用展开型的样式。
CSS选择器
CSS在给元素添加样式时,首先就是获取元素。只有获取了元素才嫩恶搞会该元素添加样式。因此就需要借助CSS选择器来实现元素的获取。CSS中的选择器有以下几种:
id选择器——通过元素的id值获取的元素(#)
id选择器选择的元素必须是唯一的,因为id值在页面中就是唯一的,使用id选择器选择的元素就比较得到准确。例如:
#page {
color: red; //选择id值为page的元素,字体颜色变为红色
}
类名选择器——通过元素的类名获取元素(.)
类名选择器通过类名来选取元素、类名在页面中可以有一个或者多个。例如:
.page {
color: red; //选择类名为page的元素,字体颜色变为红色
}
元素选择器——通过元素(标签)名获取
通过元素名获取元素,这种选择器会把页面中的所有指定的元素名获取到,因此想要获取某个具体的元素,该选择器就不适用。比如:
p {
color:red;
} /*选取所有的p元素*/
通配符选择器——通过获取页面中的所有元素(*)
该选择器在开发过程中不会经常使用,使用它只是做一些页面样式初始化,比如:
* {
margin:0;
padding:0;
} /*去除页面中所有元素的默认边距*/
属性选择器——通过元素的属性来获取元素([属性])
属性选择器的合适分为以下几种:
类型 | 描述 |
---|---|
[abc] | 选择含有abc属性的元素 |
[abc='def'] | 选择属性为abc,值为def的元素 |
[abc^="def"] | 选择 abc 属性值以 "def" 开头的所有元素 |
[abc$="def"] | 选择 abc 属性值以 "def" 结尾的所有元素 |
[abc*="def"] | 选择 abc 属性值中包含子串 "def" 的所有元素 |
p[id] {
color: red;/*获取p元素中属性为id的所有元素*/
}
p[id='page'] {
color: blue;/*获取p元素中id值为page的元素*/
}
p[id^='abc'] {
color: green;/*获取id值以abc开头的所有p元素*/
}
p[id$='abc'] {
color: yellow;/*获取id值以abc结尾的所有p元素*/
}
p[id*='abc'] {
color: orange;/*获取id值包含abc的所有p元素*/
}
伪类选择器
该类型的选择器已经是定义好的了,因此名字不能改变,最常用的是对链接添加的样式:
1、a:link(未访问过的链接)
2、 a:hover(鼠标经过,也就是鼠标指针放在该元素上时)
3、a:active(当前激活链接,也就是点击鼠标左键时)
4、a:visited(已访问过)
下图是一个普通链接的样式:
未访问时的样式:
鼠标经过的样式:鼠标会变成小手
点击鼠标时的样式:
鼠标访问过后的样式:
上面的就是超链接的默认样式。可以通过上面的几个伪类选择器对超链接的这些样式进行修改:
a:link {
color: green;/*未访问的链接颜色为绿色*/
}
a:hover {
font-size: 20px;/*当鼠标移动到a上时字体变大*/
}
a:active {
color: orange;/*鼠标被点击时的样式*/
}
a:visited {
color: crimson;/*点击过后的链接的样式*/
}
结果:
注意:他们的顺序也是不能乱的,顺序依次为link、hover、active、visited。
结构伪类选择器
在CSS3中新增的结构伪类选择器更容易选取元素,具体的选择器如下;
选择器 | 功能描述 | 版本 |
---|---|---|
E:last-child | 选择父元素的倒数第一个子元素E,相当于E:nth-last-child(1) | 3 |
E:nth-child(n) | 选择父元素的第n个子元素,n从1开始计算 | 3 |
E:nth-last-child(n) | 选择父元素的倒数第n个子元素,n从1开始计算 | 3 |
E:first-of-type | 选择父元素下同种标签的第一个元素,相当于E:nth-of-type(1) | 3 |
E:last-of-type | 选择父元素下同种标签的倒数第一个元素,相当于E:nth-last-of-type(1) | 3 |
E:nth-of-type(n) | 与:nth-child(n)作用类似,用作选择使用同种标签的第n个元素 | 3 |
E:nth-last-of-type | 与:nth-last-child作用类似,用作选择同种标签的倒数第一个元素 | 3 |
E:only-child | 选择父元素下仅有的一个子元素,相当于E:first-child:last-child或E:nth-child(1):nth-last-child(1) | 3 |
E:only-of-type | 选择父元素下使用同种标签的唯一子元素,相当于E:first-of-type:last-of-type或E:nth-of-type(1):nth-last-of-type(1) | 3 |
E:empty | 选择空节点,即没有子元素的元素,而且该元素也不包含任何文本节点 | 3 |
E:root | 选择文档的根元素,对于HTML文档,根元素永远HTML | 3 |
【注意】
1、结构伪类选择器很容易遭到误解,需要特别强调。如,p:first-child表示选择父元素下的第一个子元素 p,而不是选择 p 元素的第一个子元素。
2、需要注意的是,结构伪类选择器中,子元素的序号是从 1 开始的,也就是说,第一个子元素的序号是 1,而不是 0。换句话说,当参数 n 的计算结果为 0 时,将不选择任何元素。
3、所有的结果伪类选择器当中都有一个冒号,这个冒号前面的表示选取的元素,冒号后面的是选择元素指定的位置。
:first-child、last-child、:ntc-child(n)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
/*将第一个li元素的字体颜色设置为红色*/
.ul1 li:nth-child(1) { /*等价于ntc-child(1)*/
color: red;
}
/*设置最后一个元素的字体颜色为蓝色*/
.ul1 li:nth-child(5) { /*等价于ntc-child(5)*/
color: blue;
}
/*设置ul中的第3个元素的字体颜色为绿色*/
.ul1 li:nth-child(3) {
color: green;
}
</style>
</head>
<body>
<ul class="ul1">
<li>我是第一个元素</li>
<li>我是第二个元素</li>
<li>我是第三个元素</li>
<li>我是第四个元素</li>
<li>我是第五个元素</li>
</ul>
</body>
</html>
结果:
:first-of-type、last-of-type、nth-of-type:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
/*将第一个li元素的字体颜色设置为红色*/
.ul1 li:first-of-type { /*等价于ntc-child(1)*/
color: red;
}
/*s设置最后一个元素的字体颜色为蓝色*/
.ul1 li:last-of-type { /*等价于ntc-child(5)*/
color: blue;
}
/*设置ul中的第3个元素的字体颜色为绿色*/
.ul1 li:nth-of-type(3) {
color: green;
}
</style>
</head>
<body>
<ul class="ul1">
<li>我是第一个元素</li>
<li>我是第二个元素</li>
<li>我是第三个元素</li>
<li>我是第四个元素</li>
<li>我是第五个元素</li>
</ul>
</body>
</html>
上诉代码同样和上面的结果相同。对于列表来说。使用上述的几个方法都可以。
nth系列的选择器和type系列的选择器的区别:
伪元素选择器
伪元素选择器选择的并不是一个元素,而是元素中的一部分内容。常用的方法如下:
选择器 | 说明 |
---|---|
:first-inline | 设置文本中的第一行 |
:first-letter | 设置文本中的第一个字符 |
:before | 向指定的元素前面添加元素 |
:after | 向指定的元素后面添加元素 |
组合性选择器
选择器可以单独使用,也可以组合起来使用,常见的组合性选择器有以下几种:
派生选择器(上下文选择器)
后代选择器
element1 element2 {......}:后代选择器——选择element1下面的所有element2
【注意】:选择器的作用都是选择元素,为其添加样式。后代选择器有两个单独的或者组合的选择器组成,选择的是前面指定元素的所有子元素,比如
ul li {......}/*选择的是ul元素中的所有li元素*/
div a {......}/*选择div元素中的所有a元素*/
div article ul p {.......}/*选择div中的article中的ul中的所有的p元素*/
/*后代选择器只要是满足条件的,不管是在哪个位置都能选择上*/
可以看一下下面的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
.ul li { /*后代选择器可以选择符合条件的任意子孙元素 元素之间没有间隔*/
color: red;
}
</style>
</head>
<body>
<ul class="ul">
<li>老大</li>
<li>老二</li>
<li>老三</li>
<li>老四</li>
<li>
<ul>
<li>这里是嵌套的li元素,也会变为红色</li>
</ul>
</li>
</ul>
<ul>
<li>这里的文字颜色不需要添加</li>
<li>这里的文字颜色不需要添加</li>
<li>这里的文字颜色不需要添加</li>
<li>这里的文字颜色不需要添加</li>
</ul>
</body>
</html>
结果:
子元素选择器
element1 > element2: 选择element1下面的element2,规定element2为element1的第一级子元素
同样以上面的代码为例,我们将后代改为子元素选择器:
.ul > li
结果:
相邻兄弟选择器
element1 + element2:选择element1旁边的element2元素,规定element1和lement2为相邻兄弟元素 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
.ul + p {
color: blue;
}
</style>
</head>
<body>
<ul class="ul">
<li>老大</li>
<li>老二</li>
<li>老三</li>
<li>老四</li>
</ul>
<p>文本</p>
</body>
</html>
结果:
并集选择器:
element1,elment2......{}:几个元素一起选择。
p,
a,
h4 {
color: red;
}/*选择p、a’h4三个元素*/
当然选择器的组合有很多的,这里主要介绍以上几种。