CSS 学习路线(二)选择器

选择器

规则结构:

分两个基本部分选择器(selector)和声明块(declaration block) 组成

声明块:由一个或多个声明组成,每一个声明都是属性-值对

选择器分为:元素选择器,类选择器,后代选择器,通配选择器,ID选择器,属性选择器,伪类选择器.子元素选择器,相邻兄弟选择器.

元素选择器:往往是html元素,但是在XML允许创造新的标记语言.

eg:h1 p

h1{font-size:14px;}

类选择器:应用样式而不考虑具体涉及的元素.

eg:

.main{font-size:14px;}}

123

ID选择器:和类选择器差不多.区别在于只能在文档运用一次,多次不符合规范,

eg:

#main{font-size:14px;}}

123

通配选择器:运用在全局,但是不推荐.易出错.

eg:

*{font-size:14px;}

后代选择器:运用在父元素的所有子元素上,

eg:

h1 p{font-size:14px;} //运用在h1下的所有p元素

子元素选择器:运用在父元素的第一代子元素上

eg:

h1 > p{font-size:14px;} //运用在h1下的第一代p元素

相邻兄弟选择器:相同父元素下,选择紧跟着另一个元素后的元素

eg:

h1 p{font-size:14px;}//运用在h1和p的父元素下,接下来的P元素

属性选择器:根据元素的属性来选择元素,分为四种:简单属性选择,具体属性选择,部分属性选择,特定元素选择

简单属性选择:

h1[class]{color:red;}

hello world

具体属性选择:

h1[class="main"]{color:red;}

hello world

部分属性选择:

h1[class*="main"]{color:red;}//含有就可以

h1[class^="main"]{color:red;}//main开头的元素

h1[class$="main"]{color:red;}//main结尾的元素

h1[class~="main"]{color:red;}//独立单词的元素

hello world

特定属性选择:

*[lang|="en"]{color:red;}

Hello

伪类元素选择器:为链接选择

eg:

顺序为LVHA

a:link{color:red;}//未访问的链接

a:visited{color:green;}//已访问的链接

a:hover{ color:red;}//悬浮在链接上

a:active{color:yellow;}//激活后的链接

还有 p:first-child 第一个子元素

:first-letter 首字母样式

:first-line 第一行样式

:before 之前插入内容 //body:before{content:"hello ";}

:after 之后插入内容 //body:after{content:"hello ";}

这是我总结的部分选择器基础知识.

更多专业前端知识，请上【猿2048】www.mk2048.com

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学习之二实践盒子
学习计算机技术,应用为主,一定要实践,实践,实践. <!DOCTYPE html> <html lang="en"> <head> <me ...
CSS 学习路线(一)元素
元素(element) 类型:替换和非替换元素替换元素(replaced element): 用来替换元素内容的部分并非由文档内容直接显示. eg:img input 非替换元素(nonreplac ...

CSS 学习路线(二)选择器

CSS 学习路线(二)选择器相关推荐

最新文章

热门文章