CSS选择器 - 悦读

基本选择器

通配选择器

可以选中所有的HTML元素，清除样式时可以使用

* {
    color: orange;
    font-size: 40px;
}

元素选择器

为元素统一设置样式，故无法实现差异化设置

/* 为所有h1元素添加样式 */
h1 {
    color: red;
    font-size: 60px;
}

/* 为所有p元素添加样式 */
p {
    color: red;
    font-size: 60px;
}

类选择器

根据元素的class值选中元素添加样式

一个标签只能有一个class，但class可以有多值，使用空格隔开

.inner {
    background-color: red;
    font-size: 20px;
}

/* 后来者居上原则，neibu的样式会优先于inner*/
.neibu {
    background-color: blue;
    font-size: 20px;
}

/* class的值可以有多个值 */
<div class="inner neibu">学习CSS</div>

ID选择器

根据元素的id值，精准的为某个元素添加样式

规范：

id属性值：由字母、数字、下划线_、短杠-组成，最好以字母开头、不要包含空格、区分大小写
一个元素只能拥有一个id属性，可以同时拥有id和class属性，且多个元素的id属性值不能相同

#top-div-inner {
    color: red;
    font-size: 60px;
}

<div id="top-div-inner" class="inner">学习CSS</div>

复合选择器

交集选择器

交集有并且的含义（通俗理解：即...又...的意思）

用于选中同时符合多个条件的元素

/* 选中类名为outer的div元素 div元素名必须放在前面，*/
div.outer {
    background-color: red;
    width: 300px;
    height: 300px;
}

/* 选中包含inner和interior的元素 */
.inner.interior {
    background-color: black;
    width: 200px;
    height: 200px;
}

<div class="outer">
    <div class="inner interior"></div>
</div>

注意：

有元素时，元素必须写在前面
id选择器、通配选择器，理论上可以作为交集的条件，但实际应用中几乎不用（没有意义）
交集选择器中不能出现两个元素选择器，因为一个元素不可能即是p元素又是span元素
用的最多的交集选择器是：元素选择器配合类名选择器，例如：p.beauty

并集选择器

用于选中多个选择器对应的元素，又称分组选择器，并集就是或的意思，多个选择器通过,连接

.outer, .inner {}

/* 也可以竖着写 */
#outer2, 
.inner2 {
  
}
   
<div class="outer">
    <div class="inner"></div>
</div>

<div id="outer2">
    <div class="inner2"></div>
</div>

元素关系

父、子元素

直接包裹某个元素的元素，就是该元素的父元素，被父元素直接包含的元素称为子元素

<div>
    <!-- h1和ul是div的子元素 -->
    <h1>h1</h1>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

祖先、后代元素

父元素也算是祖先元素的一种

<div>
    <h1>h1</h1>
    <ul>
        <!-- li的祖先元素是ul和div -->
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

兄弟元素

具有相同父元素的元素，互为兄弟元素

<div>
    <!-- h1和ul是兄弟元素 -->
    <h1>h1</h1>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

后代选择器

选择器之间用空格隔开

    <style>
        /* 选中ul中的所有li */
        ul li {
            color: red;
        }

        /* 选中ul中所有li中的a元素 */
        ul li a {
            color: orange;
        }

        /* 选中类名为ul元素中的所有li */
        .ul li {
            color: blue;
        }

        /* 选中类名为ul元素中的类名为demo的li */
        .ul li.demo {
            color: red;
        }
    </style>

<div>
    <ul>
        <li>广州</li>
        <!-- ul是li的祖先元素，只要在里面就算 -->
        <li>天河区</li>
        <li>深圳</li>
        <li>佛山</li>
    </ul>
</div>

子选择器

选择器之间使用>隔开

    <style>
        /* div中的子代span元素 */
        div > span {
            color: red;
        }

         /* 类名为ul的元素中的子li元素 */
        .ul > li {
            color: black;
        }
    </style>

<div>
    <span>广东省</span>
    <ul class="ul">
        <li>广州</li>
        <!-- ul是li的祖先元素，只要在里面就算 -->
        <li>天河区</li>
        <li>深圳</li>
        <li>佛山</li>
    </ul>
</div>

兄弟选择器

相邻兄弟选择器

相邻兄弟元素（紧挨着的下一个元素），兄弟选择器选择的是向下的兄弟级，不向上查找，使用+分割

    <!-- 选中h1下一个p元素 -->
    <style>
        h1 + p {
            color: red;
        }
    </style>

<div>
    <p>0</p>
    <h1>1</h1>
    <!-- 选中的是2 -->
    <p>2</p>
    <p>3</p>
</div>

通用兄弟选择器

符合条件的所有兄弟元素，通过~分割

    <!-- 选中h1后的所有的兄弟p元素 -->
    <style>
        h1 ~ p {
            color: red;
        }
    </style>

<div>
    <p>0</p>
    <h1>1</h1>
    <!-- 选中的是2、3 -->
    <p>2</p>
    <p>3</p>
</div>

属性选择器

选中属性值符合一定要求的元素

语法：

语法	含义
`[属性名]`	选中具有某个属性的元素
`[属性名="值"]`	选中包含某个属性，且属性值等于指定值的元素
`[属性名^="值"]`	选中包含某个属性，且属性值以指定的值`开头`的元素
`[属性名$="值"]`	选中包含某个属性，且属性值以指定的值`结尾`的元素
`[属性名*=“值”]`	选择包含某个属性，属性值包含指定值的元素

    <style>
        [title] {
            color: red;
        }

        [title = "itzhuzhu0"] {
            color: black;
        }

        [title ^= "itzhu"] {
            color: chartreuse;
        }

        [title $= "2"] {
            color: orange;
        }

        [title *= "zhuzhu"] {
            color: blue;
        }
    </style>

<div title="itzhuzhu0">0</div>
<div title="itzhuzhu1">1</div>
<div title="itzhuzhu2">2</div>

伪类选择器

是元素的一种特殊状态，伪：假的，伪类：像类，但不是类

动态伪类

顺序不能乱，在css里的规则是后来者居上，通过:分割

元素	含义
`link`	超链接`未被访问`的状态
`visited`	超链接`访问过`的状态
`hover`	鼠标`悬停`在元素上的状态
`active`	元素`激活`（按下鼠标不松开）的状态
`focus`	获取`焦点`的元素（表单类的元素才能使用）

    <style>
        a:link {
            color: darkgreen;
        }

        a:visited{
            color: red;
        }

        a:hover{
            color: silver;
        }

        a:active {
            color: blue;
        }

        input:focus {
            color: darkgreen;
        }
    </style>

<a href="https://www.baidu.com">去百度</a>
<a href="https://www.jd.com">去京东</a>
<input type="text">

结构伪类

语法	含义
`:first-child`	所有兄弟元素中的`第一个`
`:last-child`	所有兄弟元素中的`最后一个`
`:nth-child(n)`	所有兄弟元素中的第`n`个
`:first-of-type`	所有同类型兄弟元素中的`第一个`
`:last-of-type`	所有同类型兄弟元素中的`最后一个`
`:nth-of-type(n)`	所有同类型兄弟元素中的第`n`个
`:nth-last-child(n)`	所有兄弟元素中的倒数第`n`个
`:nth-last-of-type(n)`	所有同类型兄弟元素中的倒数第`n`个
`:only-child`	选择没有兄弟的元素（独生子女）
`:only-of-type`	选择没有同类型兄弟的元素
`:root`	根元素（html标签）
`:empty`	内容为空元素（空格也算内容）

n的值：

值	含义
0/不写	什么都选不中
1~正无穷的整数	选中对应序号的子元素
2n或even	选中序号为偶数的子元素
2n+1或odd	选中序号为奇数的子元素
-n+3	选中的是前 3 个
3n+4（公式写法）	结果为：3*0+4=4

    <style>
        p:first-child {
            color: red;
        }

        p:last-child {
            color: red;
        }

        /* 不包含span，上面两个也是*/
        p:nth-child(2) {
            color: red;
        }
        
        span:first-of-type {
            color: red;
        }

        p:last-of-type {
            color: red;
        }

        p:nth-of-type(2) {
            color: red;
        }

        p:nth-last-child(2) {
            color: blue;
        }

        p:nth-last-of-type(2) {
            color: blue;
        }

        a:only-child {
            color: blue;
        }

        a:only-of-type {
            color: red;
        }

        /* 根元素就是html标签 */
        :root {
            background-color: red;
        }

        :empty {
            width: 10px;
            height: 10px;
            background-color: red;
        }
    </style>

<div>
    <!-- 所有的兄弟元素第一个/最后一个是span，所以谁都选不中 -->
    <span>0</span>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <span>4
        <a>a</a>
    </span>
    <div></div>
</div>

否定伪类

not（选择器）排除满足括号中条件的元素

    <style>
        /* 排除div中的p元素，且类名为last的元素 */
        div > p:not(.last) {
            color: red;
        }

        div > p:not(:last-child) {
            color: red;
        }
    </style>

<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p class="last">4</p>
</div>

UI伪类

checked：被选中的复选框或单选按钮
enable：可用的表单元素（没有 disabled 属性）
disabled：不可用的表单元素（有 disabled 属性）

    <style>
        /* checked、radio无法设置背景色 */
        input:checked {
            width: 100px;
            height: 100px;
        }

        input:enabled {
            background-color: blue;
        }

        input:disabled {
            background-color: red;
        }
    </style>

<input type="checkbox">
<input type="radio" name="gender">
<input type="radio" name="gender">
<input type="text">
<input type="text" disabled>

目标伪类

target：选中锚点指向的元素

    <style>
        div {
            background-color: red;
            height: 200px;
        }

        div:target {
            background-color: blue;
        }
    
    </style>

<a href="#one">one</a>
<a href="#two">two</a>
<a href="#three">three</a>

<div id="one">第1个</div>
<div id="two">第2个</div>
<div id="three">第3个</div>

语言伪类

:lang()：根据指定的语言选择元素（本质是看 lang 属性的值）

<!DOCTYPE html>
<!-- 这里还有设置lang -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div:lang(en) {
            color: red;
        }

        div:lang(zh-CN) {
            color: blue;
        }

    </style>
</head>
<body>

<!-- 通过div中的lang="zh-CN"确定的 -->
<div lang="zh-CN">itzhuzhu你好啊</div>
<div>itzhuzhu你好啊</div>
</body>
</html>

伪元素选择器

选中元素中的一些特殊位置，通过::，冒号前后不能空格

常用伪元素：

元素	含义
`first-letter`	选中元素中的`第一个`文字
`first-line`	选中元素中的`第一行`文字
`selection`	选中被鼠标选中的内容
`placeholder`	选中输入框的提示文字
`before`	在元素`最开始`的位置，创建一个子元素（必须用`content`属性指定内容）
`after`	在元素`最后`的位置，创建一个子元素（必须用`content`属性指定内容）

    <style>
        p::first-letter {
            font-size: 20px;
        }

        p::first-line {
            background-color: red;
        }

        p::selection {
            background-color: orange;
        }

        input::placeholder {
            color: blue;
        }

        p::before {
            content: "￥";
        }

        p::after {
            content: ".00元";
        }
    </style>
</head>
<body>

<p>199</p>
<input type="text" placeholder="请输入用户名">

选择器优先级

通过不同的选择器，选中相同的元素，并且为相同的样式名设置不同的值时，就发生了样式的冲突。

行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器

注意：并集选择器的每一个部分是分开计算权重的

计算选择器权重格式： (a,b,c)

a：ID选择器的个数
b：类、伪类、属性选择器的个数
c：元素、伪元素选择器的个数

鼠标放在选择器上就能快速查看权重，并集选择器可以放在每一个元素上查看权重

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

**比较：**按照从左到右的顺序，依次比较大小，当前位胜出后，后面的不再对比，例如：

(1,0,0) > (0,2,2)
(1,1,0) > (1,0,3)
(1,1,3) > (1,1,2)

特殊规则：

行内样式权重大于所有选择器
!important的权重，大于行内样式，权重最高

    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        #box {
            width: 100px;
            height: 100px;
            background-color: blue;
        !important
        }
    
    </style>

<div id="box"></div>

CSS三大特性

层叠性

如果发生了样式冲突，那就会根据选择器优先级进行样式的层叠（覆盖），如果权重相同，就比较书写顺序

什么是样式冲突？

元素的同一个样式名，被设置了不同的值，这就是冲突

 #box {
     width: 100px;
     height: 100px;
     background-color: red;
 }

 #box {
     width: 100px;
     height: 100px;
     background-color: blue;
 !important
 }

继承性

元素会自动拥有其父元素、或祖先元素上所设置的某些样式（参照MDN网站，可查询属性是否可被继承）

继承规则：就近继承（先去父元素找，再去爷爷元素找…）

    <style>
        div {
            color: red;
        }

        p {
            color: blue;
        }
    </style>

<div>
    <span>1</span>
    <p>
        <!-- 这个span的父元素有属性就继承父元素的，否则就继承爷爷元素 -->
        <span>2</span>
    </p>
</div>

优先级

!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器 > 继承的样式