元素选择器
element { style properties }
例子:
span {
background-color: skyblue;
}
ID选择器
#id_value { style properties }
例子:
#identified {
background-color: skyblue;
}
ID不可以重复 只可以使用一次
class选择器
与id类似,但是***class可以重复***
.class_name { style properties }
例子:
.red {
color: #f33;
}
.yellow-bg {
background: #ffa;
}
.fancy {
font-weight: bold;
text-shadow: 4px 4px 3px #77f;
}
通配选择器
选择所有元素
* { style properties }
复合选择器
交集选择器
作用:同时符合多个条件的元素
语法:选择器1选择器2选择器3{ }
注意:
如果有元素选择器,元素必须写在前面
eg:
div.red{
}
...
<div class="red">hell</div>
.a.b.c
<div class="a b c">hell</div>
并集选择器(选择器分组)
作用:同时选择多个选择器对应的元素
语法:选择器1,选择器2,选择器3{ }
.red,h1,spen,div,#green{
}
关系选择器
父元素 - 直接包含(一层)
子元素 - 直接被包含(一层)
祖先元素 - 直接或间接包含(多层)
后代元素 - 直接或间接被包含(多层)
兄弟元素 - 拥有相同父元素是兄弟元素
子元素选择器
语法: 父元素 > 子元素
selector1 > selector2 { style properties }
div.box > span{
}
div.box > span > p{
}
后代选择器
语法:祖先 后代
selector1 selector2 {
/* property declarations */
}
div span{
}
兄弟选择器
语法:前一个 + 下一个(选择紧挨着的下一个,如果中间隔着其他的元素则不起作用)
p + span{
}
语法: 兄 ~ 弟(选择下面所有兄弟元素,不会选择前面的)
p ~ span{
}
属性选择器
[属性名] 选择包含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性名的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值中含有某值的元素
/* Internal links, beginning with "#" */
a[href^="#"] {
background-color: gold;
}
/* Links with "example" anywhere in the URL */
a[href*="example"] {
background-color: silver;
}
伪类选择器
伪类 :不存在的类,特殊的类,用来描述一个元素的特殊状态
例子:
第一个子元素、被点击的元素、鼠标移入的元素
伪类一般情况下都是用 :
开头
:first-child
第一个子元素
:last-child
最后一个子元素
:nth-child()
选择第n个子元素
特殊值:
n - 选择0到正无穷的所有元素
2n - 选择偶数位的元素
2n+1 - 选择奇数位的元素
odd - 选择奇数位的元素
以上所有伪类都是根据所有的子元素排序,包括其中的div,span等等也算进去
ul > li:first-child{
//在ul的所有子元素中,选中为li的第一个子元素
}
ul > li:last-child{
//在ul的所有子元素中,选中为li的最后一个子元素
}
ul > li:nth-child(n){
}
以下伪类是根据其前面的元素排序
:first-of-type
在所有为xx的子元素中,选中为xx的第一个子元素
:last-of-type
在所有为xx的子元素中,选中为xx的第一个子元素
:nth-of-type( )
:not( )
将符合条件的元素从选择器中去除(除了为xxx的子元素,其他都设置此样式)
ul > li:not(:nth-child(3)){//除了第三个为li的子元素,其他都设置此样式
}
获取焦点
:focus
获取焦点,常用于input表单中。
input:focus {
color: red;
}
原理:是给input标签添加一个outline。如果想自定义outline可以使用
outline:none;
或者直接覆盖。
超链接的伪类选择器
:link
用来表示没有访问过的链接(正常的链接,即访问没访问过都属于正常链接)
a:link{
color:red;
font-side:50px; /* 此设置会让访问或没访问过的链接同时变大 */
}
:visited
用来表示访问过的链接
注意: 由于隐私的原因,visited只可以修改颜色
a:visited{
color:red;
}
:hover
用来表示鼠标移入的状态(除了超链接,其他也可以用)
a:hover{
color:green;
font-side:50px;
}
:active
用来表示鼠标点击(除了超链接,其他也可以用)
a:active{
color:blue;
}
伪元素选择器
伪元素 - 表示页面中一些特殊的并不真实存在的元素(特殊位置)
伪元素使用 :: 开头
::first-letter
表示第一个字母
::first-line
表示第一行
::selection
表示选中的内容(鼠标选中)
::before
元素的开始
::after
元素的结束
::marker
选中一个list item的marker box,后者通常含有一个项目符号或者数字。例如选择
- 等
注意:before 和 after必须结合
content
属性来使用eg:
P::first-letter{ font-side:100px; } P::first-line{ background-color:yellow; } P::selection{ background-color:green; }
P::before{ content:'hello'; color:red; } P::after{ content:'byebye'; color:green; } ... <p>事例</p>