css选择器优先级顺序(css样式选择器有哪些)

css选择器优先级顺序

在看css选择器优先级顺序前，我们先来简单说说css基本选择器有哪些？
1、标记选择器（如：body,div,p,ul,li）
2、id选择器（如：id=”name”,id=”name_txt”）
3、类选择器（如：id=”name”,id=”name_txt”）
4、后代选择器（如：#head.navulli从父集到子孙集的选择器）
5、子元素选择器（如：div>p,带大于号>）
6、伪类选择器（如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。）
看完了基本的css选择器类型后，我们接着来看一下css优先级的概念。
当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，用到谁的值谁的优先级就高。
我们来看一下css选择器优先级的算法：
每个规则对应一个初始”四位数”：0、0、0、0
若是行内选择符，则加1、0、0、0
若是ID选择符，则加0、1、0、0
若是类选择符/伪类选择符，则分别加0、0、1、0
若是元素选择符，则分别加0、0、0、1
算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高。
看完了上述内容，那我们就来看看css选择器优先级的具体排序。
css选择器优先级最高到最低顺序为：
1.id选择器（#myid）
2.类选择器（.myclassname）
3.标签选择器（div,h1,p）
4.子选择器（ul<li）
5.后代选择器（lia）
6.伪类选择（a:hover,li:nth-child）
最后，需要注意的是：
!important的优先级是最高的，但出现冲突时则需比较”四位数“;
优先级相同时，则采用就近原则，选择最后出现的样式;
继承得来的属性，其优先级最低。

css样式选择器有哪些

㈠什么是挑选器？
每一条css款式界说由两部分组成，形式如下：[code]挑选器{款式}[/code]在{}之前的部分便是“挑选器”。
“挑选器”指明晰{}中的“款式”的作用对象，也便是“款式”作用于网页中的哪些元素。
㈡CSS的五大挑选器
⑴标签挑选器（元素挑选器）
⑵ID挑选器（唯一性，一次引证）
⑶类挑选器（单类挑选器，多类挑选器）
⑷特点挑选器（简略特点挑选，详细特点挑选，部分特点挑选，特定特点挑选）
⑸派生挑选器（子孙挑选器(descendantselector)，子元素挑选器(childselector)，相邻兄弟挑选器(Adjacentsiblingselector)）
㈢元素挑选器（标签挑选器）
一个完好的HTML页面是由很多不同的标签组成。标签挑选器：指用HTML标签名称作为挑选器，按标签名称分类，为页面中某一类标签指定一致的CSS款式。
假如设置HTML的款式，挑选器通常将是某个HTML元素，比如p、h1、em、a，甚至能够是html自身。
例如：
html{background-color:black;}
p{font-size:30px;backgroud-color:gray;}
h2{background-color:red;}
以上css代码会对整个文档添加黑色布景；将一切p元素字体大小设置为30像素一起添加灰色布景；对文档中一切h2元素添加赤色布景。
㈣ID挑选器
⑴ID挑选器答应以一种独立于文档元素的方法来指定款式。
⑵ID挑选器能够为标有特定ID的HTML元素指定特定的款式。依据元素ID来挑选元素，具有唯一性，这意味着同一id在同一文档页面中只能呈现一次。
⑶id挑选器以”#”来界说。
例如：在css中，下面的两个id挑选器，第一个能够界说元素的颜色为赤色，第二个界说元素的颜色为黄色：
#red{color：red；}
#yellow{color：yellow；}
下面的HTML代码中，id特点为red的p元素显现为赤色，而id特点为green的p元素显现为绿色。
这个阶段是赤色。
这个阶段是黄色。
㈤类挑选器
类挑选器运用类名来挑选元素，条件是要在HTML中，给元素界说一个class的特点，class=”类名”，然后运用”.”进行标识，后面紧跟类名。
(1)单类挑选器
类挑选器答应以一种独立于文档元素的方法来指定款式。该挑选器能够独自运用，也能够与其他元素结合运用。
①修改HTML代码
在运用类挑选器之前，需求修改详细的文档标记，以便类挑选器正常作业。为了将类挑选器的款式与元素关联，必须将class指定为一个适当的值。
请看下面的HTML代码：
Thisheadingisveryimportant
Thisparagraphisveryimportant.
在上面的代码中，两个元素的class都指定为important：第一个标题（h1元素），第二个阶段（p元素）。
②语法
我们运用以下语法向这些归类的元素使用款式，即类名前有一个点号（.），然后结合通配挑选器：
*.important{color:red;}
假如只想挑选一切类名相同的元素，能够在类挑选器中忽略通配挑选器，这没有任何不好的影响：
.important{color:red;}
③结合元素挑选器
类挑选器能够结合元素挑选器来运用。
?例如，只让阶段显现为赤色文本：
p.important{color:red;}
挑选器现在会匹配class特点包括important的一切p元素，可是其他任何类型的元素都不匹配，不论是否有此class特点。
挑选器p.important解释为：“其class特点值为important的一切阶段”。由于h1元素不是阶段，这个规矩的挑选器与之不匹配，因而h1元素不会变成赤色文本。
?例如：为h1元素指定不同的款式，能够运用挑选器h1.important：
p.important{color:red;}
h1.important{color:blue;}
⑵多类挑选器
在HTML中，一个class值中或许包括一个词列表，各个词之间用空格分隔。
例如，假如期望将一个特定的元素一起标记为重要（important）和正告（warning），就能够写作：
Thisparagraphisveryimportantwarning.
注：这两个词的次序无关紧要，写成warningimportant也能够。
假设class为important的一切元素都是粗体，而class为warning的一切元素为斜体，class中一起包括important和warning的一切元素还有一个银色的布景。
就能够写作：
.important{font-weight:bold;}
.warning{font-style:italic;}
.important.warning{background:silver;}
通过把两个类挑选器链接在一起，仅能够挑选一起包括这些类名的元素（类名的次序不限）。
假如一个多类挑选器包括类名列表中没有的一个类名，匹配就会失利。
㈥特点挑选器
特点挑选器能够依据元素的特点及特点值来挑选元素。
⑴简略特点挑选
假如期望挑选有某个特点的元素，而不论特点值是什么，能够运用简略特点挑选器。
比如1:把包括标题（title）的一切元素变为赤色，能够写作：
*[title]{color:red;}
比如2:只对有href特点的锚（a元素）使用款式：
a[herf]{color:red;}
比如3:依据多个特点进行挑选，只需将特点挑选器链接在一起即可。
为了将一起有href和title特点的HTML超链接的文本设置为赤色，能够这样写：
a[herf][title]{color:red;}
比如4:对一切带有alt特点的图像使用款式，然后突出显现这些有用的图像：
img[alt]{border:5pxsolidred;}
⑵依据详细特点值挑选
比如1:将指向Web服务器上某个指定文档的超链接变成赤色，能够这样写：
a[href=”http://www.baidu.com”]{color:red;}
比如2:把多个特点-值挑选器链接在一起来挑选一个文档。
a[href=”http://www.baidu.com”][title=”baidu”]{color:red;}
这会把第一个超链接的文本变为赤色，可是第二个或第三个链接不受影响：
留意：这种格式要求必须与特点值完全匹配。
假如特点值包括用空格分隔的值列表，匹配就或许出问题。
⑶依据部分特点值挑选
假如需求依据特点值中的词列表的某个词进行挑选，则需求运用波浪号（~）。
挑选class特点中包括important的元素，能够用下面这个挑选器做到这一点：
p[class~=”important”]{color:yellow;}
留意：假如忽略了波浪号，则说明需求完成完全值匹配。
⑷特定特点挑选类型
举例：*[lang|=”en”]{color:red;}
上面这个规矩会挑选lang特点等于en或以en-最初的一切元素。因而，以下示例标记中的前三个元素将被选中，而不会挑选后两个元素：
㈦子孙挑选器
⑴子孙挑选器（descendantselector）又称为包括挑选器。子孙挑选器能够挑选作为某元素子孙的元素。
⑵在子孙挑选器中，规矩左面的挑选器一端包括两个或多个用空格分隔的挑选器。挑选器之间的空格是一种结合符（combinator）。
⑶每个空格结合符能够解释为“…在…找到”、“…作为…的一部分”、“…作为…的子孙”，可是要求必须从右向左读挑选器。
举例：只对h1元素中的em元素使用款式，能够这样写：
h1em{colopr:red;}
⑴上面这个规矩会把作为h1元素子孙的em元素的文本变为赤色。其他em文本（如阶段或块引证中的em）则不会被这个规矩选中.
⑵h1em挑选器能够解释为“作为h1元素子孙的任何em元素”。假如要从左向右读挑选器，能够换成以下说法：“包括em的一切h1会把以下款式使用到该em”。
详细使用：
能够使HTML中不或许完成的使命成为或许。假设有一个文档，其中有一个边栏，还有一个主区。边栏的布景为蓝色，主区的布景为白色，这两个区都包括链接列表。不能把一切链接都设置为蓝色，由于这样一来边栏中的蓝色链接都无法看到。解决方法是运用子孙挑选器。在这种情况下，能够为包括边栏的div指定值为sidebar的class特点，并把主区的class特点值设置为maincontent。
编写以下款式：
div.sidebar{background:blue;}
div.maincontent{background:white;]
div.sidebara:link{color:white;}
div.maincontenta:link{color:blue;}
㈧子元素挑选器
⑴子元素挑选器（Childselectors）只能挑选作为某元素子元素的元素。
⑵不期望挑选恣意的子孙元素，而是期望缩小范围，只挑选某个元素的子元素，请运用子元素挑选器（Childselector）。
⑶子挑选器运用了大于号（子结合符）。子结合符两头能够有空白符，这是可选的。
例如：挑选只作为h1元素子元素的strong元素，能够这样编写：
h1>strong{color:red;}
假如从右向左读，挑选器h1>strong能够解释为“挑选作为h1元素子元素的一切strong元素”。
这个规矩会把第一个h1下面的两个strong元素变为赤色，可是第二个h1中的strong不受影响：
㈨相邻兄弟挑选器
⑴相邻兄弟挑选器（Adjacentsiblingselector）可挑选紧接在另一元素后的元素，且二者有相同父元素。
⑵相邻兄弟挑选器运用了加号（+），即相邻兄弟结合符（Adjacentsiblingcombinator）。与子结合符一样，相邻兄弟结合符周围能够有空白符。
例如：假如要添加紧接在h1元素后呈现的阶段的上边距，能够这样写：
h1+p{margin-top:50px;}
这个挑选器读作：“挑选紧接在h1元素后呈现的阶段，h1和p元素具有共同的父元素”。
详细解释:请看下面这个文档树片段：
在上面的片段中，div元素中包括两个列表：一个无序列表，一个有序列表，每个列表都包括三个列表项。这两个列表是相邻兄弟，列表项自身也是相邻兄弟。
不过，第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟，由于这两组列表项不属于同一父元素（最多只能算堂兄弟）。
简略来说：ul与ol是相邻兄弟，而ul里面的列表项与ol里面的列表项不是相邻兄弟。
留意：用一个结合符只能挑选两个相邻兄弟中的第二个元素。请看下面的挑选器：
li+li{font-weight:bold;}
上面这个挑选器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。