CSS选择器

最新推荐文章于 2024-07-21 19:13:42 发布

itzhuzhu.

最新推荐文章于 2024-07-21 19:13:42 发布

阅读量147

点赞数

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_45477086/article/details/132843148

版权

前端专栏收录该内容

18 篇文章 1 订阅

订阅专栏

基本选择器

通配选择器

可以选中所有的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选择器 > 类选择器 > 元素选择器 > 通配选择器 > 继承的样式

itzhuzhu.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS选择器

可以选中所有的HTML元素，清除样式时可以使用元素选择器为元素统一设置样式，故无法实现类选择器根据元素的值选中元素添加样式一个标签只能有一个class，但class可以有多值，使用空格隔开ID选择器根据元素的值，精准的为某个元素添加样式规范：复合选择器交集选择器用于选中同时符合多个条件的元素注意：有元素时，元素必须写在前面id选择器、通配选择器，理论上可以作为交集的条件，但实际应用中几乎不用（没有意义）交集选择器中不能出现两个元素选择器，因为一个元素不可能即是p元素又是span元素用的
复制链接

扫一扫