【CSS】基础使用，层级关系，选择器

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

CSS

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

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

  <style>
    p,
    h1 {
      color: red
    }

  style>
1
2
3
4
5
6
7

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

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

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

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

@import url(./style.css)
1

标签层级关系

根据标签的嵌套关系

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

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

• 替换元素：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;
    }
1
2
3
4
5

通配符选择器

• 指配所有元素

*{
color:red;
}
1
2
3

类选择器

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

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

id选择器

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

<h1 id="lmp">Loremh1>
1

#lmp {
      color: blue;
    }
1
2
3

属性选择器

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

第一种

<h2 title="lorem">lorem,ipsumh2>
1

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

第二种

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

 <h2 title="lorem-lmp">lorem,ipsumh2>
1

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

第三种

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

<h2 title="lorem-lmp">lorem,ipsumh2>
1

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

第四种

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

<h1 title="lmp">Loremh1>
<h2 title="lorem-lmp">lorem,ipsumh2>
1
2

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

第五种

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

<h1 title="lmp">Loremh1>
<h2 title="lorem-lmp lmp">lorem,ipsumh2>
1
2

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

第六种

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

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

  <h1 title="lmp">Loremh1>
  <h2 title="lmp-xxx">lorem,ipsumh2>
1
2

第七种

• 存在for属性的元素

[for]{
}
1
2

伪类选择器

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

交互伪类

被鼠标悬浮的标签

:hover {
      border: 3px solid red;
    }
1
2
3

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

    :active {
      border: 3px solid red;
    }
1
2
3

被激活焦点的元素

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

    :focus {
      border: 3px solid red;
    }
1
2
3

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

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

链接伪类

未访问过的链接

:link {
      color: aqua;
    }
1
2
3

已访问过的链接

    :visited {
      color: gray;
    }
1
2
3

位置伪类

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

first-child

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

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

last-child

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

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

nth-child([数字])

• 指定元素为第几个

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

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;
    }
1
2
3

only-child

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

first-of-type

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

<div>
    <a href="">aaaa>
    <b>bbbb>
    <b>bbbb>
    <span>spanspan>
    <b>bbbb>
    <span>spanspan>
    <a href="">aaaa>
  div>
1
2
3
4
5
6
7
8
9

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

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;
    }
1
2
3

only-of-type

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

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

 <div>
    <span>aaspan>
    <a href="xx">bbba>
    <a href="xx">vvva>
    <b>fjkldb>
  div>
1
2
3
4
5
6

empty

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

not

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

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

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

.foo[foo="bar"]{
}
1
2

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

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

div span{
  color : red;
}
1
2
3

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

div > span{
color : red;
}
1
2
3

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

span + p {

}
span + p + p{
}
1
2
3
4
5

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

span ~ p {
}
1
2

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

 .lmp,
    [id="bar"] {
      color: aqua
    }
1
2
3
4

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