VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > temp > JavaScript教程 >
  • 第九十七篇:CSS的选择器及优先级

好家伙,来补一点关于CSS的基础

 

1.id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式

使用#号来定义样式

 

2.class选择器

class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,

class可以在多个元素中使用。

使用"."号来定义样式

 

来动手试一下(冻手!冻手!)

复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS</title> 
<style>
#para1
{
    color:red;
} 
.center
{
    text-align:center;
}
</style>
</head>

<body>
<p id="para1">Hello World!</p>
<p>我不受id选择器的影响</p>
<h1 class="center">我是受类选择器影响的h1标签</h1>
<p class="center">我是受类选择器影响的p标签</p> 


</body>
</html>
复制代码

 

 

 

 看的出来两者特点,

id选择器使用者唯一(并不,理论上应该唯一),

而class选择器可供一系列标签使用

 

3.CSS样式继承

CSS 的继承特性指的是应用在一个标签上的那些 CSS 属性被传到其子标签上。

 

如果 <div> 有个属性 color: red,则这个属性将被 <p> 继承,即 <p> 也拥有属性 color: red。

 

4.选择优先级:优先级关系:内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

  • 内联样式,如

    <p style=""></p>

     

  • ID 选择器, 如

    复制代码
    #para1
    {
        color:red;
    }
    
    <p id="para1">Hello World!</p>
    复制代码

     

  • 类选择器, 如 

    复制代码
    .center
    {
        text-align:center;
    }
    
    <h1 class="center">我是受类选择器影响的h1标签</h1>
    复制代码

     

     
  • 属性选择器, 如 

    复制代码
    [title]
    {
    color:red;
    }
    
    <h2 title="Hello world">Hello world</h2>
    复制代码

     

  • 伪类选择器, 如

    selector:pseudo-class {
        property: value;
    }

     

  • 伪元素选择器, 如

    selector::pseudo-element {
        property: value;
    }

     

  • 标签选择器, 如 

    div{...}
    
    p{...}

     

  • 通配选择器, 如 

    *{}

     

来一张梗图

 

 

 

 再来举个例子:

复制代码
// HTML
<div class="content-class" id="content-id" style="color: black"></div>

// CSS
#content-id {
    color: red;
}
.content-class {
    color: blue;
}
div {
    color: grey;
}
复制代码

最后的字体颜色是黑色,

因为内联样式权重最大

 

 

That's all




出处:https://www.cnblogs.com/FatTiger4399/p/16441306.html

 


相关教程