css：超全选择器详细介绍以及优先级

牛奶面包吖

已于 2023-04-10 13:56:09 修改

阅读量2.8k

点赞数 5

分类专栏： css 文章标签： css3 css web 前端

于 2022-10-04 19:26:43 首次发布

本文链接：https://blog.csdn.net/qq_50487248/article/details/127162125

版权

本文详细介绍了CSS选择器的各类用法，包括简单选择器（标签、ID、类）、复合选择器、属性匹配选择器、伪类选择器、关系选择器和伪元素选择器。同时，阐述了不同选择器的优先级规则，如内联样式>内嵌样式=外联样式>导入样式，以及ID选择器>类选择器>标签选择器。通过对各种选择器的示例演示，帮助读者掌握CSS选择器的运用。

摘要由CSDN通过智能技术生成

1. 引入css的四种方式

内联、内嵌、外联、导入
1、外联：用link标签外联写好的css文件

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

2、内嵌：在style标签里写css

    <style>
        /*在这里写css*/
        h1{
     
            color: coral;
        }
        </style>

3、导入：在style用import导入写好的css文件

<style>
        /*导入*/
        /*@import "css/first.css";*/
 
        </style>

4、内联：直接在标签属性后加上style属性值，写样式

<h1 style="color: red">我是标签</h1>

1.1优先级：内联>内嵌=外联>导入

代码的顺序以及选择器的优先级会影响页面的样式效果。内嵌和外联的优先级一样，但是根据就近原则以及代码的执行效果。

2. css选择器

选择器的语法结构为：

选择器 {
            属性：属性值；
        }

2-1 简单选择器

2-1-1 标签选择器

标签选择器如；如：body,div,p,ul,li，h1{}

h1{
            color: red;
            font-size: 10px;
        }

2-1-2 id选择器

id选择器以"#"开头，后面跟选择器所取名字

#d1{
            color: coral;
            font-size: 18px;
        }
 <h1 id="d1">这是id选择器</h1>

优先级：id选择器的优先级>类选择器>标签选择器
选择器不同的条件下，会先执行选择器的优先级而影响到引入的执行顺序

2-1-3 类选择器（class）

类选择器class，以"."开头，后面跟选择器所取名字

.nv{
          color: crimson;
        }
<h1 class="nv">这是类选择器</h1>

2-2 复合选择器

复合选择器由多种简单选择器组成

2-2-1 并集选择器

简答选择器用逗号","隔开，表示同时选中多个元素。

h1,h2,h3{
            color: red;
            }

2-2-2 交集选择器

选择的元素要同时满足多个条件。表示既能被选择器1选中，又能被选择器2选中。
注意选择器之间要紧挨着，同时若有标签选择器，标签选择器必须放在前面

<style>
	p.pink{
     
           	 color: green;
        	 }      
	p.pink,div p{
       
            font-size: 20px;
            color: purple;
             }
</style>
<body>
<div>
    <p>我是第一个文本</p>
</div>
<p class="pink">我是一个p标签</p>
</body>

2-3 属性匹配选择器

1.原生属性[]
2.自定义属性[]
3.开头匹配^
4.结尾匹配$
5.包含匹配*

2-3-1 全匹配

<style>
	input[type='text']{
     
        background-color:red;
    }
</style>
<body>
   <input type="text">
</body>

效果图：
在这里插入图片描述

2-3-2 自由匹配

<style>
div[wode='nihao']{
     
       width:100px;
       height:100px;
       background-color:red;
   }
</style> 
<body>
<div wode="nihao">我是自定义的div</div>
</body>

效果图：
在这里插入图片描述

2-3-3 开头匹配符号为^

选择以ni开头的div：

<style>
div[wode^='ni']{
     
        width:100px;
        height:100px;
        background-color:green;
    }
</style>
<body>
<div wode="nihao"

最低0.47元/天解锁文章