简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home> List of blog posts> 伪类选择器与选择器权重的实例演示,盒子计算大小box-sizing属性的功能演示
Blogger Information
Blog 16
fans 0
comment 0
visits 12108
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
伪类选择器与选择器权重的实例演示,盒子计算大小box-sizing属性的功能演示
大碗宽面
Original
642 people have browsed it

一. css中的选择器及其权重

概括：当出现样式层叠时（使用不同的选择器但是匹配到的是同一个元素且设置的是同一个样式属性）由选择器的权重或者在样式表中的位置决定

1. 选择器权重

选择器的权重的值由四个独立的部分 a,b,c,d 组成。进行复合选择器的权重计算时四个部分是独立的，不会出现进位。在比较大小时按从 a-b-c-d 的顺序依次进行比较，高位相同才需要比较低位。

选择器 权重 权重等级
！important 无穷大 0
style 行内属性 1,0,0,0 1
id 选择器 0,1,0,0 2
class 类选择器 0,0,1,0 3
标签，伪元素选择器 0,0,0,1 4
通配符选择器* 0,0,0,0 5
继承的样式 没有权重 6

2.常用选择器

1. 基本/通配符选择器：

通配符选择器使用*来定义，用来匹配所以的元素，他的权重是0,0,0,0 常用于清楚浏览器默认样式

       
    
        
  1. /* 通配符选择器，可以匹配所有的元素 */
    2. 
        
  2. *{
    3. 
        
  3. padding:0;
    4. 
        
  4. margin:0;
    5. 
        
  5. box-sizing:border-box;
    6. 
        
  6. list-style:none;
    7. 
        
  7. }
    8.

2. 标签选择器

标签选择器是指用html标签名字elementName作为选择器，为页面中的某一类标签指定统一的CSS样式，他的权重是0,0,0,1,

       
    
        
  1. /* 标签选择器，为所以的li标签元素设置color颜色 */
    2. 
        
  2. li{
    3. 
        
  3. color:aqua;
    4. 
        
  4. }
    5.

3. 类选择器

类选择器使用className来定义，如果想要差异性选择不同的标签，可以使用类选择器，可以把某一些标签元素共同拥有的样式放到同一个类中。这样这些元素可以添加这个公共的类，然后也可以添加自己独有的类。

       
    
        
  1. /* 这三个元素具有相同的颜色属性，所以将他们放同一个类中 */
    2. 
        
  2. .item{
    3. 
        
  3. color:aqua;
    4. 
        
  4. }
    5. 
        
  5. /*background-color属性是第一个元素独有的样式，所以可以将他设置为一个独有的类 */
    6. 
        
  6. .first{
    7. 
        
  7. background-color:red;
    8. 
        
  8. }
    9. 
       
       
    
        
  1. class="nav">
    2. 
        
  3. item1
    4. 
        
  5. item2
    6. 
        
  7. item3
    8. 
        
  8. class="list">
    9. 
        
  9. class="item first">list1
    10. 
        
  10. class="item">list2
    11. 
        
  11. class="item last">list3
    12. 
        
    13. 
        
    14. 
        
  15. item4
    16. 
        
  17. item5
    18. 
        
  19. item6
    20. 
        
  21. item7
    22. 
        
  23. item8
    24. 
        
  25. item9
    26. 
        
    27.

4. ID选择器

id选择器用idName来定义，id选择器一般用于选择页面唯一的元素，他的权重是0,1,0,0

       
    
        
  1. /* 为id为paw的元素设置宽度样式 */
    2. 
        
  2. #paw{
    3. 
        
  3. width:50px;
    4. 
        
  4. }
    5. 
       
       
    
        
  1. for="paw">密码：type="password"name=""id="paw">
    2.

二. 伪类选择器

1. 结构伪类选择器

语法 作用
E:nth-child() 匹配的元素在括号内定义。
E:first-child 匹配的元素是其父元素的第一个子元素
E:nth-last-child() 从最后一个元素往前数。数几个括号定义
E:last-child 匹配的元素是其父元素的最后一个子元素

结构伪类选择器
结构伪类选择器用于选择具有某些特定特征的一类元素的选择器，他们的这些特征和 html 结构（在 html 中的位置）有关。他们的权重是 0,0,1,0（同类选择器）。

(1.)E:nth-child()示例

       
    
        
  1. /* nth-child 匹配子级的第几个元素，括号内定义 */
    2. 
        
  2. .nav>.list:nth-child(3){
    3. 
        
  3. color:aqua;
    4. 
        
  4. }
    5.

(2.)E:nth-last-child()示例

       
    
        
  1. /* nth-last-child 从最后一个元素往前数，括号内定义 */
    2. 
        
  2. .nav>.list:nth-last-child(4){
    3. 
        
  3. color:blue-;
    4. 
        
  4. }
    5.

(3. )E:first-child示例

       
    
        
  1. /* :first-child 匹配第一个子级元素 */
    2. 
        
  2. .nav>:first-child{
    3. 
        
  3. color:brown-;
    4. 
        
  4. }
    5.

(4.)E:last-child示例

       
    
        
  1. /* last-child匹配最后一个元素 */
    2. 
        
  2. .nav>:last-child{
    3. 
        
  3. color:blueviolet;
    4. 
        
  4. }
    5.

(5.)E:nth-child()/E:last-child()括号计算公式=a*n + b

       
    
        
  1. /*a= 0,1,2,3,...
    2. 
        
  2. n= 0,1,2,3,...
    3. 
        
  3. b= 从0开始...
    4. 
        
    5. 
        
  5. an + b =a*n +b*/
    6. 
        
    7. 
        
  7. /* 偶数 even =2n
    8. 
        
  8. 奇数 odd =2n+1 */
    9.

示例1

       
    
        
  1. /* 获取前五个 a=-1 反向 */
    2. 
        
  2. .nav>:nth-child(-n+5){
    3. 
        
  3. color:blueviolet;
    4. 
        
  4. }
    5.

示例2

       
    
        
  1. /* 获取后五个 */
    2. 
        
  2. .nav>:nth-last-child(-n+5){
    3. 
        
  3. color:blueviolet;
    4. 
        
  4. }
    5.

示例3

       
    
        
  1. /* 获取双数 */
    2. 
        
  2. .nav>:nth-last-child(2n){
    3. 
        
  3. color:blueviolet;
    4. 
        
  4. }
    5.

ps:双数可以用even表示

示例4

       
    
        
  1. /* 获取单数 */
    2. 
        
  2. .nav>:nth-last-child(2n+1){
    3. 
        
  3. color:blueviolet;
    4. 
        
  4. }
    5.

ps:双数可以用odd表示

2. 状态伪类选择器

语法 作用
:hover 鼠标悬停
:enabled 有效控件
:disabled 禁用控件
:checked 选中控件
:focus 焦点控件
:not() 过滤掉某些元素
:empty() 空，匹配的元素必须没有子元素
:invalid 根据输入类型匹配有非法输入值的元素
:link 用来选择未被访问过的链接
:visited 选择已经被访问过的链接
:active 选择鼠标按下的链接
(1).hover鼠标悬停 示例
       
    
        
  1. /* hover 鼠标悬停 */
    2. 
        
  2. .nav>.list:nth-child(3):hover{
    3. 
        
  3. background-color:aquamarine;
    4. 
        
  4. color:beige;
    5. 
        
  5. }
    6.

ps:需要注意的是这四个伪类的书写顺序：
:link 和 :visited 必须写在 :hover 和 :active前面，否则 :hover 和 :active 的样式将被覆盖（层叠）掉。
:hover 必须写在 :active 的前面，否则点击样式会被鼠标覆盖样式层叠（点击元素必然是在鼠标覆盖元素的情况下发生）。
平时使用时按照需求按照上面的顺序书写。
:hover 和 :active 不只对 a 元素有效，也可以应用于其他元素。

三. 盒子模型

盒子模型组成有 4 部分,分别为:内容 内边距 边框

外边距(不计入盒子实际宽度)

盒子模型有 2 种:标准盒子模型与怪异盒子模型

(1). 标准盒子模型=content(内容)+border(边框)+padding(内边距)
       
    
        
  1. class="box">
       
    
        
  1. .box{
    2. 
        
  2. width:200px;
    3. 
        
  3. height:100px;
    4. 
        
  4. border:2pxsolid black;
    5. 
        
    6. 
        
  6. padding:20px;
    7. 
        
    8. 
        
  8. background-color:aquamarine;
    9. 
        
  9. }
    10.

ps: width=200 + border22(左右) +padding2020(左右) =244px
(2). 怪异盒子模型=content(内容)(已经包含了 padding 和 border)
       
    
        
  1. class="box">
       
    
        
  1. .box{
    2. 
        
  2. width:200px;
    3. 
        
  3. height:100px;
    4. 
        
  4. border:2pxsolid black;
    5. 
        
  5. padding:20px;
    6. 
        
  6. background-color:aquamarine;
    7. 
        
    8. 
        
    9. 
        
  9. box-sizing:border-box;
    10. 
        
  10. }
    11.

ps:

默认值box-sizing: content-box;width=200 + border22(左右) +padding2020(左右) =244px

怪异盒子模型box-sizing: border-box;内容区content 已经包含了内边距padding和边框border

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：作业依旧完成的很好，很认真，继续加油
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply withNews Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！