构造选择器

作用

配合css或js实现样式更改等效果

选择器的构造

通常位于开始标签中使用id或class构造，此外还有标签本身也视为选择器

选择器的分类

标签选择器

顾名思义，按照元素标签选择元素

css
h1 {
  color: blue;
}

类名选择器

按照元素开始标签中设置的类名选择元素

css
.nav-box {
  width: 200px;
  height: 75px;
}

id选择器

按照元素中id设置选择器
一个页面中只会出现一次id元素

css
#hed {
  width: 100px;
  height: 200px;
}

后代选择器

适用于多个div嵌套时
此选择器会影响元素所有后代元素

Eg：

HTML代码

html
<div class="hed">
  <div class="header-box">
  </div>
   <div class="header-box">
      <div class="header-box">
  </div>
  </div>
</div>

CSS代码

css
/*会影响hed中所有header-box元素*/
.hed .header-box{
  width: 100px;
  height: 200px;
}

子元素选择器

适用于多个div嵌套时
此选择器只影响父元素后子元素

Eg：

HTML代码

html
<div class="hed">
  <div class="header-box1">
  </div>
   <div class="header-box2">
      <div class="header-box3">
  </div>
  </div>
</div>

CSS代码

css
/*只会影响hed元素的子元素header-box1*/
.hed>.header-box1{
  width: 100px;
  height: 200px;
}

按相邻同胞元素选择要格式化的元素

同胞元素指拥有同一父元素的任何类型的子元素；相邻同胞元素是直接相互毗邻的元素，即它们之间没有其他的同胞元素

使用CSS相邻同胞结合符可以选择直接跟在指定的同胞元素后面的同胞元素

Eg：

HTML

html
<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li><!--2-->
    <li>List item 3</li><!--3-->
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li><!--2-->
    <li>List item 3</li><!--3-->
  </ol>
</div>

CSS3

css
li + li {font-weight:bold;}

最终会使得2和3被添加加粗效果，【应位CSS中使用的同胞元素选择器，会使得无序列表第一个li毗邻的第二个li加粗，第二个li毗邻的第三个li加粗；同样，在有序列表按中同样如此】

选择第一个或最后一个子元素

适用于选择某元素的第一个或最后一个子元素
选择某元素的第一个子元素
Eg
HTML

html
div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li><!--2-->
    <li>List item 3</li><!--3-->
  </ul>
</div>

CSS

css
li:first-child {
  border: 2px solid black;
}

选择某元素的最后一个子元素
Eg
HTML

html
div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li><!--2-->
    <li>List item 3</li><!--3-->
  </ul>
</div>

CSS

css
li:last-child {
  border: 2px solid black;
}

伪元素

用于选择元素的第一个字母或第一行,可以实现首字母大写效果

Eg:
选择元素的第一个字母并将字体颜色设为红色

css
p:first-letter {
  color:red
}

从元素开始插入字母H

css
p:after {
  content:"H"
}

伪类选择符

链接常用伪类

根据链接的当前状态对它们进行格式化，连接状态包括鼠标悬停、链接是否被访问
第一步：输入a标签
第二部：输入冒号
第三步：设置链接状态

输入link以设置从未被激活或指向，当前也没有被激活或指向的链接的外观

css
a:link {
    color: blue;
}

输入visited以设置链接访问后的样式

css
a:visited {
    color: black;
}

输入hover设置鼠标悬停时的样式

css
a:hover {
    color: blue;
}

输入active设置鼠标点击时的样式

css
a:active {
    color: blue;
}

注意
应该始终按照lvha这种顺序定义链接的样式，以避免链接处于多种状态

二级菜单

html
<ul>
  <li>
    <ul class="two_nav"></ul>
  </li>
</ul>

对应CSS


.two_nav {display: none;}
.ul>li:hover .two_nav {display: block;}

表单伪类

"用于选取获得焦点的表单元素

css
input:focus {
    border: 2px solid blue;
}

按属性选择元素

可以对具有给定属性或属性值的元素进行格式化
Eg:
HTML

html
element[attribute 条件] {
    color: red;
}

说明
element: 表示标签或类名
attribute: 元素所需要考察的属性

class
lang
href
src 条件

选择器	属性值
[attribute]	匹配指定属性，不论具体值什么
[attribute="value"]	完全匹配指定的属性值
[attribute~="value"]	属性值是以空格分隔的多个单词，其中有一个完全匹配指定值
[attribute管道符="value"'']	属性值以value-开头
[attribute^="value"]	选择attribute属性值以value开头（作为完整的单词，或单词的一部分）的元素将被选中
[attribute$="value"]	属性值以value结尾（作为完整的单词、或单词的一部分）的元素将被选中
[attribute*="value"]	选择attribute属性值包含指定值的元素

结构化伪类

常用的是nth-chid选择符，常用于为表格交替应用样式
括号内的值为：

odd-奇数
even-偶数
数值,若为2则表示对第二行使用指定样式
表达式，若表达式为3n+4，表示先选择第四行使用样式，然后n从0开始不断循环【3x0+4=4，3x1+4=7,一直循环直到不再有元素可以匹配为止】

css
tr:nth-child(odd) {
    color: red;
}

选择器的优先级

内联样式>id选择器>类选择器>标签选择器>通配符选择器

权重

!important,加在样式属性值后，权重值为10000
内联样式，如：style=""，权重值为1000
ID选择器，如：# content权重为0100
类，伪类，属性选择器如：content、：hover权值为0010
标签选择器和伪元素选择器，如：div、p、：before权值为0001
通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~)权值为0000

权重计算方式

CSS优先级规则

css选择规则的权值不同时，权值高的优先
css选择规则的权值相同时，后定义的规则优先
css属性后面加!important时，无条件绝对优先

计算公式

权值 = 第一等级选择器个数，第二等级选择器个数，第三等级选择器个数，第四等级选择器个数

权重比较规则

进行权重比较时，从高到低逐级将等级位上的权重值进行比较，且低等级的选择器，个数再多也不会越等级超过高等级的选择器的优先级的

简而言之

先从高等级位进行比较，高等级位相同时，再比较低等级位的，以此类推
完全相同的话，就采用后者优先原则（也就是样式覆盖）
css属性后面加!important时，无条件绝对优先（比内联样式还要优先）

Eg

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 权重1
         * qz1= 100+1 =101
        */
       #box p {color: red;}
       /* 权重2
        * qz2=1+10*10+1=102
        */
       div .a.b.c.d.e.a1.b2.c3.d4.e5 {color: blue;}
       /*按道理qa1<qz2，所以颜色为蓝色,但实际为红色
        * why?
        * 权重比较的是高到低逐级将等级位上的权重值，低等级的选择器，个数再多也不会越等级超过高等级的选择器的优先级的;
       */
    </style>
</head>
<body>
<div id="box">
    <p class="a b c d e a1 b2 c3 d4 e5">
        123
    </p>
</div>
</body>
</html>

目录