CSS学习笔记（二）选择器

CSS常用选择器一般有：

1.类型选择器

p{color:#FF0000;}

h1{font-weight:bold;}

2.后代选择器

li a{text-decoration:none;}

上述两种样式适用于那些应用范围广的一般性样式。

对于更特定的元素可以适用：

1.ID选择器

ID选择器由#表示

#intro{font-weight:bold;}

2.类选择器

类选择器由.表示

.datePosed{color:green;}

一般由上述几个混合选择器作为很好的方式，

伪类

有时候，希望根据文档结构之外的其他条件对元素应用样式

如：a:link{color:green;}

:link和:visited称为链接伪类，只应用于锚元素。:hover,:active,:focus称为动态伪类，理论上可以应用于任何元素。

但现在只有少数浏览器支持这些功能（firefox）

通用选择器

一般应用于页面上所有元素

*{padding:0;margin:0;}

高级选择器

1.子选择器

子选择器只对选择元素的直接后代，即子元素起作用

#nav > li {backgroud:url(folder.png)no-repeat left top;}

　　<li>Server</li>

　　　　<ul>

　　　　　　<li>Desgin</li>

　　　　</ul>

　　<li>Contact Us</li>

</ul>

只对外层列表起作用

2.相邻同胞选择器

只对其后同一个父元素下的相邻元素

h1 + p {font-weight:bold;}

<h1>Main Heading</h1>

<p>Frist paragram</p>

<p>Second paragram</p>

3.属性选择器

abbr[title] {border-bottom:1px dotted #999;}

abbr[title]:hover {cursor:help;}

转载于:https://www.cnblogs.com/qixing/archive/2013/01/10/2855107.html

CSS学习笔记（二）选择器相关推荐

css中怎么加入立体模型,CSS学习笔记二：css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
CSS学习笔记之选择器（一）
目录 CSS选择器标签选择器 id选择器 class选择器后代选择器群组选择器 * CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是您需要改变样式的 HTML 元素. ...
CSS学习笔记(二) 移动WEB开发
思维导图文章目录思维导图 1. 移动端基础 1.1 浏览器现状 1.2 手机屏幕现状 1.3 移动端调试方法 2. 视口 2.1 布局视口 2.2 视觉视口 2.3 理想视口 2.4 视口总结 2 ...
CSS学习笔记 2.选择器.常用.复合.关系选择器
一.常用选择器 1.元素选择器(标签选择器) 使用HTML标签作为选择器的名称 p{color:green;font-size:20px;/* 1元素选择器根据标签名来选中元素 */}/* 此为cs ...
CSS学习笔记(二) －－－－盒子模型
我们日常生活中的盒子大概见了不少了,且都为六面体,也就是说是立体的. 那么它到底跟我们学习CSS里面的盒子模型到底有些啥区别呢,之前看过不少的书,千篇一律的一句话代过,讲的也不太细,或者是讲的非细但我 ...
【温故知新】CSS学习笔记（选择器）
选择器(选择符) 目的是选择目标元素(选择标签用). 这里我们介绍四种基础选择器. 1.标签选择器之前的例子都属于标签选择器,可以把某一类的标签全部选择出来: 2.类选择器上面点声明,下面clas ...
CSS学习笔记二：css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
CSS 学习路线(二)选择器
选择器规则结构: 分两个基本部分选择器(selector)和声明块(declaration block) 组成声明块:由一个或多个声明组成,每一个声明都是属性-值对选择器分为:元素选择器,类选 ...
媒体查询配合rem使用（HTML+CSS学习笔记二十一）
媒体查询 + rem 计算方法计算rem方法: 结合媒体查询 -> 随着设备的改变更改html font-size的值. 媒体查询确定范围?? 移动端设计图 : 640px 750p ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...

CSS学习笔记（二）选择器

CSS学习笔记（二）选择器相关推荐

最新文章

热门文章