css选择器的优先级，以及用法

阿巴的光之逆子

已于 2022-09-13 11:19:25 修改

阅读量1.7w

点赞数 23

分类专栏： css 文章标签： css3 css

于 2021-11-27 11:23:55 首次发布

本文链接：https://blog.csdn.net/hellow_tommer/article/details/121566718

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

提示：部分内容仅个人的理解，若您觉得有误，欢迎提出。

一.css选择器

1.！important 优先级10000
2.内联选择器 优先级1000
3.ID选择器 优先级100
4.类别选择器 优先级10
5.属性选择器 优先级10
6.伪类 优先级10
7.元素选择器 优先级1
8.通配符选择器 优先级0
9.继承选择器 没有优先级

二.css选择器优先级排序

！important>内联选择器>ID选择器>类别选择器>属性选择器>伪类
>元素选择器>通配符选择器>继承选择器

有点长，为了方便看，就写成了两排，这里再写一遍吧。

！important>内联选择器>ID选择器>类别选择器>属性选择器>伪类>元素选择器>通配符选择器>继承选择器

三.css选择器的总结

1. ！important

! important这个规则对Ie6.0,Ie7.0和Firefox能写hack，作用是提高指定样式规则的应用优先权（优先级）

2.内联选择器

内联选择器可以将CSS样式写在元素的style属性当中，样式直接写入到style的属性中，这种样式成为内联样式表，内联样式只能对当前的元素的当中的内容起作用，不方便复用，它属于结构与表现耦合，不方便后期的维护。

3.id选择器

id选择器是通过元素的id属性值选中唯一的元素。(id就像一个人的身份证，没有重复的),用"#"选中。

html:

<div id="one">

      你好！

</div>

css:

#one{
    color:red
}

4.类别选择器

类别选择器是通过class属性去选中元素，class能选中多个元素。标识符为“ . ”

html:

<div  class="two" >
        你好！
</div>

<div class="three">
       你好！
</div>

<div  class="two" >
       你喜欢吃什么？
</div>

<div class="three">
        你喜欢吃什么？
</div>

css:

.two{
    color:#ffffff;
    background:blue;
    font-weight:600;
}

.three{
    color:#ffffff;
    background:green;
    font-weight:600;
}

5.属性选择器

属性选择器就是通过属性选中元素的

第一种:

用 "[属性]":

<!DOCTYPE html>
<html>
    <head>
        <style>
            [title] {
                color:blue;
             }
        </style>
    </head>
    <body>
        <h1 title="Hello world">Hello world</h1>
        <h2 title="name">你好！</h2>
        <p>Hello!</p>
        <a title="url" href="" >url</a>
    </body>
</html>

第二种:

[ 属性=值 ]

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <style>
            [title=one] {
            	border:5px solid green;
            }
        </style>
    </head>
    <body>
         <img title="one" src="https://img-blog.csdnimg.cn/0a07fc2c200f44a89e5cf00984f9b0b1.gif" width="270px" height="270px" />
         <br>
		 <br>
         <a title="one" href="">one</a>
		 <br>
		 <br>
		 <div title="two" >你好!</div>
         <p title="two">Hi!</p>
    </body>
</html>

运行一下，将会看到：

应该能看清楚吧？title名为one的元素上加了一个边框。而其他不为one的，则没有加。

第三种:

[属性~=值] 属性中包含独立的单词

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<style>
			[title~=one]{
				color:blue;
			} 
		</style>
	</head>

	<body>
		<h1 title="two one">你好！</h1>
		<br>
		<p title="one three">你好！</p>
		<br>
		<p title="two">你好！</p>
	</body>
</html>

运行一下，将会看到：

title属性中带有one的，都变为蓝色字体。而其他的没有改变。注意:属性中包含独立的单词，这种词与词之间要有空格，否则不会选中。

第四种:

[属性|=值] 属性中必须是完整且唯一的单词，或用" - "隔开

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8"> 
            <style>
                [lang|=one] {
	                background:#72D1FF;
	                font-weight:600;
	                text-align:center;
                }
            </style>
        </head>

    <body>
        <p lang="one">你好</p>
        <p lang="eson">你好！</p>
        <p lang="one-gb">嗨!</p>
        <p lang="us">你好!</p>
        <p lang="neo">你好!</p>
    </body>
</html>

运行后，可看到:

lang属性里面有one的，都改变了样式，其他的则没有，还需要注意的是，属性中必须是完整且唯一的单词，或用" - "隔开，如果中间是空格或其他的符号，也无法选中。

第五种:

[属性*=值] 属性中做字符串拆分，只要能拆出来 value 这个词就行

<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8"> 
       <style>
          [title*=one] {    
	          color:blue;
          }
       </style>
    </head>

    <body>
        <p title="one">你好!</p>
        <p title="oneeeeee">你好!</p>
        <p title="oooneee">你好!</p>
        <p title="eon">你好!</p>
        <p title="nowee">你好!</p>
	    <p title="ooonnneee">你好!</p>
    </body>
</html>

运行可得：

不难看出，只要有这个单词，不管是在整个值的中间，还是边缘，都可选中。

第六种:

[属性^=值] 属性的前几个字母是值就可以

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<style>
			[title^=one] {
				color:blue;
			}
		</style>
	</head>

	<body>
		<p title="one">你好!</p>
		<p title="oneeeeee">你好!</p>
		<p title="oooneee">你好!</p>
		<p title="eon">你好!</p>
		<p title="nowee">你好!</p>
		<p title="ooonnneee">你好!</p>
	</body>
</html>

运行后:

第七种

[属性$=值] 属性以值结尾就行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<style>
			p[title$=one] {
				color:blue;
			}
		</style>
	</head>

	<body>
		<p title="one">你好!</p>
		<p title="oneeeeeeone">你好!</p>
		<p title="oooneee">你好!</p>
		<p title="eon">你好!</p>
		<p title="nowee">你好!</p>
		<p title="ooonnneee">你好!</p>
	</body>
</html>

运行后:

表单样式

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8"> 
            <style>
                input[type="text"] {
	                 width:150px;
	                 display:block;
	                 margin-bottom:10px;
	                 background-color:yellow;
                }

                input[type="button"] {
	                width:120px;
	                margin-left:35px;
                	display:block;
                }
            </style>
         </head>
     <body>

       <form name="input" action="demo-form.php" method="get">
            你好:<input type="text" name="fname" value="你好" size="20">
            你好:<input type="text" name="lname" value="嗨" size="20">
             <input type="button" value="点击">

        </form>
    </body>
</html>

运行可得:

6.伪类选择器

https://blog.csdn.net/hellow_tommer/article/details/121601810

7.元素选择器

最常见的 CSS 选择器就是元素选择器。设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            html {color:black;}
            h1 {color:blue;}
            h2 {color:silver;}
        </style>
    </head>

    <body>
        <h1>你好</h1>
        <h2>你好！</h2>
        <p>你好！</p>
    </body>
</html>

8.通配符选择器

通配符使用星号*表示，意思是“所有的

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
          *{color:blue}
        </style>
    </head>

    <body>
        <h1>你好</h1>
        <h2>你好！</h2>
        <p>你好！</p>
    </body>
</html>