| css选择器的优先级，以及用法 | 您所在的位置：网站首页 › css选择器中优先级最高的是哪个 › css选择器的优先级，以及用法 |
css选择器的优先级，以及用法
|
目录
前言 一.css选择器 二.css选择器优先级排序 三.css选择器的总结 1. ！important 2.内联选择器 3.id选择器 4.类别选择器 5.属性选择器(内容较多) 6.伪类选择器 7.元素选择器 8.通配符选择器 9.继承选择器 总结 前言提示：部分内容仅个人的理解，若您觉得有误，欢迎提出。 一.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: 你好！css: #one{ color:red } 4.类别选择器类别选择器是通过class属性去选中元素 ，class能选中多个元素。标识符为“ . ” html: 你好！ 你好！ 你喜欢吃什么？ 你喜欢吃什么？css: .two{ color:#ffffff; background:blue; font-weight:600; } .three{ color:#ffffff; background:green; font-weight:600; } 5.属性选择器属性选择器就是通过属性选中元素的 第一种: 用 "[属性]": [title] { color:blue; } Hello world 你好！Hello! url第二种: [ 属性=值 ] [title=one] { border:5px solid green; }
one
你好!
Hi! 运行一下 ，将会看到：
应该能看清楚吧？title名为one的元素上加了一个边框。而其他不为one的，则没有加。 第三种: [属性~=值] 属性中包含独立的单词 [title~=one]{ color:blue; } 你好！你好！ 你好！ 运行一下 ，将会看到：
title属性中带有one的，都变为蓝色字体。而其他的没有改变。注意:属性中包含独立的单词，这种词与词之间要有空格，否则不会选中。 第四种: [属性|=值] 属性中必须是完整且唯一的单词，或用" - "隔开 [lang|=one] { background:#72D1FF; font-weight:600; text-align:center; }你好 你好！ 嗨! 你好! 你好! 运行后，可看到:
lang属性里面有one的，都改变了样式，其他的则没有，还需要注意的是，属性中必须是完整且唯一的单词，或用" - "隔开，如果中间是空格或其他的符号，也无法选中。 第五种: [属性*=值] 属性中做字符串拆分，只要能拆出来 value 这个词就行 [title*=one] { color:blue; }你好! 你好! 你好! 你好! 你好! 你好! 运行可得：
不难看出，只要有这个单词，不管是在整个值的中间，还是边缘，都可选中。 第六种: [属性^=值] 属性的前几个字母是值就可以 [title^=one] { color:blue; }你好! 你好! 你好! 你好! 你好! 你好! 运行后:
第七种 [属性$=值] 属性以值结尾就行 p[title$=one] { color:blue; }你好! 你好! 你好! 你好! 你好! 你好! 运行后:
表单样式 input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; } input[type="button"] { width:120px; margin-left:35px; display:block; } 你好: 你好:运行可得:
https://blog.csdn.net/hellow_tommer/article/details/121601810 7.元素选择器最常见的 CSS 选择器就是元素选择器。设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身 html {color:black;} h1 {color:blue;} h2 {color:silver;} 你好 你好！你好！ 8.通配符选择器通配符使用星号*表示，意思是“所有的 *{color:blue} 你好 你好！你好！ 9.继承选择器 总结 |
【本文地址】