CSS选择器

最新推荐文章于 2024-05-28 15:06:59 发布

dev_coding

最新推荐文章于 2024-05-28 15:06:59 发布

阅读量285

点赞数

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

本文链接：https://blog.csdn.net/qq_41033768/article/details/124288401

版权

前端学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

0、CSS选择器

通用选择器
- 所有元素都会被选中
  - *（性能比较低，不推荐；因为部分浏览器会对所有标签进行遍历，从而初始化样式，从而降低浏览器性能）
元素选择器（type selectors）
类选择器（class selectors）
id选择器（id selectors）
属性选择器（attribute selectors）
组合
伪类
伪元素

1、属性选择器

拥有某一个属性[att]
属性等于某一个值[att=val]

其它

[attr*=val]：属性值包含某一个value
[attr^=val]：属性值以value开头
[attr$=val]：属性值以value结尾
[attr|=val]：属性值等于value或以val开头后面紧跟连接符-

[attr~=val]：属性值包含value，如果有其他值必须以空格和val分割

<!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>
    /* 属性选择器：选择包含该属性的元素 */
    [title]{
      background-color: #eee;
    }
  </style>
</head>
<body>
  <div title="div">我是div元素</div>
  <div>我是div1元素</div>
  <div>我是div2元素</div>
  <p title="p">我是div2元素</p>
</body>
</html>

2、后代选择器（直接/间接后代）

所有后代
- 选择器之间用空格分隔
直接子代
- 选择器之间以>分隔

3、兄弟选择器

相邻选择器：使用符号+连接
普遍兄弟选择器：使用符号~连接

4、选择器组

交集选择器（）
并集选择器（,）

5、伪类选择器

什么是伪类
- pseudo-classes：伪类
- 伪类是选择器的一种，它用于选择处于特定状态的元素
元素的状态
动态伪类
- :hover
- :link
- :visited
- :active（点下但还没有松手）
- :focus
- 注意事项
  - :hover必须放在:link和:visited后面才能完全失效
  - :active必须放在:hover后面才能失效
  - 建议编写顺序：:link、:visited、:focus、:hover、:active
目标伪类
- :target
语言伪类
- :lang
  - :lang(en)：选择设置英文的伪类
结构伪类
- :nth-child()、:nth-last-child()、:nth-of-type()
否定伪类
- :not()

6、伪元素(pseudo-element)

常用的伪元素（推荐写两个冒号，便于区分伪类）

:first-line、::first-line
- 首行文本属性设置
:first-letter、::first-letter
- 首字母属性设置
:before、::before
- 内容之前
:after、::after
- 内容之后

<!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::first-line{
      /* 设置第一行内容 */
      font-size: 30px;
      color: #ff0;
    }
    .box::first-letter{
      /* 设置首字母 */
      color: aqua;
    }
    .box::before{
      color: blueviolet;
      content: "在前面插入内容";
    }
    .box::after{
      content: url("https://www.jeasyui.cn/jeasyui/public/images/logo2.png");
      /* 调整位置 */
      position: relative;
      left: 5px;
    }
    .box1::after{
      /* 使用伪元素过程种，不要将content省略 */
      content: "";
      display: inline-block;
      width: 8px;
      height: 8px;
      background-color: #f00;
    }
  </style>
</head>

<body>
  <div class="box">
    奥古斯都在《忏悔录》里面问我这样一个问题：“时间到底是什么？你不问我的时候，我是知道的；你一问我，我就不知道了。”
    把“时间”换成“MVI”，这个问题同样困扰着我：“MVI 到底是什么？你不问我的时候，我是知道的；你一问我，我就不知道了。”
    维特根斯坦会说，上面是一个非法的问题，源于错误地使用了语言。
    正确的问题应该是这样问的：人们在什么场景下使用 MVI，他们是怎么使用 MVI 的？他们为什么会使用 MVI？
  </div>
  <div class="box1">我是box1</div>
</body>

</html>

dev_coding

关注

0
点赞
踩
0

收藏

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

0、CSS选择器通用选择器所有元素都会被选中*（性能比较低，不推荐；因为部分浏览器会对所有标签进行遍历，从而初始化样式，从而降低浏览器性能）元素选择器（type selectors）类选择器（class selectors）id选择器（id selectors）属性选择器（attribute selectors）组合伪类伪元素1、属性选择器拥有某一个属性[att]属性等于某一个值[att=val]其它[attr*=val]：属性值包含某一个val
复制链接

扫一扫