2 - 前端基础--CSS 选择器
引入css方式(重点掌握)
1、行内样式
<div> <p style="color: green">我是一个段落</p></div>
在标签内添加一个style属性,属性值为要设置的样式:样式的值。
2、内接样式
<style type="text/css"> /*写我们的css代码*/ span{ color: yellow; }</style>
3、外接样式
3.1 链接式
<link rel="stylesheet" href="./index.css">
3.1 导入式
<style type="text/css"> @import url('./index.css');</style>
css的选择器:
1.基本选择器
2.高级选择器
CSS选择器
基本选择器
基本选择器包括:
标签选择器
id选择器
类选择器
1.标签选择器
标签选择器可以选中所有的标签元素,比如div,ul,li ,p等等,不管标签藏的多深,都能选中,选中的是所有的,而不是某一个,所以说 "共性" 而不是 ”特性“
body{ color:gray; font-size: 12px;}/*标签选择器*/p{ color: red;font-size: 20px;}span{ color: yellow;}
2.id选择器
#
选中id
同一个页面中id不能重复。任何的标签都可以设置id id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA是两个不一样的属性值
#box{ background:green;} #s1{ color: red;}#s2{ font-size: 30px;}
3.类选择器
所谓类:就是class . class与id非常相似 任何的标签都可以加类,但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类,用空格隔开
类的使用,能够决定前端工程师的css水平到底有多牛逼?
玩类了,一定要有”公共类“的概念。
.lv{ color: green;}.big{ font-size: 40px;}.line{ text-decoration: underline;}
<!-- 公共类 共有的属性 --><div> <p class="lv big">段落1</p> <p class="lv line">段落2</p> <p class="line big">段落3</p></div>
总结:
不要去试图用一个类将我们的页面写完。这个标签要携带多个类,共同设置样式
每个类要尽可能的小,有公共的概念,能够让更多的标签使用
到底使用id还是用class?
答案:尽可能的用class。除非一些特殊情况可以用id原因:id一般是用在js的。也就是说 js是通过id来获取到标签
高级选择器
后代选择器
子代选择器
并集选择器
交集选择器
后代选择器
使用空格表示后代选择器。顾名思义,父元素的后代(包括儿子,孙子,重孙子)
.container p{ color: red; }.container .item p{ color: yellow;}
子代选择器
使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。
.container>p{ color: yellowgreen;}
并集选择器
多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素,可以使用并集选择器
比如像百度首页使用并集选择器。
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td { margin: 0; padding: 0 }/*使用此并集选择器选中页面中所有的标签,页面布局的时候会使用*/
交集选择器
使用.表示交集选择器。第一个标签必须是标签选择器,第二个标签必须是类选择器 语法:div.active
比如有一个<h4 class='active'></h4>
这样的标签。
那么
h4{ width: 100px; font-size: 14px;}.active{ color: red; text-decoration: underline;}/* 交集选择器 */h4.active{ background: #00BFFF;}
它表示两者选中之后元素共有的特性。
补充选择器
属性选择器
属性选择器,字面意思就是根据标签中的属性,选中当前的标签。
语法:
/*根据属性查找*//*[for]{ color: red;}*//*找到for属性的等于username的元素 字体颜色设为红色*//*[for='username']{ color: yellow;}*//*以....开头 ^*/ /*[for^='user']{ color: #008000;}*//*以....结尾 $*//*[for$='vvip']{ color: red;}*//*包含某元素的标签*//*[for*="vip"]{ color: #00BFFF;}*//**//*指定单词的属性*/label[for~='user1']{ color: red;}input[type='text']{ background: red;}
伪类选择器
伪类选择器一般会用在超链接a标签中,使用a标签的伪类选择器,我们一定要遵循"爱恨准则" LoVe HAte
/*没有被访问的a标签的样式*/.box ul li.item1 a:link{ color: #666;}/*访问过后的a标签的样式*/.box ul li.item2 a:visited{ color: yellow;}/*鼠标悬停时a标签的样式*/.box ul li.item3 a:hover{ color: green;}/*鼠标摁住的时候a标签的样式*/.box ul li.item4 a:active{ color: yellowgreen;}
再给大家介绍一种css3的选择器nth-child()
/*选中第一个元素*/div ul li:first-child{ font-size: 20px; color: red;}/*选中最后一个元素*/div ul li:last-child{ font-size: 20px; color: yellow;}/*选中当前指定的元素 数值从1开始*/div ul li:nth-child(3){ font-size: 30px; color: purple;}/*n表示选中所有,这里面必须是n, 从0开始的 0的时候表示没有选中*/div ul li:nth-child(n){ font-size: 40px; color: red;}/*偶数*/div ul li:nth-child(2n){ font-size: 50px; color: gold;}/*奇数*/div ul li:nth-child(2n-1){ font-size: 50px; color: yellow;}/*隔几换色 隔行换色 隔4换色 就是5n+1,隔3换色就是4n+1 */div ul li:nth-child(5n+1){ font-size: 50px; color: red;}
伪元素选择器
废话不多说,直接上代码!!!
/*设置第一个首字母的样式*/ p:first-letter{ color: red; font-size: 30px; } /* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/ p:before{ content:'alex'; } /*在....之后 添加内容,使用非常频繁 通常与咱们后面要讲到布局 有很大的关联(清除浮动)*/ p:after{ content:'&'; color: red; font-size: 40px; }
CSS的继承性和层叠性
css有两大特性:继承性和层叠性
继承性
面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法。那么我们现在主要研究css,css就是在设置属性的。不会牵扯到方法的层面。
继承:给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承。
记住:有一些属性是可以继承下来 : color 、 font-、 text-、line-* 。主要是文本级的标签元素。
但是像一些盒子元素属性,定位的元素(浮动,绝对定位,固定定位)不能继承。
层叠性
层叠性: 权重的标签覆盖掉了权重小的标签,说白了 ,就是被干掉了权重: 谁的权重大,浏览器就会显示谁的属性谁的权重大? 非常简单就是小学的数数。数:id的数量 class的数量 标签的数量,顺序不能乱
/*1 0 0 */显示红色#box{ color: red; }/*0 1 0*/.container{ color: yellow;}/*0 0 1*/p{ color: purple;}
是不是感觉明白了呢?好的,再给大家加深点难度。
<div id='box1' class="wrap1"> <div id="box2" class="wrap2"> <div id="box3" class="wrap3"> <p>再来猜猜我是什么颜色?</p> </div> </div></div>
#box1 #box2 p{ color: yellow;}#box2 .wrap3 p{ color: red;}div div #box3 p{ color: purple;}div.wrap1 div.wrap2 div.wrap3 p{ color: blue;}
好的。那么上面的这个案例大家是否懂了呢?那么接下来我们继续看案例
还是上面那个html结构,如果我设置以下css,会显示什么颜色呢。
#box2 .wrap3 p{ color: yellow;}#box1 .wrap2 p{ color: red;}
答案是红色的。结论:当权重一样的时候 是以后来设置的属性为准,前提必须权重一样 。‘后来者居上 ’。
Good,我们继续看下面的css,你来猜以下此时字什么颜色?
#box1 #box2 .wrap3{ color: red;} #box2 .wrap3 p{ color: green;}
答案是绿色。哈哈,是不是感觉快懵掉了。其实大家只要记住这点特性就可以。第一条css设置的属性值,是通过继承性设置成的红色,那么继承来的属性,它的权重为0。它没有资格跟我们下面选中的标签对比。
那大家猜想一下如果都是被继承来的属性,那么字会显示什么颜色呢?
#box1 #box2 .wrap3{ color: red;}.wrap1 #box2{ color: green;}
小案例证明:权重都是0:那么就是"就近原则" : 谁描述的近,就显示谁的属性。所谓描述的近,就是选中到最内层的距离越近。
小总结一下:
总结:1.先看标签元素有没有被选中,如果选中了,就数数 (id,class,标签的数量) 谁的权重大 就显示谁的属性。权重一样大,后来者居上2.如果没有被选中标签元素,权重为0。如果属性都是被继承下来的 权重都是0 。权重都是0:"就近原则" : 谁描述的近,就显示谁的属性
层叠性权重相同处理
直接上代码,看效果!
第一种现象:当权重相同时,以后来设置的属性为准,前提一定要权重相同
#box2 .wrap3 p{ color: yellow;} #box1 .wrap2 p{ color: red;}
我们会发现此时显示的是红色的。
第二种现象: 第一个选择器没有选中内层标签,那么它是通过继承来设置的属性,那么它的权重为0。第二个选择器选中了内层标签,有权重。
所以 继承来的元素 权重为0。跟选中的元素没有可比性。
#box1 #box2 .wrap3{ color: red;}#box2 .wrap3 p{ color: green;}
我们会发现此时显示的是绿色的。
第三种现象:如果都是继承来的属性,谁描述的近,显示谁的属性。'就近原则'
#box1 #box2 .wrap3{ color: red;} .wrap1 #box2{ color: green;}
!important
的使用。
!important
:设置权重为无限大 !important
不影响继承来的权重,只影响选中的元素。不要随便使用!important
,因为使用它会影响页面的布局
转载于:https://www.cnblogs.com/hansha/p/9680287.html
2 - 前端基础--CSS 选择器相关推荐
- 前端基础——CSS 选择器、网页美化
什么是CSS Cascading Style Sheet 层叠级联样式表 CSS:表现和美化网页 字体,颜色,边距,高度,宽度, 背景图片,网页定位,网页浮动 发展史: CSS1.0 CSS2.0: ...
- 前端基础-CSS的各种选择器的特点以及CSS的三大特性
一. 基本选择器 二. 后代选择器.子元素选择器 三. 兄弟选择器 四. 交集选择器与并集选择器 五. 序列选择器 六. 属性选择器 七. 伪类选择器 八. 伪元素选择器 九. CSS三大特性 一. ...
- 11. 前端基础--CSS盒子定位
文章目录 前端基础--CSS盒子定位 1. 再看CSS 布局的三种机制 2. 为什么使用定位? 3. 定位详解 3.1 边偏移 3.2 定位模式 (position) 静态定位(static) -了解 ...
- 2023高薪前端面试题(一、前端基础——css)
• 说一下 css 盒模型 盒模型分为IE盒模型和W3C标准盒模型.盒子的宽度和高度的计算方式由box-sizing属性控制. box-sizing属性值 content-box:默认值,conten ...
- 前端基础CSS+html篇 2w字吐血总结
前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色.从狭义上讲,前端工程师使用 HTML.CSS.JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端.移动 ...
- 10-CSS基础-CSS选择器
CSS选择器 标签选择器 什么是标签选择器? 作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性 格式: 标签名称{属性:值; } 注意点: 标签选择器选中的是当前界面中所 ...
- Web前端基础---CSS样式--盒子模型--浮动与定位
Day02 CSS样式 DIV和CSS DIV是层叠样式表中的定位技术,全称DIVision,即为划分.有时可以称其为图层. DIV元素是用来为HTML文档内大块(block-level)的内容提供结 ...
- 三十六、前端基础 CSS
CSS相关 一 CSS简介 二 CSS选择器 2.1 基本选择器 2.2 组合选择器 2.3 属性选择器 2.4 分组与嵌套 2.5 伪类选择器 2.6 伪元素选择器 2.7 选择器优先级 三 字体样 ...
- 前端基础——CSS布局
前端基础学习第三天 文章目录 前端基础学习第三天 一.CSS布局 1.margin(外边距) 2.padding(内边距) 3.position 4.float 二.布局实例 1.浮动布局 2.弹性布 ...
最新文章
- Relay IR表示
- UI设计培训分享:UI设计师如何准备面试?
- hibernate mysql longblob_使用hibernate 插入mysql blob 字段 最大能插入多大的数据
- 小学计算机课计划,小学信息技术教学工作计划
- Python Flask-表单提交方式
- 机房重构 之 抽象工厂+反射+配置文件 实现数据库訪问
- Python程序开发——第六章 类与对象
- redis创建像mysql表结构_Redis数据结构列表实现
- c语言串口通信_STM32串口IAP分享
- DST(对话状态追踪)常用方法
- TwinCAT3入门教程4-伺服常用功能程序实现
- 值得每个人看的一篇文章——沉没成本和赌徒黑洞理论(Matlab代码实现)
- Perl下载和安装Python下载和安装
- Mac字体路径,解决matplotlib中文显示问题,超级好用~
- SudaMod-81.0 / crDroidAndroid-8.1(android-8.1.0_r20)红米3 2018年5月3日更新
- 需求分析与开发时间评估
- c语言指针移动函数,fseek c语言指针移动函数
- 升级鸿蒙OS后原来APP还在,更新后APP数据原封不动,鸿蒙系统被嘲讽就换了一个开机动画...
- Ubuntu1804安装Mysql
- 【物理应用】基于相场法模拟金属镍的晶粒的长大过程附matlab完整代码
热门文章
- python画图哆啦a梦-Python小白绘图 哆唻A梦 turtle真的很强大!
- python编写程序的一般步骤-Python:开发_基本流程
- python显示无效语法怎么处理-python – 无效语法(对于循环括号/括号)
- python基础第三章选择结构答案-Python days03-选择结构【if】
- Word的常用功能设置(
- LeetCode Contains Duplicate III(滑动窗口)
- 浅谈网络游戏《天龙X部》的文件加密格式
- redis主从配置 从而实现数据备份和读写分离
- T2821 天使之城 codevs
- myeclipse乱码