初窥css---选择器及相关特性
选择器及相关特性
基础选择器
标签选择器
相当于全选,在我看来局限性较大,也没啥意义的感觉,用处不太大
id选择器
有利于对于某个小盒子的部分属性进行改变,但是若是需要改的小盒子很多的话,就会很麻烦
在同一个html文件中尽量不要出现相同id
使用方法: #id
类选择器
有利于处理多个但并不是全部盒子,是对于id选择器的优化选择器。
在html文件中允许类名相同,并且类选择器主要就是为了处理类名相同情况的
使用方法:.类名
高级选择器
后代选择器
通过标签之间的嵌套关系,层级关系,限定范围再查找
使用方法:“.”+class+" "+后代
好处是啥:既然是高级选择器,那么肯定能够完成一些低级选择器完成不了的事情,就比如说“.class li”这里面,就是选中一个类中的全部的li,当然如果我们用基本选择器的id选择器肯定能做到,但是也太麻烦了把。
交集选择器
弥补了后代选择器的缺点。即更加细分了我们要找的标签
使用方法:多个标签同时使用
举例:li.one 所有的li标签中一个类名为one的部分。
并集选择器
有很多元素可能具有相同的css样式,我们可以将他们全部写出来,进行统一修改其某些属性。
使用方法:标签,标签,标签。。。。。
通配符
*(现已经不常用了,因为其效率不高,可以选中包括body在内的所有标签)
继承性与层叠性
继承性
某些元素具有默认属性,我们如果没有人为的进行更改的话,这些元素将一直体现默认属性。
float:无法继承 文本,字体属性可以继承。
层叠性
当我们同时对某些元素的属性进行设置时,最终属性体现为层叠在最上方的。
一些代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>css初学</title>
<style>
div,dd,dl,dt,p{
margin: 0;
padding: 0;
}
.ha dt{
color: deepskyblue;
font-family: "楷体";
font-size: 40px;
width: 120px;
border: solid ;
}
.ha dd{
color: deepskyblue;
font-family: "楷体";
font-size: 20px;
width: 120px;
border: solid ;
}
#hehe dt,#hehe dd{
color: deepskyblue;
font-family: "楷体";
font-size: 20px;
width: 120px;
border: solid ;
}
</style>
</head>
<body>
<!--本篇是对于高级选择器的使用-->
<div class="ha">
<div>
<dl>
<dt>汪星人</dt>
<dd>吃饭</dd>
<dd>睡觉</dd>
<dd>看大门</dd>
<dd>玩</dd>
<dd>看电视</dd>
</dl>
</div>
</div> <div class="haa">
<div>
<dl id="hehe">
<dt>汪星人</dt>
<dd>吃饭</dd>
<dd>睡觉</dd>
<dd>看大门</dd>
<dd>玩</dd>
<dd>看电视</dd>
</dl>
<dl id="xixi">
<dt>喵星人</dt>
<dd>吃饭</dd>
<dd>睡觉</dd>
<dd>抓老鼠</dd>
<dd>玩</dd>
<dd>看电视</dd>
</dl>
</div>
</div>
</body>
</html>
<!--对于这里的交集选择器最好是最后一步是涉及到嵌套关系。-->
初窥css---选择器及相关特性的更多相关文章
- 了解HTML CSS选择器操作和特性
子选择器 在CSS样式表中, 有时候我们需要为一个选择器进行再次的选择, 比如要为某段落标签下的<span>标签进行样式设定(<span>标签必须为段落标签下的第一代子元素, ...
- 初窥css---包含一些概念和一些文字样式
初窥css CSS相关概念 全称是层叠式样式表.规定了html在网页上的显示样式.我们都知道css主要是负责装饰页面的,但是其实在HTML4之前,网页的样式与架构全部都是写在一起的,也是在HTML4之 ...
- CSS 选择器继承和层叠
CSS选择器及其继承特性.层叠特性1.基本选择器 标记 id class 这个就不再作介绍了 2.复合选择器 交集 交集选择器由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集 其 ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位(position)z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- jQuery源码学习(2):选择器初窥
选择器初窥 代码架构: jQuery选择器可以依照传入数据的类型分为五大类: 传入字符串:$("div"), $("#id"), $(".div1&q ...
- CSS.01 -- 选择器及相关的属性文本、文字、字体、颜色、
与html相比,Css支持更丰富的文档外观,Css可以为任何元素的文本和背景设置颜色:允许在任何元素外围设置边框:允许改变文本的大小,装饰(如下划线),间隔,甚至可以确定是否显示文本. 什么是CSS? ...
- HTML+css基础 css的几种形式 css选择器的两大特性
3.外联样式 css选择器的两大特性 1.继承性:所有跟文本字体有关的属性都会被子元素继承.且权重是0000. 2.层叠性:就是解决选择器权重大小的一种能力,就是看那个选择器的权重大.谁的权重大听谁的 ...
- css基础-css选择器和css文本样式相关
css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 : ...
- Scrapy 1.4 文档 01 初窥 Scrapy
初窥 Scrapy Scrapy 是用于抓取网站并提取结构化数据的应用程序框架,其应用非常广泛,如数据挖掘,信息处理或历史存档. 尽管 Scrapy 最初设计用于网络数据采集(web scraping ...
随机推荐
- Microsoft Power BI 学习笔记
Power Bi 学习笔记 一 Power BI 是微软发布的一系列的软件服务.应用和连接器,这些软件服务.应用和连接器协同工作,将不相关的数据源转化为合乎逻辑.视觉上逼真的交互式见解. ...
- 读Cassandra源码之并发
java 并发与线程池 java并发包使用Executor框架来进行线程的管理,Executor将任务的提交与执行过程分开,直接使用Runnable表示任务.future获取返回值.ExecutorS ...
- springboot的war和jar包
本篇和大家分享的是通过maven对springboot中打war包和jar包:war通常来说生成后直接放到tomcat的webapps下面就行,tomcat配置自动解压war,而jar一般通过命令行部 ...
- 【Dubbo篇】--Dubbo框架的使用
一.前述 Dubbo是一种提供高性能,透明化的RPC框架.是阿里开源的一个框架. 官网地址:http://dubbo.io/ 二.架构 组件解释: Provider: 提供者.发布服务的项目.Regi ...
- SpringBoot整合Swagger2,再也不用维护接口文档了!
前后端分离后,维护接口文档基本上是必不可少的工作.一个理想的状态是设计好后,接口文档发给前端和后端,大伙按照既定的规则各自开发,开发好了对接上了就可以上线了.当然这是一种非常理想的状态,实际开发中却很 ...
- BaiduSpeechDemo【百度语音SDK集成】(基于v3.0.7.3)
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 本Demo将百度语音SDK(其中一部分功能)和自定义的UI对话框封装到一个module中,便于后续的SDK版本更新以及调用. 本De ...
- RecyclerView和ListView比较
题记: RecyclerView说是目前最重要的控件也不为过,ListView虽然被RecyclerView光芒掩盖,但也仍有着自己的d地位:这个问题不是很偏重原理或实践,而更多的是,针对面试中会问到 ...
- 知识小罐头09(tomcat8启动源码分析 下)
初始化已经完成,现在就是启动这些组件,Tomcat中的start方法就是用于启动的,其实start的原理还是和上一篇说的初始化几乎一样!这里我就大概说一下,看几个比较关键的地方就行了. 前面的步骤就大 ...
- springboot~Integer和int如何选择,Integer的意义何在
今天说一下自己在项目中遇到的问题,然后总结一下Integer引用类型和int值类型 关于默认值 Integer默认为null int默认为0 为什么把数据实体设计成Integer或者不是int 大叔认 ...
- MVC,EF 小小封装
1.项目中经常要用到 EF,有时候大多数的增删改查都是重复性的东西,本次封装就是为了快速开发,期间没有考虑到架构上的各种思想,就感觉到欠缺点什么东西所以这次将这些拉出来,有存在问题的话还请各位多多指导 ...