HTML-3-CSS选择器

最新推荐文章于 2024-07-08 16:01:05 发布

只爱故事不爱酒的秃头少女

最新推荐文章于 2024-07-08 16:01:05 发布

阅读量150

点赞数

分类专栏： HTML CSS 文章标签： html css

本文链接：https://blog.csdn.net/Liuhxhhhhh/article/details/106693830

版权

HTML 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

CSS

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en,zh">
<head>
	<meta charset="utf-8">
	<title>test3</title>
	<link rel="stylesheet" type="text/css" href="test3.css">
	<!-- <style type="text/css">
		h1{
			color: green;
		}
	</style> -->
</head>
<body>
      浏览器分为shell（视图），内核两部分
      现在的主流浏览器                   内核
      Google chrome                  Webkit/blink
      IE                             trident
      Firefox                        Gecko
      safari                         Webkit
      Opera                          presto
      主流浏览器一个重要的因素就是有自己独立的研发内核

      注释的快捷键 ctrl+？ 
      注释：1.写备注  2.调代码，找bug  
      
      html        css（层叠样式表）         javascript
      结构        样式                      行为
      <br><br><br>
      
      <!-- 1.引入css -->
     <!-- <div style="

          width: 200px;
          height: 100px;
          background-color: pink;
      ">    
           行间css直接在div的style中添加属性
           <h1>1.行间css<h1>
      </div>
      <div>
        	<h1>2.页面级css</h1>
      	    页面级css需要在<head>标签中添加<style>标签，然后添加属性
      </div>

      <div>
             <h2>    3.外部css文件<h2>
             此时需要在<head>标签内添加<link>标签，其中的href填写绝对路径/相对路径
      </div>  -->

    <!-- 选择器 -->
    <!--1.id选择器  -->
    <!-- 在div中添加一个id，则在css中使用#id的形式就可以为div内的代码添加css样式 -->
    <!-- 一个id只能由一个元素值，一个元素值只能由一个id。保证一一对应-->
    <div id="only">
         <h1>123</h1>
    </div>

    
    <!--2.class选择器 -->
    <!--在div中添加class，然后在css中使用.clss的形式就可以为div的代码添加css样式 -->
    <!--class和元素的关系是多对多的，一个class可以对应多个元素，一个元素可以使用多个class  -->
    <!-- 当一个元素有多个class时，只写一个class，中间用空格隔开 -->
    <!-- 在css中以."属性值"的形式书写样式 -->
    <div class="demo">
    	<h1>456</h1>
    </div>
    <div class="demo demo1">
    	<h1>789</h1>
    </div>


    <!-- 3.标签选择器 -->
    <!-- 特定标签都会有效果 -->



    <!-- 4.通配符选择器 -->
    <!-- 所有的标签都有效果，在css中，以*{}的形式书写样式-->
    <span>111</span>
    <div>222</div>
    <strong>333</strong>


    <!-- 5.属性选择器 -->
    <!-- 在css中，以[id]{}的形式书写样式，作用于所有含有id属性的元素 -->
    <!-- 或者也可以添加属性值，[id="text1"]只作用于含有id属性，且属性值text1的元素 -->
    <div id="text1">
           <h1>444</h1>
    </div>


    <!--优先级 ！important > 行间样式 > id > class|属性选择器 > 标签选择器 > 通配符选择器 -->
    
   
     CSS权重

    ！important                     Infinity（正无穷）
    行间样式                         1000 (256进制)
    id                              100
    class|属性选择器|伪类            10
    标签选择器|伪元素                1
    通配符选择器                     0

</body>
</html>

#only{   /*id选择器*/
	color:green;

}

.demo{   /*class选择器*/
	color: red;
}
.demo1{   /*class选择器*/
	background-color: black;
}
/* 标签选择器
    div{
	background:red;
    }
*/
/*    通配符选择器
   *{     
	     background-color: #f40;
    }
*/

[id]{    /*属性选择器*/
	color: blue;
}

只爱故事不爱酒的秃头少女

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML-3-CSS选择器

<!DOCTYPE html><html lang="en,zh"><head> <meta charset="utf-8"> <title>test3</title> <link rel="stylesheet" type="text/css" href="test3.css"> <!-- <style type="text/css"> h1{ color: green; }.
复制链接

扫一扫