基本选择器

  1. 通用选择器(匹配所有元素)
* {
    格式:* {}
}
  1. 元素选择器(html元素)
h1 {
    格式:元素名 {}
}
  1. 类选择器(class类名)
.name {
    格式:.类名 {}
}
  1. id选择器(元素id是唯一的)
#ol {
    格式:#id名 {}
}

复合选择器

  1. 交集选择器(两个元素构成,第一个必须是元素选择器,第二个必须是类选择器或者id选择器)
span.content {
    格式:元素.类名 或 元素#id名 {}
}
  1. 并集选择器(两个或者两个以上的任意选择器构成)
h2, p, span {
    格式:选择器1, 选择器2, 选择器3 {}
}
  1. 后代选择器(选择器1的所有子元素)
body .content {
    格式:选择器1 选择器2 选择器3 {}
}
  1. 子元素选择器(选择器1的直接子元素)
body > .content {
    格式:选择器1 > 选择器2 {}
}
  1. 相邻兄弟选择器(匹配紧跟在选择器1元素后的相邻元素,且两个元素拥有共同的父元素)
.content + p {
    格式:选择器1 + 选择器2 {}
}
  1. 通用兄弟选择器(匹配在选择器1元素后的相邻元素,且两个元素拥有共同的父元素)
.content ~ p {
    格式:选择器1 ~ 选择器2 {}
}

伪元素选择器

  • ::first-line选择器(匹配文本块的第一行内容)
::first-line { /*只对块级元素的第一行生效*/
    格式:::first-line {}
}

p::first-line { /*指定对p元素的第一行生效*/
    格式:p::first-line {}
}
  • ::first-letter选择器(匹配文本块的第一个字符)
::first-letter {
    格式:::first-letter {}
}

::first-letter { /*只对div元素的第一个字符生效*/
    格式:div::first-letter {}
}
  • ::before选择器和::after选择器(在元素的最前面或最后面插入内容)
a::before { /*在a元素的开头插入内容*/
    content:插入的内容
}

a::after { /*在a元素的末尾插入内容*/
     content:插入的内容
}
  • ::selection选择器(匹配用户选中的部分文本)
::selection {
    属性:属性值
}

伪类选择器

  • 动态伪类选择器

    1. :link(链接未被访问时)
    2. :visited(链接被访问过时)
    3. :hover(鼠标悬停在链接上方时)
    4. :active(鼠标点下链接的那一刻)
    5. :focus(元素获得焦点时)
    a:link {
        color:pink;
    }
  • UI伪类选择器

    1. :enabled(表单元素可用的样式)
    2. :disabled(表单元素禁用的样式)
    3. :checked(表单元素选项被选中时的样式 0.
    4. :required(表单必选元素的样式)
    5. :optiional(表单可选元素的样式)
    6. :default(表单默认元素的样式)
    :enabled {
        color:red;
    }
    1. :valid(用户输入合法的样式)
    2. :invalid(用户输入不合法的样式)
    input:valid {
        color:green;
    }

属性选择器

input[value] { /* 选择input标签中具有value属性的元素 */
    color:red;
}
input[value="hello"] { /* 选择input标签中value属性值为hello的元素 */
    color:red;
}
input[value^="icon"] { /* 选择input标签中value属性值以icon开头的元素 */
    color:red;
}
input[value$="icon"] { /* 选择input标签中value属性值以icon结尾的元素 */
    color:red;
}
input[value*="icon"] { /* 选择input标签中value属性值包含icon的元素 */
    color:red;
}

结构伪类选择器

ul li:first-child { /* 匹配父元素ul中的第一个子元素li */
    color:red;
}

ul li:last-child { /* 匹配父元素ul中的最后一个子元素li */
    color:red;
}
ul li:nth-child(n) { /* 匹配父元素ul中的第n个子元素li */
    color:red;
}

ul li:nth-child(even) { /* 匹配父元素ul中所有偶数的子元素li */
    color:red;
}

ul li:nth-child(odd) { /* 匹配父元素ul中所有奇数的子元素li */
    color:red;
}
ul li:nth-child(2n) { /* 匹配父元素ul中所有偶数的子元素li */
    color:red;
}

ul li:nth-child(2n+1) { /* 匹配父元素ul中所有奇数的子元素li */
    color:red;
}

ul li:nth-child(5n) { /* 匹配父元素ul中5倍数的子元素li */
    color:red;
}

ul li:nth-child(n+5) { /* 匹配父元素ul中从第5个以后的子元素li */
    color:red;
}

ul li:nth-child(-n+5) { /* 匹配父元素ul中前5个子元素li */
    color:red;
}

区别:

1.nth-child 对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子,然后看看是否和选择的元素匹配

2.nth-of-type 对父元素里面指定的子元素进行排序选择。先去匹配子元素,然后再根据子元素找第n个孩子

ul li:first-of-type { /* 指定类型li的第一个 */
    color:red;
}

ul li:last-of-type { /* 指定类型li的最后一个 */
    color:red;
}

ul li:nth-of-type { /* 指定类型li的第n个 */
    color:red;
}

待更新......

最后修改:2021 年 03 月 19 日 02 : 12 PM
如果觉得我的文章对你有用,请随意赞赏