[CSS] 选择器

最新推荐文章于 2023-12-12 09:35:39 发布

小公鸡卡哇伊呀~

最新推荐文章于 2023-12-12 09:35:39 发布

阅读量316

点赞数

分类专栏： Other

本文链接：https://blog.csdn.net/ftell/article/details/102610168

版权

Other 专栏收录该内容

59 篇文章 2 订阅

订阅专栏

文章目录

选择器

选择器

CSS 使用选择器来挑选HTML文档中的特定元素，并设置这些元素的属性。

1. 类型选择器 Type selector

又称为HTML元素/标签选择器，选择的是HTML元素或标签：

span {
    background-color: yellow;
}
strong {
    color: rebeccapurple;
}
em {
    color: rebeccapurple;
}

2. 类选择器 Class selector

类选择器以点号开头，选择文档中应用了该类的一切元素。
可以选择特定的元素+特定的类，也可以选择具有多个类的某一元素：

<html>
  <head>
    <title>Test css selector</title>
    <style>
      .note {
          border: solid;
      }
      .note.message {
          background-color:white;
      }
      .note.warning {
          background-color:yellow;
      }
      .note.danger {
          background-color:red;
      }
    </style>
  </head>
  <body>
    <p class = "note message">This is a note message </p>
    <p class = "note warning">This is a warning message</p>
    <p class = "note danger">This is a message about danger</p>

  </body>
</html>

在这里插入图片描述

3. ID 选择器 ID selector

ID和类的不同：一个ID一个文档只能出现一次，ID选择器和类选择器的用法基本类似。
ID选择器以 # 开头，因为ID唯一，理论上#myId的写法足够，但有时可以看到类似如下p#danger的写法，这样的写法会更为具体：

<html>
  <head>
    <title>Test css selector</title>
    <style>
      p {
          border: solid;
      }
      #message {
          background-color:white;
      }
      #warning {
          background-color:yellow;
      }
      p#danger {
          background-color:red;
      }
    
    </style>
  </head>
  <body>
    <p id = "message">This is a note message </p>
    <p id = "warning">This is a warning message</p>
    <p id = "danger">This is a message about danger</p>
  </body>
</html>

4. 通用选择器 Universal selector

通用选择器使用 * 号，选择全部HTML元素，例如：

* {
    margin: 0;
}

但是由于重置全部元素的浏览器默认属性，所以要自行全部重设全部元素属性，很麻烦，所以一般不会这样用。
一种用途例如，需要选择全部article元素的第1个子元素first-child, 可以这样写：

/* code 1 */
article :first-child {
}

但是容易与下面的写法混淆，下面的写法的含义是, 选择全部article元素，假如这个article是另一个元素的第一个子元素的话：

/*  code 2 */
article:first-child {
}

两者的区别是，article后者少了一个空格，为什么会有区别，暂时不知道。所以要改成下面这样：

/* code 3 */
article *:first-child {
}

code 1 与 code 3 等价， code 2 另一种含义。此处选择器冒号前后的空格很重要，不能多加，不能少加。

5. 属性选择器 Attribute Selector

HTML 有很多全局属性(global attribute)，包括，id, lang, class, style，class 是全局属性之一，是众多属性中特殊的一种。class 绝大多数情况下用于css，但是，有时也用于JavaScript.

No.	属性选择器	例子	含义
1.	`tag[attr]`	`p[class]`	标签有一个名为`attr`的属性
2.	`tag[attr=value]`	`a[href="https://example.com"]`	标签属性值为`value`，完全匹配
3.	`tag[attr*=value]`	`a[href*="example"]`	标签的属性值含有`value`就可以
4.	`tag[attr$=value]`	`a[href$=".com"]`	标签属性值以`value`结尾
5.	`tag[attr^=value`	`a[href^="https"]`	标签属性值以`value`开头
6.	`tag[attr\|=value]`	`div[lang\|="zh"]`	标签属性值为`value`，或者以`value`加连字符号开头，例如“zh-CN”
7.	`tag[attr~=value]`	`p[class~="special"]`	标签属性值为`value`, 或者`class`属性值其中之一包含`value`

例子：

<html>
  <head>
    <title>Test css selector</title>
    <style>
      p {
          border: solid;
      }
      p[class] {
          background-color:pink;
      }
      p[class~="a"] {
          font-size: 150%;
      }
      p[class*="a"] {
          padding-left:5em;
      }
      p[class="a"] {
        color: red;
      }
    
    </style>
  </head>
  <body>
    <p class = "ab">This is class ab </p>
    <p class = "a b">This is class a b</p>
    <p class = "a">This is class a</p>
  </body>
</html>

在这里插入图片描述

要使属性值对大小写不敏感，就在结束的中括号前加值i，例如li[class^="a" i]

6. 伪类选择器 Pseudo-class

伪类选择器选择处于特殊状态的元素，这些所谓的特殊状态包括 :hover, :visited, :first-child; last-child, :checked, 等，共有大约50个，

关于伪类的例子：

<html>
  <head>
    <title>Test css selector</title>
    <style>
 
    p:hover {

      color:aqua;
    }
    
    a:link {
      color:rgb(0, 255, 64);
    }
    a:visited {
      color:purple;
    }
    a:hover {
      color:beige;
    }
    </style>
  </head>
  <body>
    <p class = "ab">This is class ab </p>
    <p class = "a b">This is class a b</p>
    <p class = "a">This is class a</p>
    <a href="https://www.baidu.com">Go to search</a>
  </body>
</html>

7. 伪元素选择器 pseudo-element

伪元素选择器的行为好像加了新的HTML元素一样，不会使用class。::first-line, ::after, ::before等等，供7个。
通常，伪类选择器和伪元素选择器可以组合使用。
首字母大写的例子：

<html>
  <head>
    <title>Test css selector</title>
    <style>
    article p:first-child::first-letter {
      font-size: 200%;
      font-weight: bold;
    }   
    
    </style>
  </head>
  <body>
    <article>
      <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
              melon azuki bean garlic.</p>
  
      <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
              greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
      <p>xxx</p>
      <p>yyy</p>
    
    </article>
  </body>
</html>

在这里插入图片描述

8. 组合选择器 Combinator

组合选择器将其他选择器组合起来，指明相互之间的关系。

8.1 后裔选择器 Descendant selector

选择器之间加空格叫后裔选择器，例如：

body article p 只要是后裔就可以，没必要一定是直接的孩子。

在这里插入图片描述

8.2 子组合选择器 Child combinator

使用大于符号例如： article > p,

8.3 相邻兄弟

使用符号 +，例如 p + img，这里相邻，是指紧随其后，前面的不算。

8.4 一般兄弟

使用符号 ~，例如： p ~ img，后面的元素。

<html>
  <head>
    <title>Test css selector</title>
    <style>
      p ~ div {
      background-color:black;
      color:white;
      font-size:150%;
    }
    </style>
  </head>
  <body>
    <article>
      <p>paragraph 1</p>
      <div>division1</div>
      <div>division2</div>
      <div>division3</div>
    
    </article>
  </body>
</html>