AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

《图解CSS》选择器

2022-05-11 108
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 在CSS简介一节中，我们了解到，CSS的语法如下：```HTML选择器 { 属性1：属性值； 属性2：属性值}```

在CSS简介一节中，我们了解到，CSS的语法如下：

选择器 { 属性1：属性值； 属性2：属性值}

那么有哪些选择器可以使用呢？

  • 上下文选择符：基于祖先或同胞元素选择一个元素
  • ID和类选择符：基于id和class属性的值选择元素
  • 属性选择符：基于属性的有无和特征选择元素

上下文选择符

基于祖先

语法

祖先标签 子标签 {声明}

或

祖先标签 ... 父标签 子标签 {声明}

这里的祖先标签可以是子标签的父标签，也可以是子标签的任何一个上级标签。
示例：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        article h3 { color: red; }
        article section p {color: blue;}
    </style>
</head>
<body>
    <article>
        <header>
            <h3>Header</h3>
        </header>
        <section>
            <p>文章段落</p>
        </section>
        <footer>
            <span>
                Footer
            </span>
        </footer>
    </article>
</body>

基于祖先选择

子选择符>

语法：

父标签>子标签

此时父标签必须包裹着子标签，也就是子标签的父元素只能是父标签。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        article>h3 { color: red; }
        article>section>p {color: blue;}
    </style>
</head>
<body>
    <article>
        <header>
            <h3>Header</h3>
        </header>
        <section>
            <p>文章段落</p>
        </section>
        <footer>
            <span>
                Footer
            </span>
        </footer>
    </article>
</body>
</html>

子选择符

该示例只是在基于父标签选择符的示例上加了子选择符，跨级选择的header中的还h3就不起作用了。

紧邻同胞选择符+

语法：

标签1 + 标签2

标签2必须紧跟在其同胞标签1的后面。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        header+section { color: red; }  /*起作用*/
        header+footer {color: blue;} /*不起作用*/
    </style>
</head>
<body>
    <article>
        <header>
            <h3>Header</h3>
        </header>
        <section>
            <p>文章段落</p>
        </section>
        <footer>
            <span>
                Footer
            </span>
        </footer>
    </article>
</body>
</html>

紧邻同胞选择符

一般同胞选择符~

语法：

标签1~标签2

标签2必须跟（不一定紧跟）在其同胞标签1后面。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        header~section { color: red; }  /*起作用*/
        header~footer {color: blue;} /*起作用*/
    </style>
</head>
<body>
    <article>
        <header>
            <h3>Header</h3>
        </header>
        <section>
            <p>文章段落</p>
        </section>
        <footer>
            <span>
                Footer
            </span>
        </footer>
    </article>
</body>
</html>

一般同胞选择符

通用选择符*

*是一个通配符，匹配任何元素
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * { color: red; }
        footer * {color: blue;} /* 覆盖上面的样式*/
    </style>
</head>
<body>
    <article>
        <header>
            <h3>Header</h3>
        </header>
        <section>
            <p>文章段落</p>
        </section>
        <footer>
            <span>
                Footer
            </span>
        </footer>
    </article>
</body>
</html>

通配符

ID和类选择符

ID和类为我们选择元素提供了另一套手段，利用它们可以不用考虑文档的层次结构。只要在HTML标记中为元素添加了id和class属性，就可以在CSS选择符中使用ID和类名，直接选中文档中特定的区域。

注意
id和clss不能以数字或特殊符号开头。id具有唯一性，一篇HTML文档不能具有相同命名的id。

class属性

常规 语法：

.类名{声明}

标签带类选择符，语法：

标签.类名{声明}

多类选择符，语法：

.类名1 .类名2{声明}

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .header{color: red;}  /*常规*/
        div.footer{ color: blue;} /*标签带类选择符*/
        .body.content{color:darkred}  /*多类选择符*/
    </style>
</head>
<body>
    <div class="article">
        <div class="header">文本头部</div>
        <div class="body content">文本内容</div>
        <div class="footer">文本尾部</div>
    </div>
</body>
</html>

class选择符

id属性

id与class类似，id选择符使用“#”选择。
常规 语法：

#id{声明}

标签带id选择符，语法：

标签#id{声明}

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #header{color: red;}  /*常规*/
        div#body{ color: blue;} /*标签带类选择符*/
    </style>
</head>
<body>
    <div id="article">
        <div id="header">文本头部</div>
        <div id="body">文本内容</div>
        <div id="footer">文本尾部</div>
    </div>
</body>
</html>

id选择符

从上面的示例中可以看出，class和id还是有很多相似的地方，那么该如何选择呢？

id 还是 class？

个人观点：能不用就都不用，使用上下文选择符。如果为了调整样式使用class，为了操作数据，配合JavaScript使用id。

属性选择符

语法：

标签名[属性名]

或

标签名[属性名="属性值"]

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div[title] {color: red;}
        div[title="footer"] {color: blue;} /*覆盖上面的样式*/
    </style>
</head>
<body>
    <div title="header">header</div>
    <div title="body">body</div>
    <div title="footer">footer</div>
</body>
</html>

属性选择符

伪类

伪类这个叫法源自它们与类相似，但实际上并没有类会附加到标记中的标签上。伪类分两种，UI伪类和结构化伪类。

  • UI（User Interfact,用户界面）伪类会在HTML元素处于某个状态时（比如鼠标指针位于链接上），为该元素应用CSS样式
  • 结构化伪类会在标记中存在某种结构上的关系时（如某个元素是一组元素中的第一个或最后一个），为相应元素应用CSS样式

UI伪类

UI伪类会基于特定HTML元素的状态应用样式。最常使用UI伪类的元素是链接（a元素），利用UI伪类，链接可以在用户鼠标悬停时改变文本颜色，或者去掉文本的下划线等等。
一个冒号(:)表示伪类，两个冒号(::)表示CSS3新增的为元素。

链接伪类

针对链接伪类一共有4个：

  • link: 待被点击
  • visited: 用户此前点击过这个链接
  • hover：悬停在链接上
  • active： 链接正在被点击（鼠标在元素上按下，还没有释放）
注意
这4个伪类的顺序，link、visited、hover、active。如果不按照这样的顺序使用它们，浏览器可能不会显示预期结果

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{ text-decoration: underline; }
        a:link { color: rgb(20, 112, 8); }
        a:visited { color: black; }
        a:hover { color: red; }
        a:active { color: cyan;}
    </style>
</head>
<body>
    <a href="http://www.iotzzh.com" target="_blank">http://www.iotzzh.com</a>
</body>
</html>

链接伪类

貌似link的样式并没有被应用起来，当把visited移除时它便会被应用，可见这四个伪类并不是每次都是一起出现的。

focus伪类和target伪类
  • focus伪类：获得焦点时的样式
语法 任何标签：focus{声明}
  • target伪类：如果用户点击一个指定页面其他元素的链接，则那个元素就是目标（target），可以用：target伪类选中它。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        input:focus { outline: 1px solid red; border: 1px solid red;} 

        #first-paragraph:target { color: red;}
        #second-paragraph:target { text-decoration: underline;}

    </style>
</head>
<body>
    <input type="text"><br>

    <a href="#first-paragraph">第一自然段</a>
    <a href="#second-paragraph">第二自然段</a>

    <div id="first-paragraph">这是第一自然段的内容</div>
    <div id="second-paragraph">这是第二自然段的内容</div>
</body>
</html>

focus和target

结构化伪类

结构化伪类可以根据标记的结构应用样式，比如根据某元素的父元素的或前面的同胞元素是什么。

：first-child和：last:child

:first-child代表一组同胞元素中的第一个元素，而:last-child则代表最后一个。

注意

:last-child或者是:first-child这样的伪类时，其前后都不应该有其它的兄弟节点，所以解决办法是使用一个div将标签包裹起来即可。

:nth-child(n或odd/even)

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box { width: 100px; height: 100px; display: inline-block; }
        .box:first-child { background-color: red;}
        .box:last-child { background-color: blue; }

        table tr:nth-child(odd) {background-color: darkgoldenrod; }
        table tr:nth-child(even) {background-color:darkmagenta; }
        table tr:nth-child(1) { background-color: red; color: white; }
    </style>
</head>
<body>
    <div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <table>
        <tr>
            <td>cell1</td>
            <td>cell2</td>
            <td>cell3</td>
        </tr>
        <tr>
            <td>cell1</td>
            <td>cell2</td>
            <td>cell3</td>
        </tr>
        <tr>
            <td>cell1</td>
            <td>cell2</td>
            <td>cell3</td>
        </tr>
        <tr>
            <td>cell1</td>
            <td>cell2</td>
            <td>cell3</td>
        </tr>
        <tr>
            <td>cell1</td>
            <td>cell2</td>
            <td>cell3</td>
        </tr>
    </table>
</body>
</html>

结构化伪类

伪元素

伪元素就是在文档中若有实无的元素。下面介绍几个常用的伪元素：

::first-letter伪元素

段落首字符

::first-line伪元素

文本段落（一般情况下是段落）的第一行

::before和::after伪元素

可用于在特定元素前面或后面添加特殊内容

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .first-letter::first-letter{font-size: large; color: red;}

        .content::first-line {font-style: italic; color: rgba(100, 0, 25, 0.5);}

        .before::before { content: '添加before:'; color: sandybrown;}
        .after::after {content: ':添加after'; color: skyblue;}
    </style>
</head>
<body>
    <div class="first-letter">测试伪元素::first-letter</div>
    <div class="content">
        <p>测试伪元素::first-line 第一自然段</p>
        <p>测试伪元素::first-line 第二自然段</p>
        <p>测试伪元素::first-line 第三自然段</p>
    </div>

    <div class="before">测试before</div>
    <div class="after">测试after</div>

</body>
</html>

伪元素

文章标签：
JavaScript
前端开发
关键词：
CSS选择器
张中华
目录
相关文章
gudanhero2018
|
3月前
|
前端开发
CSS:高级选择器
CSS:高级选择器
gudanhero2018
45 1
gudanhero2018
|
3月前
|
前端开发 JavaScript
CSS：基础选择器
CSS：基础选择器
gudanhero2018
50 1
那年春天
|
29天前
|
前端开发 JavaScript UED
深入理解与应用 CSS 伪类选择器
【10月更文挑战第23天】通过以上对 CSS 伪类选择器的深入探讨，我们可以更好地理解和应用它们，为网页设计和开发带来更丰富、更灵活的样式效果。同时，要注意在实际应用中根据具体情况合理选择和使用伪类选择器，以达到最佳的设计效果和用户体验。
那年春天
34 2
周一同学Zelina
|
3月前
|
前端开发 JavaScript 容器
谁动了我的选择器？深入理解CSS选择器优先级
该文章详细解释了CSS选择器的工作原理，包括不同种类选择器的权重计算规则，并通过实例说明了如何解决样式冲突问题，确保所需的样式能够正确应用到目标元素上。
周一同学Zelina
75 7
六卿
|
3月前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS（层叠样式表）的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用，展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS，讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外，还强调了使用`!important`规则时的优先级高于行内样式。
六卿
91 1
何雨晨
|
2月前
|
前端开发
CSS常见的选择器
CSS常见的选择器
何雨晨
21 0
游客zi3qmblbcdexu
|
3月前
|
前端开发 JavaScript
【CSS】选择器
【CSS】选择器
游客zi3qmblbcdexu
26 2
龙腾九州
|
4月前
|
前端开发
CSS3选择器
【8月更文挑战第23天】CSS3选择器。
龙腾九州
32 1
游客fz577umxdejsg
|
4月前
|
前端开发
CSS中的层级选择器&伪类选择器和伪元素选择器
CSS中的层级选择器&伪类选择器和伪元素选择器
游客fz577umxdejsg
94 3
游客fz577umxdejsg
|
4月前
|
前端开发 数据安全/隐私保护
探秘CSS类型选择器：解码前端设计的神秘密码！
探秘CSS类型选择器：解码前端设计的神秘密码！
游客fz577umxdejsg
23 0
探秘CSS类型选择器：解码前端设计的神秘密码！