CSS-9种基础选择器的认识

**CSS (Cascading Stylel Sheet) **:层叠样式表,是一组格式设置的规则,用于控制web页面的外观。

选择器{属性:属性值;属性:属性值;}

继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代,并不是所有的属性都能被继承,一般的自提属性是能继承的。

1.ID选择器(页面中不能出现同名的id)
标签内:<p id="name">ID选择器</p>
style内:#name { color:red; }
2.类名选择器
标签内: <div class="name">类名选择器</div>
style内:.name { color:red; }
3.标签选择器
标签内:<div>标签选择器</div>
style内:div{ color:red; }
4.通用选择器
标签内: <div>通用选择器/全局选择器</div>
style内:* { color:black; } "*"作为通用选择器,他的优先级是最低的。
5.伪类选择器
标签内:<a>超链接</a>
style内:
a:link { color:black; } a:visited { color:purple } a:hover { color:blue; } a:active { color:red }
正常的显示顺序 L V H A :link(访问前)、visited(访问后)、 hover(经过时)、 active(点击时)。
6.后代选择器
标签内:<div><p>子元素<p></div>
style内:div p { color:red; }
后代选择器对应对象内所有的子节点都有效。
7.子选择器
标签内: <div><p>子元素<p></div>
style内:div>p { color:red; }
子选择器只对应用对象的直接子节点有效。
8.群组选择器
标签内: <div>元素一</div><p>元素二<p>
style内:div,p { color:red; }
9.交叉选择器
标签内:<p class="name">段落标签</p>
style内: p.name { color:red; }
第一个必须是标签选择器,第二个必须是类选择器或者ID选择器,两个选择器之间不能有空格,是连续写的。

选择器的优先级

行内样式 > ID > 类 > 标签

html中使用CSS的引入方式

1.标签内引入
<div style="color:red;">我是div</div>
2.内嵌式引入
在 head 部分 加入<head><style> div { color:red; } </style></head>
3.link 链接式引入
在 head 部分引入外部的css文件<head><link rel="stylesheet" href=""/></head>
4.@import引入
在 style 里面引入外部的css文件<style type="text/css">@import url(12.css);</style>

优先级####

行内样式>(内嵌式、链接式,谁在后加载谁的)> @import

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 8,578评论 0 40
  • 前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的...
    珍此良辰阅读 5,919评论 2 15
  • 作为前端和后台最基础可靠的神器工具JQuery,你真的对她有足够了解么? 亚非拉地区苦逼的前端er们,有时候不得不...
    扭了个妞阅读 2,934评论 0 0
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,789评论 32 459
  • 由于孩子开学,我有好久没见我的老爸老妈了。年龄大了,越来越眷恋他们营造的家的感觉,可以让人卸下盔甲,放下坚强,...
    杉杉妈妈阅读 4,837评论 4 3

友情链接更多精彩内容