【CSS】标签层级关系，常用选择器，伪类选择器

原创已于 2023-11-27 15:17:33 修改 · 868 阅读

23 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #前端 #css3

于 2022-09-18 21:37:09 首次发布

CSS 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了CSS中的各种选择器，包括标签、类、ID选择器等，并解释了伪类选择器及位置选择器的使用方法。此外，还介绍了复合选择器的概念及应用。

❤️ Author：老九
☕️ 个人博客：老九的CSDN博客
🙏 个人名言：不可控之事乐观面对
😍 系列专栏：CSS

CSS

写在哪？怎么写?( 3种)

内部样式表，将CSS文件放在HTML文件< head >元素里面的< style >元素中

  <style>
    p,
    h1 {
      color: red
    }

  </style>

<link rel="stylesheet" href="./css/index.css">

内联样式存在于HTML元素的style属性中

<p style="color:aqua;">1Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, nesciunt necessitatibus ipsam
    Ratione, laborum.</p>

下面这个是css的一个语法，可以在css文件中，通过@import添加外部的css样式，然后通过link标签的href添加css文件

@import url(./style.css)

标签层级关系

根据标签的嵌套关系

父子关系
后代元素
兄弟元素，共用一个父元素
祖先元素

替换元素（标签）与非替换元素（标签）

替换元素：input，img，video，audio，iframe
非替换元素：button，p，select，div，span，a，i，strong，em

元素的显示角色

块元素：p，h1-h6，div，nav，header，footer，main，aside，section，article
行内元素：a，em，strong，i，b，u，span
如果想让显示角色互相转换，通过 span{display:block;},section{display:inline} 相互转换块元素和行内元素

常用选择器

标签选择器

 p,
    h1 {
      color: red;
      border: 6px dotted blue;
    }

通配符选择器

指配所有元素

*{
color:red;
}

类选择器

一个标签可以有两个类名，中间有一个空格就可以
前面有一个点

.lmp {
      color: antiquewhite;
      border: 3px solid red;
    }

id选择器

用#后面接id
id不能为数字开头，中间不能有空格

<h1 id="lmp">Lorem</h1>

#lmp {
      color: blue;
    }

属性选择器

选中title属性的值为lorem的标签
值是区分大小写，必须要打上引号
注意：所有的属性选择器，如果中括号[]里面加上一个i，那么就忽略大小写

第一种

<h2 title="lorem">lorem,ipsum</h2>

[title="lorem"] {
      color: aquamarine;
    }

第二种

选中title属性以lorem开头的元素
用^符号
如果后面加一个i，那么属性不区分大小写！

 <h2 title="lorem-lmp">lorem,ipsum</h2>

 [title^="lorem" i] {
      border: 3px solid rebeccapurple;
}
[title^="LOREM" i] {
        color: red;
}

第三种

选中title属性以lmp属性结尾的元素
用$符号

<h2 title="lorem-lmp">lorem,ipsum</h2>

[title$="lmp"] {
      border: 3px solid rgb(87, 75, 99);
}

第四种

属性值包含某一个值，区别于第五种

<h1 title="lmp">Lorem</h1>
<h2 title="lorem-lmp">lorem,ipsum</h2>

 [title*="lmp"] {
      border: 3px solid rgb(87, 75, 99);
    }

第五种

属性值包含val, 如果有其他值必须以空格和val分割

<h1 title="lmp">Lorem</h1>
<h2 title="lorem-lmp lmp">lorem,ipsum</h2>

[title~="lmp"] {
      border: 3px solid rgb(87, 75, 99);
    }

第六种

属性值等于val或者以val开头后面紧跟连接符“-”;

[title|="lmp"] {
      border: 3px solid rgb(130, 11, 249);
    }

  <h1 title="lmp">Lorem</h1>
  <h2 title="lmp-xxx">lorem,ipsum</h2>

第七种

存在for属性的元素

[for]{
}

伪类选择器

指元素（标签）隐含的状态
以冒号开头标记，有固定的一些伪类

交互伪类

被鼠标悬浮的标签

:hover {
      border: 3px solid red;
    }

被鼠标按下还未松开的标签

    :active {
      border: 3px solid red;
    }

被激活焦点的元素

如果没有焦点的标签，想要获得标签，通过tabindex属性获取

    :focus {
      border: 3px solid red;
    }

a标签的交互状态选择器书写顺序

:hover必须放在:link和:visited后面才能完全生效
:active必须放在:hover后面才能生效
前两个的顺序不做要要求
记得方法：LV(品牌) F(fuck) HA(哈哈)

在这里插入图片描述

链接伪类

未访问过的链接

:link {
      color: aqua;
    }

已访问过的链接

    :visited {
      color: gray;
    }

位置伪类

根据元素在html代码中的位置来决定其是否匹配某个选择器

first-child

当一个元素是某元素的第一个子元素时
first-child匹配大儿子

    :first-child {
      border: 3px solid red;
    }

last-child

匹配所有的最后一个子元素

    :last-child {
      border: 3px dotted red;
    }

nth-child([数字])

指定元素为第几个

    :nth-child(3) {
      border: 3px dotted red;
    }

nth-last-child([数字])

指定元素的倒数第几个
括号里面也可以写2n（偶数，也可以写even），2n+1（奇数，也可以写odd）
数字是从0开始的
如果是-n的话就是0 -1 -2 -3 -4，所以如果选择前两个是-n+2

    :nth-last-child(3) {
      border: 3px dotted red;
    }

only-child

这个意思是独生子
盘子里面的独生子有西红柿，黄瓜
plate :only-child(中间有空格哦)

first-of-type

一个标签的子标签中某种标签类型的第一个
1，2，4标签会有边框

<div>
    <a href="">aaa</a>
    <b>bbb</b>
    <b>bbb</b>
    <span>span</span>
    <b>bbb</b>
    <span>span</span>
    <a href="">aaa</a>
  </div>

:first-of-type {
      border: 3px solid red;
    }

last-of-type

nth-of-type(2n)

求100以内素数变成红色

 div.prime li:not(:nth-child(1)):not(:nth-child(2n+4)):not(:nth-child(3n+9)):not(:nth-child(5n+25)):not(:nth-child(7n+49)) {
      color: red;
    }

only-of-type

选中某个子标签中只出现一个的
下面这个只有span，和b有边框

:only-of-type {
      border: 3px solid red;
    }

 <div>
    <span>aa</span>
    <a href="xx">bbb</a>
    <a href="xx">vvv</a>
    <b>fjkld</b>
  </div>

empty

:empty：选中没有孩子元素的元素

not

:not([任意一个选择器])
例如:not(.foo)，这个就是.foo选择器选择的什么，就不要什么，其他的全要

复合选择器（交集选择器）

中间不要加空格
选中同时满足所有选择器条件的元素（用于精准的选中某个元素）
既类是foo，并且含有属性foo=bar的元素

.foo[foo="bar"]{
}

层级选择器(后代选择器)

选中满足条件A的元素的后代中满足B的元素
A和B都可以是一个复合选择器
中间有个空格不能省略
下面这个就是在div里面的span的颜色是红色

div span{
  color : red;
}

注意如果两个元素之间有一个">"，那么这两个元素必须要呈现父子关系（包括大儿子，二儿子等等），也叫做直接子代选择器

div > span{
color : red;
}

兄弟选择器
注意如果两个元素之间有一个"+"，那么紧跟在满足选择器A的元素后面的满足选择器B的元素
跟在span后面的一个p元素
如果是加了两个p，那么就是span后面的第二个p

span + p {

}
span + p + p{
}

全兄弟选择器
注意如果有一个"~"，那么就是span后面的所有弟弟p标签都算

span ~ p {
}

并集选择器
注意如果有一个","，满足A或者满足B的元素

 .lmp,
    [id="bar"] {
      color: aqua
    }

————————————————————————
♥♥♥码字不易，大家的支持就是我坚持下去的动力♥♥♥
版权声明：本文为CSDN博主「亚太地区百大最帅面孔第101名」的原创文章