欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

css3第二篇，选择器一(基本选择器)

程序员文章站 2022-05-11 09:06:15
...

选择器：实现css样式的基本组成部分

基本选择器

 id选择器

 与标签一一对应

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    #a1 {
        color: red;
    }
    </style>
</head>

<body>
    <!-- 选择器:实现css样式的基本组成部分 -->
    <!-- id选择器 
	语法: 

	 css  #选择器名称 
	      {}   表示选择器属性内容
	      css属性以及属性值

     html 标签添加id属性,属性值为选择器名称

     id:标签的身份证,必须和标签一一对应

	-->
    <a href="#" id="a1">百度</a>
</body>

</html>

 class选择器/类选择器

与标签是多对多对应， 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .a1 {
        color: orange;
    }

    .a2 {
        font-size: 100px;
    }
    </style>
</head>

<body>
    <!-- class选择器/类选择器 -->
    <!--语法:
	    css  .选择器名称
	         {}
	         属性以及属性值

	    html html标签添加class属性,属性值为选择器名称

        class与id选择器的区别:
        1,一个id选择器只能给一个标签使用
          一个clas选择器可以给多个标签使用

        2,一个标签只能有一个id选择器
          一个标签可以有多个class选择器
-->
    <a href="#" class="a1 a2">百度</a>
</body>

</html>

 类型选择器/html选择器/标签选择器

对指定类型的标签都起作用 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    strong {
        color: red;
    }
    </style>
</head>

<body>
    <!-- 类型选择器/html选择器/标签选择器 -->
    <!--语法:
	    css  选择器名称是HTML中的标签名称

	    html 不用添加特殊内容

	作用: 对指定的所有HTML标签,起css样式作用
-->
    <strong>北京</strong>
    <strong>北京</strong>
    <strong>北京</strong>
    <strong>北京</strong>
</body>

</html>

* 通配选择器

对HTML文件中的所有标签都起作用 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {
        color: green;
    }
    </style>
</head>

<body>
    <!-- 通配选择器 -->
    <!--  语法: 
	  css  * 作为选择器名称 
	  html 不用添加特殊内容 

	  作用:html页面中所有的标签,都会受到选择器样式效果影响
-->
    <a href="#">百度</a>
    <strong>上海</strong>
    <h1>重庆</h1>
    <em>广州</em>
    <del>天津</del>
</body>

</html>

基本选择器的优先级

id选择器 > class选择器 > 类型选择器 > 通配选择器

三种基本语法的优先级

1,内联/行内样式,优先级最高

id选择器 > class选择器 > 类型选择器 > 通配选择器.选择器的作用范围越大,优先级就越小

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {
        color: red;
    }

    a {
        color: yellow;
    }

    .a1 {
        color: green;
    }

    #a1 {
        color: pink;
    }
    </style>
</head>

<body>
    <!-- 优先级 -->
    <!-- 同一个标签,被不同的选择器指定,css的属性相同,但是属性值不同,会造成优先级问题 -->
    <!-- 四项基本选择器的优先级: -->
    <!-- id选择器 > class选择器 > 类型选择器 > 通配选择器 -->
    <!-- 选择器的作用范围越大,优先级就越小 -->
    <a href="#" class="a1" id="a1">百度</a>
</body>

</html>

 2.内部样式,外部样式的优先级

选择器的类型不同:按照选择器的基本优先级id > class > 类型 > 通配.

选择器类型相同:link标签和style标签,谁的位置在后,显示谁的效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    #a_nei {
        color: green;
    }

    .a_nei {
        color: yellow;
    }
    </style>
    <link rel="stylesheet" type="text/css" href="demo.css">
</head>

<body>
    <!-- 三种基本语法的优先级 -->
    <!-- 内联样式  内部样式 外部样式 -->
    <!-- 1,内联样式优先级最高 -->
    <a href="#" style="color:red;" id="a_wai">百度</a>
    <!-- 2,内部样式和外部样式比较优先级 
			(1),内部样式和外部样式中的选择器不同,按照选择器的基本优先级来决定显示效果
    -->
    <hr>
    <a href="#" id="a_wai" class="a_nei">搜狐1</a>
    <a href="#" id="a_nei" class="a_wai">搜狐2</a>
    <!--    (2), 内部样式,外部样式,选择器类型相同,看link标签和style标签在head标签中的位置,谁在后,显示谁的效果-->
    <hr>
    <a href="#" class="a_wai a_nei">新浪</a>
    <!-- 强调:id选择器与标签一定是一一对应的效果,一个标签绝对不允许出现一个以上的id选择器 -->
</body>

</html>


demo.css

#a_wai {
    color: black;
}

.a_wai {
    color: pink;
}

上一篇： HTML5新增音频标签（HTML5）

下一篇： css3 选择器总结，基本的用法

推荐阅读