Css 选择器与权重

引入 CSS

行间引入

1
2
<div style = "width:100px;height:100px;>
</div>

页面级引入(内嵌式)

  • <head></head> 之间
1
2
3
4
5
6
7
<style type="css/text">
.text{
font-size: 20px;
padding-left: o;
margin: 0 auto;
}
</style>

导入式

  1. 在style元素中导入CSS文件
1
2
3
4
<style type="text/css">    
@import "CSS样式文件的绝对地址";
@import url("样式文件的绝对地址");
</style>
  1. 在CSS文件中再导入CSS文件
1
2
3
4
5
6
7
8
/*某个CSS文件*/
@import "另一个CSS文件的地址";
.test{
width: 100px;
height: 100px;
line-height: 20px;
background-color: red;
}

链接式

  • 网页的 <head></head> 标签对中使用<link> 标记来引入外部样式表文件
1
<link type="text/css" rel="stylesheet" href="CSS样式文件的地址">

选择器

基础选择器

选择器含义实例
*通用选择器,匹配任何元素*{font-size:16px;}
E标签选择器,匹配所有使用E标签的元素p{font-family:arial;}
.errorclass选择器,匹配所有class属性中包含error的元素.error{font-weight:bold;}
#correctid选择器,匹配所有id属性值为correct的元素#correct{font-style:italic;}
  • id(唯一)
1
2
3
<div id="only>
123
</div>
1
2
3
#only{
background-color: red;
}
  • class
1
2
3
<div class="only>
123
</div>
1
2
3
.only{
background-color: red;
}
  • 可以有多个 class

标准选择器

  • 会选择所有相同元素
1
2
3
4
<div>123
</div>
...
<span>123
1
2
3
4
5
6
div {
background-color: red;
}
span{
background-color: green;
}

通配符选择器

  • 会匹配所有的元素
1
2
3
<div></div>
...
<span></span>
1
2
3
4
*{
margin:0px;
padding:0px;
}

组合选择器

选择器含义实例
E,F多元素选择器,同时匹配所有E元素或F元素div,p{background-attachment:fixed;}
E F后代元素选择器,匹配所有属于E元素的后代F元素div a{background-color:blue;}
E > F子元素选择器,匹配所有E元素的子元素Fdiv>p{background-image:url(xxx.gif)}
E+F毗邻元素选择器,匹配所有紧随E元素之后的同级元素Fp+div{background-position:x% y%}
  • 父子选择器/派生选择器
1
2
3
4
<div>
<span>
</span>
</div>
1
2
3
div span{
background-color: red;
}
  • 直接子元素选择器
1
2
3
4
5
6
<div>
<em>134</em>
<strong>
<em>323</em>
</strong>
</div>
1
2
3
div > em{
background-color: green;
}
  • 并列选择器
1
2
3
<div>1</div>
<div class ="demo">2</div>
<p class = "demo1">3</p>
1
2
3
div.demo{
background-color: green;
}
  • 分组选择器
1
2
3
<em>1</em>
<strong>2</strong>
<spam>3</spam>
1
2
3
4
5
em,
strong,
span{
background-color: red;
}

伪类选择器

选择器含义
E:first-child匹配父元素E下的第一个子元素
E:link匹配所有未被点击的链接
E:visited匹配所有已被点击的链接
E:active匹配鼠标已经按下、还没有释放的E元素
E:hover匹配鼠标悬停其上的E元素
E:focus匹配获得当前焦点的E元素
E:lang(c)匹配lang属性等于c的E元素

属性选择器

选择器含义实例
E[att]匹配所有具有att属性的E元素p[style]{background-repeat:repeat-y;}
E[att=val]匹配所有att属性等于“val”的E元素div[class=”c1”]
E[att~=val]匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素div[class~=c2]
E[att|=val]匹配所有att属性具有多个连字号分隔(hyphen-separated)的值、其中一个值以“val”开头的E元素p[lang|=en]

伪元素

选择器含义实例
E:first-line匹配E元素的第一行p:first-line{color:red;}
E:first-letter匹配E元素的第一个字母.c1:first-letter{color:blue;}
E:before在E元素之前插入生成的内容.ctn before{content:””;display:block;;height:40px;width:40px;}
E:after在E元素之后插入生成的内容.ctn after{content:””;display:block;;height:40px;width:40px;}

选择器的权重

  • !important > 行间样式 > id > class | 属性 > 标签选择器 > 通配符
选择器权重
!importantInfinity
行间样式100
id100
class、属性、伪累10
标签、伪属性1
通配符0

权重的计算

  1. 在比较样式的优先级时,只需统计选择符中的id、class和标签名的个数,然后把相应的权值相加即可,最后根据结果排出优先级
  2. 权值较大的优先级越高,权值相同的,后定义的优先级较高,样式值含有!important,优先级最高
    • div .class1 #people 的权值等于 1+10+100=111

颜色的三种方法

纯英文单词

1
color: red

十六进制颜色

#RRGGBB,其中 RR(红色),GG(绿色)和 BB(蓝色)。所有值必须介于0和FF之间。

1
color: #ff4040
  • 两位相同可以缩写
1
color: # f40;

RGB

RGB(红,绿,蓝)。每个参数(红色,绿色和蓝色)定义颜色的亮度,可在0和255之间,或一个百分比值(从0%到100%)之间的整数。

1
background-color:rgba(255,0,0,0.5);

参考