CSS3--CSS3选择器

基本选择器

  • 通配符选择器 *
  • 元素选择器 elementName
  • 类选择器 .className
  • ID选择器 #id
  • 后代选择器 ul li

新增基本选择器

子元素选择器

概念 : 只能选择元素的子元素

语法 : 父元素 > 子元素 (Father > Children)

兼容性 : IE8+

1
.header > .item { color : #fff; }

相邻兄弟元素选择器

概念 : 可以选择紧接在元素的元素(匹配单个元素),而且他们具有同一父元素

语法 : 元素 + 兄弟相邻元素 (Element + Sibling)

兼容性 : IE8+

注意 : 必须是之后紧邻,且只操作Sibling,不操作Element

1
.header > .item + .box { color : #fff; }

通用兄弟选择器

概念 : 选择元素所有兄弟元素,而且他们具有同一父元素

语法 : 元素 ~ 兄弟相邻元素 (Element ~ Siblings)

兼容性 : IE8+

注意 : 必须是之后,且只操作Siblings,不操作Element

1
.header > .item ~ .box { color : #fff; }

群组选择器

概念 : 具有相同样式的元素分组在一起,每个选择器之间使用逗号,隔开

语法 : 元素1,元素2,元素3, (Element1,Element2,Element3)

兼容性 : IE6+

注意 : 必须是之后,且只操作Siblings,不操作Element

1
.header, .item, .box { color : #fff; }

属性选择器

概念 : 对带有指定属性的HTML元素设置样式

Element[arrtibute]

概念 : 对带有attribute属性的Element元素设置样式

兼容性 : IE8+

1
a[target] { color : #fff; }

Element[arrtibute=”value”]

概念 :attribute属性值为valueElement元素设置样式

兼容性 : IE8+

1
a[target="_blank"] { color : #fff; }

Element[arrtibute~=”value”]

概念 :attribute属性值包含单词valueElement元素设置样式

兼容性 : IE8+

注意 : value必须是单词,而不是单词的一部分

1
div[class~="box"] { color : #fff; }

Element[arrtibute^=”value”]

概念 :attribute属性值以value开头Element元素设置样式

兼容性 : IE8+

注意 : value可以是单词的一部分

1
div[class^="box"] { color : #fff; }

Element[arrtibute$=”value”]

概念 :attribute属性值以value结尾Element元素设置样式

兼容性 : IE8+

注意 : value可以是单词的一部分

1
div[class$="box"] { color : #fff; }

Element[arrtibute*=”value”]

概念 :attribute属性值包含valueElement元素设置样式

兼容性 : IE8+

注意 : value可以是单词的一部分

1
div[class*="box"] { color : #fff; }

Element[arrtibute|=”value”]

概念 :attribute属性值为value或者以value-开头Element元素设置样式

兼容性 : IE8+

1
div[class|="box"] { color : #fff; }

伪类选择器

动态伪类

这些伪类并不存在于HTML中,只有当用户和网站交互的时候才能体现出来

锚点伪类

  • :link
  • :visited

用户行为伪类

  • :hover
  • :active
  • :focus
1
2
3
4
5
a:link{color: #000;}
a:hover{color: #000;}
a:active{color: #000;}
a:visited{color: #000;}
input:focus{border: 1px solid #ccc;}

UI元素状态伪类

  • :enabled

    兼容性 : IE9+

  • :disabled

    兼容性 : IE9+

  • :checked

    兼容性 : 只有Opera兼容

1
2
input:enabled{height: 30px;}
input:disabled{height: 40px;}

CSS3结构类

CSS3的:nth选择器

  • Element: first-child

    概念 :选择属于其父元素的首个子元素,类型必须是Element,并为其设置样式

    兼容性 :IE8+

    注意 : 必须是其父元素的首个子元素,且类型与Element相同

    1
    2
    p:first-child{color:#000;}
    div>p:first-child{color:#000;}
  • Element: last-child

    概念 :选择属于其父元素的最后一个子元素,类型必须是Element,并为其设置样式

    兼容性 :IE8+

    注意 : 必须是其父元素的最后一个子元素,且类型与Element相同

    1
    2
    p:last-child{color:#000;}
    div>p:last-child{color:#000;}
  • Element: nth-child(N)

    概念 :选择属于其父元素的第N个子元素,类型必须是Element,并为其设置样式

    兼容性 :IE9+, Firefox4+

    注意 : 类型必须是Element

    关于参数(N)

    • :nth-child(n)n代表从0开始计算,只能用n表示
    • :nth-child(2n+1) : 第1,3,5,7…个
    • :nth-child(odd) : 第奇数个
    • :nth-child(even) : 第偶数个
    1
    2
    3
    4
    5
    p:nth-child(3){color:#000;}
    p:nth-child(n){color:#000;}
    p:nth-child(2n+1){color:#000;}
    p:nth-child(odd){color:#000;}
    p:nth-child(even){color:#000;}
  • Element: nth-last-child(N)

    概念 :选择属于其父元素的第N个子元素,从最后一个子元素开始计数,类型必须是Element,并为其设置样式

    注意 : 从最后一个子元素开始计数

  • Element: only-child

    概念 :选择属于其父元素的唯一子元素,类型必须是Element,并为其设置样式

    兼容性 :IE9+, Firefox4+

    注意 : 父元素只有一个子元素

  • Element: first-of-type

    概念 :选择属于其父元素的首个特定类型子元素,类型必须是Element,并为其设置样式

    兼容性 :IE9+

    1
    2
    p:first-of-type{color:#000;}
    div>p:first-of-type{color:#000;}
  • Element: last-of-type

    概念 :选择属于其父元素的最后一个特定类型子元素,类型必须是Element,并为其设置样式

    兼容性 :IE9+

    1
    2
    p:last-of-type{color:#000;}
    div>p:last-of-type{color:#000;}
  • Element: nth-of-type(N)

    概念 :选择属于其父元素的特定类型子元素第N个,并为其设置样式

    兼容性 :IE9+, Firefox4+

    注意 : 类型必须与Element相同

    1
    2
    3
    4
    5
    p:nth-of-type(3){color:#000;}
    p:nth-of-type(n){color:#000;}
    p:nth-of-type(2n+1){color:#000;}
    p:nth-of-type(odd){color:#000;}
    p:nth-of-type(even){color:#000;}
  • Element: nth-last-of-type

    概念 :选择属于其父元素的特定类型子元素第N个,从最后一个子元素开始计数,类型必须是Element,并为其设置样式

    注意 : 从最后一个子元素开始计数

  • Element: only-of-type

    概念 :选择属于其父元素的唯一特定类型子元素,并为其设置样式

    兼容性 :IE9+

    注意 : 父元素只有一个特定类型的子元素

  • Element: empty

    概念 :选择没有子元素(包括文本节点)的Element元素,并为其设置样式

    兼容性 :IE9+

    注意 : 没有子元素,也没有文本节点的空元素,类型必须是Element

否定选择器(:not)

:not(Element/Selector) : 选择器匹配非指定元素/选择器的每个元素

语法格式 : 父元素:not(子元素/子选择器) Father:not(Element/Selector)

兼容性 : IE9+

1
a:not(:last-of-type){ border: 1px solid #ccc; }

伪元素

CSS伪元素用于向某些选择器设置特殊效果

兼容 : IE9+

选择器书写用一个冒号:和两个冒号:都可以

伪元素与伪类的区别

伪元素相当于在HTML中新增加了一个找不到的元素

伪类是一种选择器,选择到的是存在的元素

  • Element::first-line

    概念 :Element元素的第一行文本进行样式设置

    注意 : first-line伪元素只能用于块级元素

    1
    div::first-line{ font-weight: bold;}
  • Element::first-letter

    概念 :Element元素的首字母进行样式设置

    注意 : first-letter伪元素只能用于块级元素

  • Element::before

    概念 :Element元素的内容前面插入新内容

    Element元素的第一个子元素

    行内元素

    内容通过content写入

    支持一切CSS样式

    标签中找不到对应的标签

  • Element::after

    概念 :Element元素的内容后面插入新内容,常用于清除浮动

    Element元素的最后一个子元素

    1
    2
    3
    4
    5
    6
    7
    .clearfix:after{
    content:"";
    display:block;
    height:0;
    visibility:hidden;
    clear:both;
    }
  • Element::selection

    概念 : 用于设置在浏览器中选中文本后的背景色与前景色

    兼容性 :IE9+, 在Firefox中需要加上其前缀-moz

    1
    2
    3
    4
    .box:selection{
    background: #abcdef;
    color: #fff;
    }

CSS权重

当很多的规则被应用到某一个元素上时,权重是决定那种规则生效,或者优先级的过程

权重等级与权值

  • 行内样式 : 1000
  • ID选择器 : 100
  • 类选择器、属性选择器、伪类选择器 : 10
  • 元素选择器、伪元素 : 1
  • 通配符* : 1000

权重计算

从0开始,一个行内样式+1000, 一个ID+100, 一个属性选择器、class或伪类+10, 一个元素或者伪元素+1

包含更高权重选择器的一条规则拥有更高的权重

无论多少个元素组成的选择器,都没有一个class选择器的权重高

文章目录
  1. 1. 基本选择器
  2. 2. 新增基本选择器
    1. 2.1. 子元素选择器
    2. 2.2. 相邻兄弟元素选择器
    3. 2.3. 通用兄弟选择器
    4. 2.4. 群组选择器
  3. 3. 属性选择器
    1. 3.1. Element[arrtibute]
    2. 3.2. Element[arrtibute=”value”]
    3. 3.3. Element[arrtibute~=”value”]
    4. 3.4. Element[arrtibute^=”value”]
    5. 3.5. Element[arrtibute$=”value”]
    6. 3.6. Element[arrtibute*=”value”]
    7. 3.7. Element[arrtibute|=”value”]
  4. 4. 伪类选择器
    1. 4.1. 动态伪类
    2. 4.2. UI元素状态伪类
    3. 4.3. CSS3结构类
    4. 4.4. 否定选择器(:not)
    5. 4.5. 伪元素
  5. 5. CSS权重
|