基础选择器css,css以及选择器基础

CSS样式基础了解

1.css基础语法

CSS样式的出现是为了将内容和表现分离极大的提高了工作效率

内联样式(在 HTML 元素内部)

标签名>

内部样式表(位于

标签内部)

h1

{color: maroon}

h2

{color: blue}

外部样式表(实现了内容与表现的分离，推荐使用)

先建立外部样式表文件(*.css)使用HTML的link对象

rel="stylesheet"描述了当前页面与href所指定文档的关系

三、CSS选择器【重点】

1.css基础先择器

①元素选择器(有特殊功能的标签做)

h1{

color: yellow;

}

②类选择器(class)

.a{

background-color: #00ABFF;

}

使用方法：

第一步：使用合适的标签把要修饰的内容标记起来，如下：

Web开发

第二步：使用class="类选择器名称"为标签设置一个类，如下：

Web开发

第三步：设置类选器css样式，如下：

.one{color:red;}

样式层叠

③ID选择器(id)

#b{

background-color: red;

}

Id和class的区别主要在于，在一个文档中【重点】

Id不能重复使用，指一个元素的唯一标识符

Class可以重复使用，指同一类的多个对象

用class表现共性，表示一类带有共同特征的对象，class可以复用

用id作为唯一标识符，同一网页中id不能重复出现

三种基本选择器的组合形态：

元素.{}

元素#{}

④包含选择器

选择所有被E1包含的E2。中间用空格分隔。

语法： E1 E2

#content p{

color: green;

}

⑤选择器分组

将同样的定义应用于多个选择符

语法： 选择器1，选择器2，选择器3

p,h2,h1{

background-color: pink;

}

可以避免重复写代码

⑥子元素选择器

X>Y：子元素选择器(不能跳级)

页面布局常见命名规范

参考：http://wenku.baidu.com/link?url=ZErK6r8GecSTpcrKUfnmW_ks1VhZyvuW9yiUVS83c_40fImZ4ZUG2_nBSA4i-j7tkEXaPdUrdR3_ABc3PYaB2AduDZzzuXa577OQii9zXyS

⑦css高级选择器

通用元素选择器

*{

}

相邻元素选择器

需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器

X + Y：X之后的第一个Y类型兄弟元素

X ~ Y：X之后的所有Y类型兄弟元素

⑧伪类【重点】

锚伪类

a:link {color: #FF0000}/* 未访问的链接 */

a:visited {color: #00FF00}/* 已访问的链接 */

a:hover {color: #FF00FF}/* 鼠标移动到链接上 */

a:active {color: #0000FF}/* 选定的链接 */

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

文本伪类(伪元素)伪元素只能用于块级元素。

:first-line用于向文本的首行设置特殊样

:first-letter用于向文本的首字母设置特殊样

:before在元素之前添加内容。

:after在元素之后添加内容。

结构性伪类(什么情况下比较常用)

:first-child 选择器表示的是选择父元素的第一个子元素

:last-child 选择器选择的是选择父元素的最后一个子元素

X:nth-of-type(n) X:nth-child(n)

X:only-of-type X:first-child

X:first-of-type X:last-child

X:last-of-type(n) X:only-child

属性选择器(表单样式设计常用)

input[type=text]{

border-color: red;

}

前端基础：CSS样式选择器

前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...

CSS的选择器