css选择器

2020/03/23 前端 css

简介

css 根据选择器决定样式规则应用于哪些元素

选择器大概可根据以下标准来选择所要格式化的元素:

1.元素的类型或名称

2.元素的类或ID

3.元素所在的上下文

4.元素的属性和值

5.元素的伪类或伪元素

根据元素类型、名称

h1 {
    color: red; 
}

这个样式应用于h1 元素,使其颜色为红色.

元素组

h1,
h2 {
    color: red;
}

选择h1和h2元素，使其颜色为红色。

根据元素的类或ID

按类选择元素 .

.phone {
    border: 1px solid #FF0000
}

这个选择器会选择class 为phone 的元素,使其拥有一个红色的边框.

按ID选择元素:

#iphonex {
    color: white;
}

选中ID为iphonex 的元素,使其颜色为白色.

根据上下文

后代选择器: 空格

.phone .iphone {
    background-color: red;
}

选择祖先为phone 类的iphone 类元素

注意：不管为第几代,只要祖先是phone 类的iphone 类元素都会被选中。

同胞元素: ~

h1 ~ h2 {
    color: red;
}

选择同一父元素下h1的同胞元素h2,不相邻也会选到

相邻同胞元素: +

<div class="phone">
    <div class="xiaomi">
    ...
    div>

    <div class="pixel">
    ...
    div>
    
    <div class="iphone">
    ...
    div>

    <div class="pixel">
    ...
    div>
div>

.phone .iphone+pixel {
    backgroud-color: blue;
}

选择iphone 类的之后的相邻pixel 类元素，其中iphone 类元素和pixel 类元素都是phone 类的子元素。

注意：只会选择和.iphone 相邻的.pixel 元素，并且只会选择.iphone 之后的元素，不会选择.iphone 之前的元素。

子代元素: >

<div class="phone">
    <div class="pixel">
    ...
    div>
    
    <div class="iphone">
        <img class="iphone" src="...">
    div>
div>

.phone > iphone {
    border: 1px solid red;
}

选择phone 类元素的子元素iphone 类元素。

注意：只会选择phone 类元素的子元素，不会选择其子子元素、子子子元素…

根据元素的属性和值

属性：[attr]

a[href] {
    ...
}

选择有href 属性的a元素

属性和值：[attr=”value”]

a[href="https://www.baidu.com"] {
    ...
}

选择地址指向百度的a元素

其他

选择器	属性值
[href*=”baidu”]	href含baidu的元素
[src$=”.png”]	scr含.png的元素
[href^=”https://“]	href的值开头为https://的元素
[lang\|=”es”]	lang的值开头为es-的元素
[class~=”phone”]	class的值以空格分隔的多个单词，phone是其中的一个

伪类和伪元素

a元素的伪类

a:link {
    color: red;
}
/* 链接未被访问时的颜色 */

a:visited {
    color: blue;
}
/* 链接已访问过时的颜色 */

a:focus {
    color: purple;
}
/* 链接获得焦点时的颜色 */

a:hover {
    color: greed;
}
/* 鼠标停留在链接时的颜色 */

a:active {
    color: orange;
}
/* 激活链接时的颜色 */

根据伪类选择第一个或最后一个元素

li:first-child {
    color: red;
}
/* 选择第一个li元素 */

li:last-child {
    color: blue;
}
/* 选择最后一个li元素 */

根据伪元素选择第一个字母或第一行

p::first-letter {
    color: red;
    font-size: 1.5em;
}
/* 选择p元素的第一个字母 */

p::first-line {
    color: blue;
}
/* 选择p元素的第一行 */

这是我自学css时做的笔记

打赏

支付宝

微信

本文作者：feedoom

永久链接：http://feedoom.github.io/2020/03/23/cssSelector/