css选择器的使用详解
-、css选择器的分类:
二、常用选择器详解:
1、标签选择器:
语法:
标签名 {
属性:属性值;
}
代码示例:
h1 {
color: #ccc;
font-size: 28px;
}
2、类选择器:
语法:
.类名 {
属性:属性值;
}
代码示例:
.top {
margin-top:25px;
}
<div class="top"></div>
3、id选择器:
语法:
#ID名称 {
属性:属性值;
}
代码示例:
#top {
padding-top:10px;
}
<div id="top"></div>
注意:ID属性是唯一标识。
4、伪类
语法:
元素:伪类 {
属性:属性值;
}
代码示例:
a:link {
color:blue;
}
5、并集选择器:
语法:
标签名,.类名,#ID名称 {
属性:属性值;
}
代码示例:
p,.top,#title {
color:red;
}
6、后代选择器:
语法:
p span {
属性:属性值;
}
三、通用选择器详解:
语法:
*{
属性:属性值;
}
四、高级选择器详解:
1、子选择器:
代码示例:
#nav>li {
padding-left: 20px;
}
2、相邻同胞选择器:
代码示例:
h2+p {
font-size: 1.4em;
}
3、属性选择器:
代码示例:
[id="header"] {
background: url(branding-color.png) repeat-y left top;
}
a[rel="nofollow"] {
padding-right: 20px;
}
五、样式的优先级(权重):
基本选择器之间:ID选择器〉类选择器〉标签选择器
样式表之间: 行内样式〉内嵌样式〉外部样式
css样式之间: 同一个选择器且两条相同的声明,后一条声明会覆盖前一条声明
css选择器的使用详解的更多相关文章
- css样式继承规则详解
css样式继承规则详解 一.总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...
- css 之position用法详解
css 之position用法详解: http://www.jb51.net/web/77495.html
- CSS定位属性Position详解
CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...
- DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状 语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...
- Css盒模型属性详解(margin和padding)
Css盒模型属性详解(margin和padding) 大家好,我是逆战班的一名学员,今天我来给大家分享一下关于盒模型的知识! 关于盒模型的属性详解及用法 盒模型基本属性有两个:padding和marg ...
- css过渡和2d详解及案例
css过渡和2d详解及案例(案例在下方,不要着急) 本文重点: 1.在2D变化使用过程中,有些需求需要两种或两种以上的变化同时使用, 值得注意的是尽量把位移变化放在最前面,把其他变化放在最后面,属性值 ...
- css之Grid Layout详解
css之Grid Layout详解 CSS Grid Layout擅长将页面划分为主要区域,或者在从HTML基元构建的控件的各个部分之间定义大小,位置和图层之间的关系. 与表格一样,网格布局使作者能够 ...
- CSS样式----css样式表和选择器(图文详解)
本文最初于2015-10-03发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样 ...
- css变换与动画详解
举个栗子:--------元素整体居中.box{ position:absolute;top:50%;left:50%; width:50px; height:50px; t ...
随机推荐
- Dijkstra 单源最短路径算法
Dijkstra 算法是一种用于计算带权有向图中单源最短路径(SSSP:Single-Source Shortest Path)的算法,由计算机科学家 Edsger Dijkstra 于 1956 年 ...
- Angular2学习笔记——路由器模型(Router)
Angular2以组件化的视角来看待web应用,使用Angular2开发的web应用,就是一棵组件树.组件大致分为两类:一类是如list.table这种通放之四海而皆准的通用组件,一类是专为业务开发的 ...
- Axure原型制作规范
一. 名词定义: Sitemap 导航图 Widgets 组件 Master 库 Label 控件名 Interactions 交互动作 Annotations 注释 Location and siz ...
- Docker学习总结
本文作为总结性文章,不会详细讲解Docker.但会把已学习的.了解的内容按照由易到难的顺序串起来,更多的是帮助Docker新手快速的了解Docker,知道目前处在哪个阶段,接下来该学些什么,避免碰太多 ...
- LLBL Gen Pro 5.0 企业应用开发入门
Solutions Design 公司于2016年5月发布了LLBL Gen Pro 5.0,这个新版本的发布出乎于我的意料.我的猜想是从4.2升级到4.5,再升级5.x版本,主版本号的变更会给原有客 ...
- 【Win 10应用开发】响应系统回退键的导航事件
按例,老周今天要讲一个故事,这个故事之前老周在微博上分享过.大伙知道在8.1的时候,有一个扩展类库——NotificationExtensions,可以真TMD轻松生成通知XML模板,其实,这个类库也 ...
- $(document).ready() 与window.onload的区别
1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同 ...
- 【分布式】Zookeeper请求处理
一.前言 在前面学习了Zookeeper中服务器的三种角色及其之间的通信,接着学习对于客户端的一次请求,Zookeeper是如何进行处理的. 二.请求处理 2.1 会话创建请求 Zookeeper服务 ...
- ASP.NET Core 中文文档 第三章 原理(4)路由
原文:Routing 作者:Ryan Nowak.Steve Smith. Rick Anderson 翻译:张仁建(Stoneqiu) 校对:许登洋(Seay).谢炀(kiler398).孟帅洋(书 ...
- 谈谈React那些小事
前言 说起React,那也是近一年多时间火起来的前端框架,其在Facebook的影响力和大力推广下,已然成为目前前端界的中流砥柱.在如今的前端框架界,React.Vue.Angular三分天下的时代已 ...