html5css选择器用法 css ～选择器

转载

angel 2023-07-21 17:08:38

文章标签 html5css选择器用法选择器伪类选择器 css 文章分类 HTML5 移动开发

Css

Css添加方式:

第一种添加方式：行内样式直接放在标签上<span style=”color:red;”>我是行内样式</span>
第二种添加方式：内部样式放在<head>标签内部<style type=”text/css”></style>
第三种添加方式：头部引入专门的.css文件<link rel=”stylesheet” type=”text/css” href=”${url}”>

优先级：遵循html从上到下运行原则，最后执行的为最终结果。

第一中最高

Css选择器

标签选择器 2.id选择器 3.Class选择器 4.后代选择器 5.子选择器 6.伪类选择器 7.通用选择器 8.群组选择器 9.相邻细胞选择器 10.属性选择器 11.伪元素选择器 12.结构性伪类选择器 13.结构性伪类选择器 14.UI元素状态伪类选择器

优先级：遵循越精确优先级越高，例如：id>class>标签>*（通配符）

id选择器

#sp1{  color: red;   }  //定义id为sp1的标签颜色为red，选择id以#开头
class选择器
.sp2{ color: #008000;   } //定义id为sp1的标签颜色为red，选择class以点开头
*（通配符）选择器
*{   color: #FF0000;   }//定义所有标签颜色为red，选择id以点开头
<!-- 标签选择器-->
span{  color: #FF0000;  }//定义所有span标签颜色为red
组合选择器：
div#sp2,span#sp1{   //div#sp2交集选择器，同时满足span标签和id=sp2的标签
color: white;            //div#sp2,span#sp1两个之间满足一个即可
}
#d1>div{          //  #d1>div(大于号)指代嫡子标签
 color: #008000;
  }
#d1 span{          //#d1 span空格指代所有子代标签
color: #FF0000;
  }
#d2~div{           //#d2~div指代id为d2标签后的所有兄弟标签
color: #FF0000;
}
#d2+div{    //    #d2+div指代id为d2标签后的第一个兄弟
color: #FF0000;
}

rel=stylesheet是?

首先，我们要知道Link标签有两个作用：

1. 定义文档与外部资源的关系；2. 是链接样式表。

link标签是用于当前文档引用外部文档的，其次，这个标签的rel属性用于设置对象和链接目的间的关系，说白了就是指明你链进来的对象是个什么东西的，

rel各个属性值配置的意思：

Alternate – 定义交替出现的链接

Stylesheet – 定义一个外部加载的样式表（常用）

Start – 通知搜索引擎,文档的开始

Next – 记录文档的下一页.(浏览器可以提前加载此页)

Prev – 记录文档的上一页.(定义浏览器的后退键)

Contents

Index – 当前文档的索引