css选择器

最新推荐文章于 2024-07-06 20:00:00 发布

Amy777777

最新推荐文章于 2024-07-06 20:00:00 发布

阅读量883

点赞数

分类专栏： css 文章标签： css css选择器

本文链接：https://blog.csdn.net/annabelannabel/article/details/76589060

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

  什么是CSS? 

  - CSS是指层叠样式表 

  - CSS通常称为CSS样式表或者层叠样式表，主要用于设置HTML页面中的文本内容（字体，大小，对其方式等）、图片的外形（宽高，边框样式，边距等）以及版面的布局等外观显示样式 

  - HTML结构层：负责从语义的角度搭建页面结构 

  - CSS样式层 ：负责从审美的角度美化页面 

  - JavaScript层 ：负责从交互的角度提升用户体验 

 
 - 内联样式：标签中添加style属性 

  <p style=”color:red;”>235465876</p> 

 
 - 内嵌（内部）样式：在head标签中添加style标签 

 
 - 外部样式，外联样式，通过link标签引入css样式文件 

  <link rel="stylesheet" href="abc.css" type="text/css"> 

 
 使用外部样式表，相对于内嵌和内部式，有以下优点： 

样式代码可以复用。一个外部CSS文件，可以被很多网页共用。
便于修改。如果要修改样式，只需要修改CSS文件，而不需要修改每个页。
提高网页显示的速度。如果样式写在网页里，会降低网页显示的速度，如果网页引用一个CSS文件，这个CSS文件多半已经在缓存区(其它网页早已经引用过它)，网页显示的速度就比较快。

 
 css选择器: 

  -每一条css样式定义由两部分组成，形式如下： 

  -在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素 

  -选择器通常是您需要改变样式的 HTML 元素，如：<p>,<body>,<h1>等等 

  -每一条格式声明语句由“属性名:属性值”对组成，属性名和属性值间以冒号隔开，每条声明语句以英文状态下的分号“;”结束。 

 
 1.样式优先级：内联 > 内部 > 外部 

 
 < 
 head 
 > 

 
  
 < 
 meta  
 charset= 
 "UTF-8" 
 > 

 
  
 < 
 title 
 > 
 css 
 </ 
 title 
 > 

 
  
 <!--外部样式--> 

 
  
 < 
 link  
 rel= 
 "stylesheet"  
 href= 
 "css/css1.css" 
 > 

 
  
 <!--内部样式--> 

 
  
 < 
 style 
 > 

 
  
 h1 
 { 
 color 
 :  
 firebrick 
 } 

 
  
 </ 
 style 
 > 

 
 </ 
 head 
 > 

 
 < 
 body 
 > 

 
 <!--//优先级 内联>内部>外部--> 

 
 <!--内联样式--> 

 
 < 
 p  
 style= 
 " 
 font-size 
 :  
 medium 
 ; 
 " 
 > 
  内联样式  
 </ 
 p 
 > 

 
 < 
 h1 
 > 
 内部样式 
 </ 
 h1 
 > 

 
 </ 
 body 
 > 

 
 2.选择器 

 
 1)通用选择器 

 
 通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素 

*{}

 
 2)标签选择器 

 
 标签选择器其实就是HTML代码中的标签，会匹配所有使用该标签的元素。如： 

  p{ background-color:yellow; } 

 
 3)类选择器 

 
 类选择器在css样式编码中是最常用到的，用于一组元素的样式, 

 
  
 .类名{} 

 
 1、英文圆点开头 

  2、其中类选器名称可以任意起名（但不要起中文） 

  TIPs：1） class可以重复，也就是说，同一个页面上可能有多个标签同时属于某一个类； 

  2） 同一个标签可以同时携带多个类。 

 
 4)ID选择器 

 
 id 选择器，可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。 

  TIPs: 优先级id > class 

  css中尽可能的用class，除非极特殊的情况可以用id。 

  原因：id是js用的。也就是说，js要通过id属性得到标签，所以我们css层面尽量不用id，要不然js就很别扭。另一层面，我们会认为一个有id的元素，有动态效果。 

 
 5)css高级选择器 

 
 @后代选择器 

 
 空格就表示后代。选择的是后代，不一定是儿子。 

 
 @儿子选择器 

 
 div的儿子p。和div的后代p的截然不同。 

  能够选择： 

<div>
<p>我是div的儿子</p>
</div>

 
 不能选择： 

 
 <div> 

  <ul> 

  <li> 

  <p>我是div的重孙子</p> 

  </li> 

  </ul> 

  </div> 

 
 @交集选择器 

 
 选择的元素是同时满足两个条件：必须是h3标签，然后必须是special标签。 

  <h3>我是标题</h3> 

  <h3 class="special">我是标题</h3> 

  <p class="special">我是段落</p> 

  <p>我是段落</p> 

 
 TIPs：不等价于 div .red 后代选择器 

 
 @并集选择器（组合选择器） 

  组合选择器：(多元素选择器)当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。如： 

  h1,h2,h3,h4,h5,h6 

{

  color: red 

}

  上面的例子是将所有正文标题(<h1>到<h6>)的字体颜色都变成红色。 

 
 自己的代码联系： 

 
 1.基础选择器 

 
 < 
 head 
 > 

 
  
 < 
 meta  
 charset= 
 "UTF-8" 
 > 

 
  
 < 
 title 
 > 
 选择器 
 </ 
 title 
 > 

 
  
 < 
 style 
 > 

 
  
 /*<!--通用选择器-->*/ 

 
  
 * 
 { 
 background-color 
 : 
 blanchedalmond 
 } 

 
  
 /*标签选择器*/ 

 
  
 p 
 { 
 color 
 : 
 red 
 } 

 
 . 
 p4 
 { 
 color 
 : 
 rebeccapurple 
 } 

 
  
 /*Id选择器*/ 

 
  
 #p5 
 { 
 background-color 
 :  
 #b3d4fc 
 } 

 
  
 #p4 
 { 
 color 
 :  
 yellow 
 } 

 
  
 /*共同类 */ 

 
  
 . 
 p7 
 { 
 font-size 
 :  
 larger 
 ; 
 font-style 
 :  
 italic 
 } 

 
 . 
 p6 
 { 
 color 
 :  
 burlywood 
 } 

 
  
 </ 
 style 
 > 

 
 </ 
 head 
 > 

 
 < 
 body 
 > 

 
 <!--class属性不是唯一的，id是唯一的--> 

 
 < 
 p  
 id= 
 "p5" 
 > 
 我是第5个段落 
 </ 
 p 
 > 

 
 < 
 p 
 > 
 我是第2个段落 
 </ 
 p 
 > 

 
 < 
 p  
 class =  
 "p4"  
 > 
 为是第3个段落 
 </ 
 p 
 > 

 
 <!--Id属性优先级大于class--> 

 
 < 
 p  
 class =  
 "p4"  
 id= 
 "p4" 
 > 
 我是第四个段落 
 </ 
 p 
 > 

 
 <!--可以同时应用两个class--> 

 
 < 
 p  
 class =  
 "p6 p7"  
 > 
 我是第6个段落 
 </ 
 p 
 > 

 
 </ 
 body 
 > 

 
 head 
 > 

 
  
 < 
 meta  
 charset= 
 "UTF-8" 
 > 

 
  
 < 
 title 
 > 
 Title 
 </ 
 title 
 > 

 
  
 < 
 style 
 > 

 
  
 /*<!--公共类--！>*/ 

 
  
 . 
 p1 
 { 
 font-size 
 :  
 36 
 px 
 ;} 

 
 . 
 p2 
 { 
 text-decoration 
 :  
 underline 
 ;} 

 
 . 
 p3 
 { 
 color 
 :  
 chartreuse 
 } 

 
  
 </ 
 style 
 > 

 
 </ 
 head 
 > 

 
 < 
 body 
 > 

 
 < 
 p  
 class= 
 "p1 p3" 
 > 
 字体36号，颜色绿色 
 </ 
 p 
 > 

 
 < 
 p  
 class= 
 "p2 p3" 
 > 
 下划线，颜色绿色 
 </ 
 p 
 > 

 
 < 
 p  
 class= 
 "p1 p2" 
 > 
 字体36号，下划线 
 </ 
 p 
 > 

 
 </ 
 body 
 > 

 
 2.高级选择器 

 
 head 
 > 

 
  
 < 
 meta  
 charset= 
 "UTF-8" 
 > 

 
  
 < 
 title 
 > 
 高级选择器 
 </ 
 title 
 > 

 
  
 < 
 style 
 > 

 
  
 /*选择div下面的所有p标签  
 后代选择器 
 */ 

 
  
  
 div p 
 { 
 color 
 : 
 chartreuse 
 } 

 
  
 /* 
 后代选择器 
 */ 

 
  
 div  
 . 
 p2 
 { 
 background-color 
 :  
 #b3d4fc 
 } 

 
  
 / 
 *多级后代选择器 
 */ 

 
  
 div ul li p 
 { 
 background-color 
 :  
 yellow 
 } 

 
  
 /* 
 儿子选择器 
 */ 

 
  
 div 
 > 
 p 
 { 
 color 
 :  
 firebrick 
 } 

 
  
 li 
 > 
 p 
 { 
 color 
 : 
 salmon 
 } 

 
  
 /*并集选择器 只要包含了标签h3和id：c3的都可以被选择到（群组选择器）*/ 

 
  
  
 h3 
 ,. 
 c3 
 { 
 background-color 
 :  
 chartreuse 
 } 

 
  
 </ 
 style 
 > 

 
 </ 
 head 
 > 

 
 < 
 div 
 > 

 
  
 < 
 p  
 class= 
 "p2" 
 > 
 212121 
 </ 
 p 
 > 

 
 </ 
 div 
 > 

 
 < 
 div 
 > 

 
  
 < 
 p  
 class= 
 "p2" 
 > 
 222222 
 </ 
 p 
 > 

 
 </ 
 div 
 > 

 
 < 
 div  
 class= 
 "div2" 
 > 

 
  
 < 
 p  
 class= 
 "p2" 
 > 
 333333 
 </ 
 p 
 > 

 
 </ 
 div 
 > 

 
 < 
 div 
 > 

 
  
 < 
 ul 
 > 

 
  
 < 
 li 
 > 
 2222 
 </ 
 li 
 > 

 
  
 < 
 li 
 > 

 
  
 </ 
 li 
 > 

 
  
 </ 
 ul 
 > 

 
 </ 
 div 
 > 

 
 < 
 h3 
 > 
 xxixiixix 
 </ 
 h3 
 > 

 
 < 
 h3  
 class= 
 "c3" 
 > 
 xxixiixix 
 </ 
 h3 
 > 

 
 < 
 p  
 class= 
 "c3" 
 > 
 xxxxxxxxxx 
 </ 
 p 
 > 

 
 < 
 body 
 > 

 
 </ 
 body 
 > 

Amy777777

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css选择器

什么是CSS?- CSS是指层叠样式表- CSS通常称为CSS样式表或者层叠样式表，主要用于设置HTML页面中的文本内容（字体，大小，对其方式等）、图片的外形（宽高，边框样式，边距等）以及版面的布局等外观显示样式- HTML结构层：负责从语义的角度搭建页面结构- CSS样式层：负责从审美的角度美化页面- JavaScript层：负责从交互的角度提升用户体验
复制链接

扫一扫

专栏目录