CSS3选择器

最新推荐文章于 2023-06-04 14:34:23 发布

hoλ ⺕^o丨

最新推荐文章于 2023-06-04 14:34:23 发布

阅读量168

点赞数

文章标签： css3 css 前端

本文链接：https://blog.csdn.net/2302_77391235/article/details/129918298

版权

:first-child和:last-child选择器

:nth-child(n)和:nth-last-child(n)

:nth-of-type(n)和:nth-last-of-type(n)选择器

（用于匹配属于父元素的特定类型的第n个子元素和倒数第n个子元素）

属性选择器

E[att^=value]属性选择器

选择名称为E的标签，且该标签定义了att属性，att属性值包含前缀为value的子字符串。

E可以省略，如果省略则表示可以匹配满足条件的任意标签。

例如：div[id^=section]表示匹配包含id属性，且id属性值是以“section”字符串开头的div元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>E[att^=value]属性选择器</title>
    <style type="text/css">
        p[id^="one"]{    /*只要p元素中的id属性值是以"one"开头就会被选中*/
            color:red;
            font-family:"微软雅黑";
            font-size:20px;
        }
    </style>
</head>
<body>
    <p id="one">看日出</p>
    <p id="one1">看日出</p>
    <p id="two">看日出</p>
</body>
</html>

E[att$=value]属性选择器

例如：div[id$=section]表示匹配包含id属性，且id属性值是以"section"字符串结尾的div元素。

**E[stt*=value]属性值选择器**

例如：div[id*=section]表示匹配包含id属性，且id属性值包含"section"字符串的div元素。

关系选择器

子元素选择器

用来选择某个元素的第一级子元素。

例如选择只作为h1标签子元素的strong标签，可以写为：h1>strong

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素选择器</title>
    <style type="text/css">
        h1>strong{
            color:red;
            font-size:20px;
            font-family:"微软雅黑";
        }
    </style>
</head>
<body>
    <h1>这个<strong>知识点</strong>很<strong>重要</strong></h1> /*strong标签为h1标签的子元素，代码中设置的样式只对该句有效*/
    <h1>首都<em><strong>人们</strong></em>欢迎您</h1> /*strong标签为h1标签的孙元素 （无效）*/
</body>
</html>

兄弟选择器（+ ~）

临近兄弟选择器

该选择器使用“+”来连接前后两个选择器，选择器中的两个元素有同一个父元素，而且第2个元素必须紧跟第1个元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>临近兄弟选择器</title>
    <style type="text/css">
        p+h2{
            color:red;
            font-size:20px;
            font-family:"微软雅黑";
        }
    </style>
</head>
<body>
    <h2>《赠汪伦》</h2>
    <p>李白乘舟将欲行</p>
    <h2>忽闻岸上踏歌声</h2> /*只有紧跟p元素的h2元素应用了代码中设定的样式*/
    <h2>桃花</h2>
</body>
</html>

普通兄弟选择器

使用"~"来连接前后两个选择器。选择器中的两个元素有同一个父亲，但第2个元素不必紧跟第1个元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>普通兄弟选择器</title>
    <style type="text/css">
        p~h2{                /*为p标签的所有兄弟元素定义文本样式*/
            color:red;
            font-size:20px;
            font-family:"微软雅黑";
        }
    </style>
</head>
<body>
    <p>李白乘舟将欲行</p>
    <h2>忽闻岸上踏歌声</h2> 
    <h2>桃花</h2>
</body>
</html>

结构化伪类选择器

:root选择器

用于匹配文档根标签，在HTML中，根标签始终是html。即使用“:root选择器”定义的样式对所有页面标签都生效。对于不需要该样式的标签，可以单独设置样式进行覆盖。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>:root选择器</title>
    <style type="text/css">
        :root{color:red;} /*将页面所有的文本设置为红色*/
        h2{color:blue;} /*为h2标签设置蓝色文本，以覆盖上行代码设置的红色文本样式*/
    </style>
</head>
<body>
    <h2>面朝大海</h2>
    <p>
        幸福的人
        面朝大海
    </p>
</body>
</html>

:not选择器

对某个结构标签使用样式，排除这个结构元素下面的子结构元素，让子结构元素不使用这个样式。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>:not选择器</title>
    <style type="text/css">
        body *:not(h3){ 
            color:orange; 
            font-size:20px; 
            font-family:"宋体"; 
        }
    </style>
  </head>
  <body>
    <h3>我</h3>
    <p>世界</p>
    <p>世界</p>
  </body>
</html>
/*body *:not(h3)选择器用于排除body结构中的子结构元素h3，使其不应用设置的文本样式。
  只有h3标签所定义的文字内容没有添加新的样式。
*/

:only-child选择器

用于匹配属于某父元素的唯一子元素，即如果某父元素仅有一个子元素，则使用该选择器去选择这个子元素。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>:only-child选择器</title>
    <style type="text/css">
        strong:only-child{ color:red; }
    </style>
  </head>
  <body>
    <p>
      <strong>宗师</strong>
      <strong>英雄</strong>
    </p>
    <p>
      <strong>高管</strong>
    </p>
  </body>
</html>
/*:only-child选择器"strong:only-child"，用于选择作为p标签唯一子元素的strong标签，并设置其文本颜色为红色*/

:first-child和:last-child选择器

分别用于选择父元素中的第一个和最后一个子元素。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>:first-child和:last-child选择器</title>
    <style type="text/css">
        p:first-child{
            color:pink;
            font-size:16px;
            font-family:"宋体";
        }
        p:last-child{
            color:biue;
            font-size:16px;
            font-family:"微软雅黑";
        }
    </style>
  </head>
  <body>
    <p>第一</p>
    <p>第二</p>
    <p>第三</p>
  </body>
</html>
/*分别使用了选择器"p:first-child"和"p:last-child"，用于选择父选择器的第一个子元素和最后一个子元素(本案例中父元素为body),然后为它们设置特殊的文本样式*/