CSS选择器

最新推荐文章于 2022-10-15 16:49:19 发布
最新推荐文章于 2022-10-15 16:49:19 发布
阅读量121 收藏
点赞数
分类专栏： web学习 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chao_yang07/article/details/119492380
版权

CSS选择器

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
HTML就像是一个人，而CSS就像是衣服和化妆品，用来装饰HTML。

学习CSS可以分为两部分,一是选择器的使用，二就是对属性的记忆,学习CSS选择器可以更好的重构网页的样式，增加样式的复用性。

1.标签选择器

作用：根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性

格式：

标签名称 { 属性：属性值; }

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color: red;
        }
        p {
            font-style: italic;
        }
        span {
            color: lightskyblue;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div>我是一个div</div>
    <p>我是一个段落标签</p>
    <span>我是一个span</span>
</body>
</html>

显示效果：

在这里插入图片描述

2.id选择器

作用：根据指定的id名称找到对应的标签，然后设置属性

格式：

#id名称 {属性:值;}

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1 {
            color: lightslategrey;
        }
        #div2 {
            font-style: italic;
            color: mediumaquamarine;
        }
        p1 {
            color: mediumspringgreen;
        }
    </style>
</head>
<body>
    <div id="div1">我是div1</div>

    <div id="div2">我是div2</div>
    
    <p id="p1"></p>
</body>
</html>

结果：

在这里插入图片描述

注意点：

  • 每一个界面中id的名称都是不可以重复的
  • 编写id选择器的时候一定要记得加上#
  • 在企业开发中一般情况下如果只是要设置样式，一般不推荐使用id选择器，而是选择用类选择器，因为id是留给js的

3.类选择器

作用：根据指定的类名称找到对应的标签, 然后设置属性

格式：

.类名{ 属性:值;}

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1 {
            color: lightskyblue;
            font-style: italic;
        }
    </style>
</head>
<body>
      <div class="div1">第1个div</div>
      <div class="div1">第2个div</div>
      <div class="div1">第3个div</div>
      <div class="div1">第4个div</div>
      <div class="div1">第5个div</div>
</body>
</html>

结果：

在这里插入图片描述

注意点：

  • 类属性选择器class的名称是可以重复的

  • 编写class选择器时一定要在类名前加上.

  • 类名就是专门用来给CSS设置样式的

  • 在HTML中每个标签可以由多个类名，这样不重叠的样式属性可以实现到同一个元素上

    格式:
<标签名称 class="类名1 类名2 ...">
<div class = "div1 div2"> </div>

3.后代选择器

作用：找到指定标签的所有特定后代标签，设置属性

格式：

选择器1 选择器2 {属性:值;}

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .div1  p{
           color: lightskyblue;
       } 
       .div1 div {
           color: tomato;
       }
    </style>
</head>
<body>
    <div class="div1">
        <p>第1个p</p>
        <p>第2个p</p>
        <p>第3个p</p>
        <div class="div2">
            <p>第1个</p>
            <p>第2个</p>
            <p>第3个</p>
            <div>我是一个div</div>
        </div>
    </div>
</body>
</html>

结果：
在这里插入图片描述

注意点：

  • 后代选择器使用空格隔开
  • 后代不只是儿子，也包括孙子/重孙子…，只要最终放到指定标签后的都是后代
  • 后代选择器不仅仅可以使用标签名称，还可以使用其他选择器

4.子代选择器

作用：找到指定标签中所有特定的直接子元素，然后设置属性

格式：

选择器1>选择器2 { 属性:值;}

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1>p{
            color: tomato;
        }
        .div1>.div2>p {
             color: violet;
        }
        .div1>.div2>div {
            color: red;
        }
    </style>
</head>
<body>
      <div class="div1">
          <p>我是div1的儿子</p>
          <p>我是div1的儿子</p>
          <p>我是div1的儿子</p>
          <div class = "div2">
              <p>我是div2的儿子，也是div1的孙子</p>
              <p>我是div2的儿子，也是div1的孙子</p>
              <p>我是div2的儿子，也是div1的孙子</p>
              <div>我是一个div</div>
          </div>
      </div>
</body>
</html>

结果：
在这里插入图片描述

注意点：

  • 子代选择器只会查找儿子，不会查找其他被嵌套的元素
  • 使用>符号连接，不能用空格，>可以延续下去
  • 子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器

5.交集选择器

作用: 给所有选择器选中的标签中, 相交的那部分标签设置属性

格式：

选择器1选择器2{属性: 值;}

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div.div1 {
            color: red;
        }
    </style>
</head>
<body>
    <div class="div1">我是一个div</div>
    <p class="div1">我是p标签</p>
    <p class="p1">1</p>
    <p class="p1">2</p>
    <p class="p1">3</p>
</body>
</html>

结果：
在这里插入图片描述

注意点：

  • 选择器和选择器之间没有任何的连接符号
  • 选择器可以使用标签名称/id名称/class名称
  • 交集选择器仅仅作为了解, 企业开发中用的并不多

6.并集选择器

作用: 给所有选择器选中的标签设置属性

格式：

选择器1,选择器2{属性:值;}

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div.div1 {
            color: red;
        }
    </style>
</head>
<body>
    <div class="div1">我是一个div</div>
    <p class="div1">我是p标签</p>
    <p class="p1">1</p>
    <p class="p1">2</p>
    <p class="p1">3</p>
</body>
</html>

结果：
在这里插入图片描述

注意点：

  • 并集选择器必须使用,来连接
  • 选择器可以使用标签名称/id名称/class名称

7.兄弟选择器

1.相邻兄弟选择器 CSS2

作用: 给指定选择器后面紧跟的那个选择器选中的标签设置属性
格式:

选择器1+选择器2{属性:值;}

注意点：

  • 相邻兄弟选择器必须通过+连接
  • 相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签

2.通用兄弟选择器 CSS3

作用：给指定选择器后面的所有选择器选中的所有标签设置属性

格式:

选择器1~选择器2{属性:值;}

注意点：

  • 通用兄弟选择器必须用~连接

  • 通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* css2 */
         .p1+p {
             color: saddlebrown;
         }
         /* css3 */
         .p1~p {
             color:lightskyblue
         }
    </style>
</head>
<body>
    <div>
        <p class="p1">我是p1</p>
        <p>我是p2</p>
        <p>我是p3</p>
    </div>
</body>
</html>

结果：

相邻兄弟选择器

在这里插入图片描述

通用兄弟选择器
在这里插入图片描述

8.伪类选择器

8.1序选择器

CSS3中新增的选择器最具代表性的就是序选择器

1.同级别中的第几个元素

序选择器描述
:first-child选中同级别中的第一个标签
:last-child选中同级别中的最后一个标签
:nth-child(n)选中同级别中的第几个标签
:nth-child(odd) 选中同级别中的所有奇数
:nth-child(even) 选中同级别中的所有偶数
:nth-child(xn+y) x和y是用户自定义的, 而n是一个计数器, 从0开始递增
例如(3n+1)分别对应1,4,7…
:nth-last-child(n)选中同级别中的倒数第n个标签
:only-child选中父元素仅有的一个子元素E。仅有一个子元素时生效

注意点: 不区分类型

2.同级别同类型中的第几个

序选择器描述
:first-of-type选中同级别中同类型的第一个标签
:last-of-type选中同级别中同类型的最后一个标签
:nth-of-type(n)选中同级别中同类型的第n个标签
:nth-last-of-type(n)选中同级别中同类型的倒数第n个标签
:only-of-type选中父元素的特定类型的唯一子元素

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p:first-child {
            color: lightskyblue;
        }

        p:nth-child(2) {
            color: red;
        }
        p:last-child {
            color: blue;
        }
    </style>
<body>
        <div>
            <p>我是div里面的1p</p>
            <p>我是div里面的2p</p>
            <p>我是div里面的3p</p>
        </div>
        <p class="p1">div外的p1</p>
        <p>div外的p2</p>
        <p class="p1">div外的p3</p>
        <p>div外的p4</p>
</body>
</html>

结果：
在这里插入图片描述

8.2动态伪类选择器
  • E:link（链接伪类选择器）：选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接 描点上
  • E:visited（链接伪类选择器 ）：选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于 链接描点上
  • E:active（用户行为选择器）：选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
  • E:hover （用户行为选择器）： 选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持 a:hover

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 给a标签从未访问过的时候设置样式 */
        a:link {
            color:blue;
            text-decoration: none;
        }
        /* 已经访问过 */
        a:visited {
            color: red;
        } 
        /* 悬停 */
        a:hover {
            color: yellow;
        }
        a:active {
            color: black;
        } 
    </style>
</head>
<body>
    <a href="https://www.tmall.com/">爱奇艺</a>
</body>
</html>

结果

a:link

在这里插入图片描述

a:visited

在这里插入图片描述

a:hover

在这里插入图片描述

a:active

在这里插入图片描述

8.3否定伪类

作用：可以从已选中的元素中剔除出某些元素

格式：

:not(选择器)

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p:not(.p1) {
            background-color: tomato;
        }
    </style>
</head>
<body>
    <!-- 否定伪类 -->
    <p>我是第1个段落标签</p>
    <p class="p1">我是第2个段落标签</p>
    <p>我是第3个段落标签</p>
    <p>我是第4个段落标签</p>
</body>
</html>

结果：

在这里插入图片描述

8.4伪元素选择器

作用：使用微元素表示元素中的一些特殊的位置

  • ::after

    表示元素的最后边的部分
    一般需要结合content这个样式一起使用，
    通过content可以向after的位置添加一些内容

  • ::before

    表示元素最前边的部分
    一般需要结合content这个样式一起使用，
    通过content可以向before的位置添加一些内容

  • ::first-letter

    为第一个字符来设置一个样式

  • ::first-line

    为第一行设置一个样式

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* ...之后 */
        p::after{
            content: "我是一个：：after";
        }
        /* ...之前 */
        p::before{
            content: "我是一个：：before";
        }
        /* 首字母被选中  由：：before则是before的文本内容*/
        p::first-letter {
            font-size: 30px;
            color: tomato;
        }
        p::first-line {
            color: blue;
        }
    </style>
</head>
<body>
    <p>
        作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
        最常见的应用场景, 就是用于区分input属性
    </p>
</body>
</html>

结果：

在这里插入图片描述

注意：当浏览器缩放到几行的时候，first-line只选择这个段落的第一行

在这里插入图片描述

8.5属性选择器

作用:根据指定的属性名称找到对应的标签, 然后设置属性

格式:

[attribute][attribute=value]

作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
最常见的应用场景, 就是用于区分input属性

input[type=password]{}<input type="text" name="" id="">
<input type="password" name="" id="">

  • 属性的取值是以什么开头的
    ​ [attribute|=value] CSS2
    ​ [attribute^=value] CSS3
    ​ 两者之间的区别:
    ​ CSS2中的只能找到value开头,并且value是被-和其它内容隔开的
    ​ CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开

  • 属性的取值是以什么结尾的
    ​ [attribute$=value] CSS3

  • 属性的取值是否包含某个特定的值得
    ​ [attribute~=value] CSS2
    ​ [attribute*=value] CSS3
    ​ 两者之间的区别:
    ​ CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的
    ​ CSS3中的只要包含value就可以找到

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 通配符选择器 */
        *{
            margin: 0;
            padding: 0;
        }
        /* 属性选择器 */
        input[type=text] {
            background-color: red;
        }
        /* 获取属性开头选择特定的标签 */
        /* css2 */
        input[name|=user] {
            color: blue;
        }
        /* css3 */
        input[name^=user] {
            color: blue;
        }
        /* 直接加abc */
        input[abc] {
            background-color: lightskyblue;
        }
    </style>
</head>
<body>
    <input type="text" name="user-name" id=""><br>
    <input type="text" name="" id=""><br>
    <input type="password" name="username" id=""><br>
    <input type="text" abc>
</body>
</html>

结果：
在这里插入图片描述

9.通配符选择器

作用：给当前界面上所有的标签设置属性

格式：

*{属性:值;}

注意点:
由于通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签, 如果当前界面上的标签比较多, 那么性能就会比较差, 所以在企业开发中一般不会使用通配符选择器

chao_yang07
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JSoup CSS选择器用法大全
08-15
下面将详细介绍 JSoup 支持的各种 CSS 选择器及其用法。 1. **基本选择器**： - `*`: 通配符选择器，匹配任何元素。 - `tag`: 按照元素名称选择，如 `div` 选择所有的 `<div>` 元素。 - `#id`: 通过元素的 ID ...
HTML基础（一）
牢骚太盛防肠断，风物长宜放眼量
05-17 6378
本文是作者在学习html过程中对知识的初步整理 1.第一个程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的第一个HTML页面</title> </head> <body> hello HTML,I am shuaigeliu </body> </html> htm.
html基础学习
weixin_52676304的博客
10-15 3835
html新手学习，以菜鸟教程为主
2.选择器
P_ning的博客
05-29 235
<!doctype html> <html> <head> <meta charset="utf-8"> <title>id选择器</title> <style type="text/css"> #study{ font-size:40px; color:#0FF; } </style> ...
CSS选择器详解
JiuMeilove的博客
08-29 6万+
CSS所有选择器列表 CSS选择器用于选择你想要的元素的样式的模式。下面是css所有的选择器 选择器 示例 示例说明 css版本 .class .intro 选择所有class="intro"的元素 1 #id #firstname 选择所有id="firstname"的元素 1 * * 选择所有元素 2 element p 选择所有< p >元素 1 element,element div,p 选择所有< div >元素和< p >元素
CSS 选择器支持列表
09-25
CSS 选择器支持列表 CSS 选择器是 CSS 中的一个重要组成部分，它允许开发者根据特定的规则来选择和应用样式到 HTML 元素上。下面是 CSS 选择器支持列表的详细解释： ### 一、基本选择器 * `E`：选择所有 HTML ...
CSS教程之css选择器 、属性、值
10-30
HTML有标签，CSS有选择器。选择器是给内部和外部样式里面的样式命名。 每个选择器都有属性在{}里面，比如简单点像color,font-weight或background-color。 值在冒号（不是等号）后面，分号分离属性。
不能不知道的CSS选择器技巧
09-24
【CSS选择器技巧详解】 CSS选择器是网页样式设计中不可或缺的部分，它们允许开发者精确地定位和风格化页面上的元素。本文将深入探讨两个重要的CSS伪元素：`:before` 和 `:after`，以及如何结合边框（border）创建...
驯服CSS选择器
09-25
在优化CSS选择器时，首要关注的是CSS文件的大小和HTTP请求数，因为这两个因素直接影响页面加载速度和用户体验。CSS性能的关键在于减少浏览器的回流(reflow)和重绘(repaint)，但相比这些，文件大小和请求数的影响更大...
CSS选择器.pdf
10-09
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 "CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。）
CSS教程 CSS选择器
09-25
理解并灵活运用CSS选择器是创建美观、响应式和高性能网页设计的关键。在实际开发中，合理组织和选择选择器可以提高代码的可读性和效率，同时遵循最佳实践和W3C标准，确保页面的兼容性和可访问性。
渲染CSS选择器
09-27
最近在High Performance Web Sites blog看到一篇关于css选择器的文章《Simplifying CSS Selectors》，我英文太差，在翻译软件和朋友的帮助下稍微的看懂了一些，看本文需要谨慎，谨防被我误导，如果你英文强，能翻译...
js 收银元小程序
weixin_30594001的博客
08-21 286
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js考试</title></head><script type="text/javascript">// 1.编写一个程序，计算增加后的工资。要求基本工资大于等于100...
HTML选择器
HeDashuaithan的博客
01-06 245
后代选择器 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>后代选择器</title> <style type="text/css"> div{ color: #1E99FF; } span{ color: #483D8B; } /* 使用空格来标识为后代选择器，其实是缩小了选择器的查找范围而已
HTML 基本选择器
m0_65066169的博客
10-01 2054
里面要加 id="你起的名字".我这里写的a,一定要加#号。使用类选择器的时候如上面我写的一个
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <sty
热门推荐
u014497548的博客
06-03 53万+
Title img,div,body{margin: 0;padding: 0;} .orgindiv {width: 200px;height: 200px;position: relative;float: left;margin-left: 100px;} .orgindiv img{width: 100%;height: 100%;}
javafx css 选择器
最新发布
05-20
JavaFX CSS选择器是一种类似于HTML和CSS的选择器语言，它用于对JavaFX用户界面组件进行样式化和布局。通过使用JavaFX CSS选择器，可以轻松地为JavaFX应用程序中的各种组件添加样式和布局。以下是一些JavaFX CSS选择器的示例： 1. 类选择器：用于选取具有相同类名的组件。 例如：.my-class { ... } 2. ID选择器：用于选取具有唯一ID的组件。 例如：#my-id { ... } 3. 子元素选择器：用于选取某个父元素下的特定子元素。 例如：.parent .child { ... } 4. 伪类选择器：用于选取特定状态下的组件，例如悬停或选中状态。 例如：.my-button:hover { ... } 5. 通配符选择器：用于选取所有组件。 例如：* { ... } 6. 属性选择器：用于选取具有特定属性值的组件。 例如：.my-textfield[text="Username"] { ... }

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值