web前端的恐怖之旅（2）：CSS选择器

最新推荐文章于 2024-08-29 08:59:28 发布

狄鸠

最新推荐文章于 2024-08-29 08:59:28 发布

阅读量131

点赞数

分类专栏： 6.HTML+CSS

本文链接：https://blog.csdn.net/weixin_44038881/article/details/88388229

版权

6.HTML+CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一，CSS存放位置

行内标签（不利于维护，耦合度高，让代码变的非常臃肿）
```
  <p style="color: red;font-size: 15px">我是一个p标签</p>
```

内部style标签（写在head标签内的style标签内，通过选择器控制，也有一定耦合度）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
      .p1{
          color: yellow;
          font-size:20;
          background-color:red;
      }
</style>
</head>
<body>
<p class="p">我是一个段落标签</p>
</body>
</html>

样式 = 选择器 + {}（声明）

写在标签内部的属性是html属性

写在style标签内的的是css属性

外部样式（开发常用，利于查看标签的样式）

 <link rel="stylesheet" href="相对路径">	  
 
 rel : 声明文档类型：层叠样式表（css）
 
 css层叠样式表：下面相同的属性会覆盖上面的属性，优先级高的覆盖优先级低的；

css文件配置：

@charset "utf-8";

p{
    color:red;				/*字体颜色*/
    background-color:red;	/*背景颜色*/
}
......

二，CSS选择器

标签选择器

<style>
	p{
        color:red;
        background-color:blue;
	}
</style>
<p>我是p标签</p>

<!--标签选择器：通过标签名字选择标签-->

id选择器（控制单个标签）

<style>
	#p1{
        color:red;
        background-color:blue;
	}
</style>
...
<p id="p1">我是p标签</p>

<!--id选择器：通过id名字选择标签,具有唯一性-->

类名选择器（控制多个标签相同的元素）

<style>
	.p1{background-color:blue;}
    .p2{color:blue;}
    .p3{color:green;}
</style>
...
<p class="p1 p2">我是p标签</p>	<!--拥有p1选择器的背景颜色和p2选择器的字体颜色-->
<p class="p1 p2">我是p标签</p>  <!--拥有p1选择器的背景颜色和p3选择器的字体颜色-->

<!--类名选择器：可以控制多个标签-->
<!--相同类名控制相同样式，不同类名控制不同样式-->
<!--若一个标签属于有多个类名，处在后面的类名里的样式会覆盖与前面类名相同的样式-->

通配符（全）选择器

<style>
    *{border:px solid red;}
</style>

<!--所有的标签都会被选择，但是优先级是最低的-->

 总结：1. 三种样式的优先级：行内样式>外部样式=内部样式（内外部样式优先级相同，能相互覆盖）
 
 	    2. 选择器优先级：id选择器>类名选择器>tag(标签)选择器>全选择器
 
 	    3. 优先级高的选择器里的样式，会覆盖优先级低的选择器里的相同的样式！(剩下的继承下来)
 
 	    4. 若一个标签有多个类名，处在后面的类名里的样式会覆盖与前面类名相同的样式

选择器命名规则：

		1. 见名知意 看到名字就知道这个标签的作用；
		2. 不能用拼音，中文，也不能数字开头，也不要用特殊符号
		3. 建议英文小写开头
		4. -连词符号(_不建议使用)，第二个英文单词开头大写，searchBar：驼峰命名
		5. 不能命名带有广告等英文的单词，如：ad，adv，adver，advertising，防止被过滤

三，组合选择器(各种选择器配合使用)

后代选择器（作用于儿子，孙子，真孙…）

<style>
    p span{				/*后代选择器，作用于p标签里 包括span标签在内的所有后代标签*/
        color:red;
    }
    body span{			/*后代选择器，代表body标签的后代 span标签在内的所有后代*/
        color:red;
    }
    .p1 span{
        color:blue;
    }
    .p1 #span p1{
        ......   
    }
</style>
...
<p>我是p标签 <span>我是span标签</span> </p>
<p class="p1">我是p标签<span>我是span标签</span></p>
<p>我是p标签</p>
<span>我是span标签</span>

<!--只有是p标签里的span标签和span标签的后代才会发生变化-->

子代选择器（只控制子元素）

<style>
    p>span{				/*子代选择器，只作用于p标签的儿子 span标签 */
        color:red;
    }
    body>span{			/*子代选择器，只作用于body标签的的儿子 span标签*/
        color:red;
    }
    #p1>span{
        color:blue;
    }
</style>
<p>我是p标签 <span>我是span标签</span> </p>
<p id="p1">我是p标签<span>我是span标签</span></p>
<p>我是p标签</p>
<span>我是span标签</span>

邻居选择器

<style>
    p + span{
        background-color:red;
    }
</style>
<p>我是p标签 <span>我是span标签</span> </p>
<p>我是p标签</p>
<p>我是p标签</p>
<span>我是span标签</span>
<p>我是p标签</p>

<!--作用于p标签（不含）下面的单个邻居span标签--><!--若有连续的span标签，一起作用-->

兄弟选择器

<style>
    p ~ span{
        background-color:red;
    }
    .p1 ~ span.span1{
        ...
    }
</style>
<p>我是p标签 <span>我是span标签</span> </p>
<p>我是p标签</p>
<p>我是p标签</p>
<span>我是span标签</span>
<p>我是p标签</p>
<span>我是span标签</span>

<!--选择p标签（不含）下面的所有兄弟span标签（不包括span标签里的后代标签）-->

多元素选择器

![Snipaste_2019-03-09_22-25-42](D:\python\web前端笔记和导图\3，CSS选择器\笔记辅图\Snipaste_2019-03-09_22-25-42.png)<style>
    p,span{
        background-color:red;
    }
</style>
<p>我是p标签 <span>我是span标签</span> </p>
<p>我是p标签</p>
<p>我是p标签</p>
<span>我是span标签</span>
<p>我是p标签</p>
<span>我是span标签</span>

<!--相当于多个标签选择器整合成一个选择器，快捷方便-->