css 选择器分类总结

css 选择器分为以下四种:

1,html元素选择器

以html元素标签名字显示

body{
bgcolor:green;
}

p{
color: red;
}

2,id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 "#" 来定义。在html主题中,id属性值始终是唯一的

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

#red{
color:red;
}

#green {
color:green;
}

3 ,class类选择器

class选择器,以点(.)显示

<p class="center">
This paragraph will also be center-aligned.
</p>

.center {
text-align: center;
}

4,派生选择器,(html,id,class属性,都有派生选择器)

li strong {
    font-style: italic;
    font-weight: normal;
  }
 
.center strong
{
    font-style: italic;
    font-weight: normal;
  }
时间: 2024-07-30 10:02:24

css 选择器分类总结的相关文章

css选择器分类

css选择器大致可以分为10大类: 1.元素选择器 如:p{} 2.类选择器 如:.xx{} 3.ID选择器 如:#xx{} 4.关联选择器 如:p a{} 5.子元素选择器 如:p>a{} 6.相邻兄弟选择器 如:p+a{},匹配的是紧邻p元素后面的a元素 7.组合选择器 如:p,a{} 8.元素选择器 如:img[alt],匹配包含alt属性的img元素 9.伪类选择器 如:a:hover{} 10.伪元素选择器 伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 c

css选择器分类及运用

一. CSS常用选择器 1.*选择器:所有元素选择器,一般用于整个页面的整体设计,写在css文件开头部分. 2.#选择器:id选择器,一个id在页面中是唯一的,一般用于JS部分. 3..选择器:类选择器,CSS部分最常用也是最有用的选择器,可以大大简化程序和减少编程工作量. 上述为选择器的三大类. 二.运用方法 1.采用选择器选择对应的元素,对元素设置样式. 如:  .class{style样式} #id   {style样式} * {设置所有元素样式}2.选择器之间可以自由组合完成对后代和子代

CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成前台网页制作.小强老师是这样分类的,前几次课,我们将CSS+DIV入门基础,后几天课程我们讲案例制作.咱们接下来讲的是css基础部分. 高清视频地址如下: 01  css语法规范:                       http://www.tudou.com/programs/view/8s

CSS选择器效率问题

今天学习了CSS各类选择器,对其效率问题有些疑问,故总结了一些学习笔记 有很多人都忘记了,或在简单的说没有意识到,CSS在我们手中,既能很高效,也可以变得很低能.这很容易被忘记,尤其是当你意识到你会的太少,CSS代码效率很低的时候. 下面的规则只真正被应用到那些速度要求很高,有成百上千的DOM元素被绘制在页面上的大型网站.但是,实践出真理,这和你是在创建下一个Facebook,还是写一个本地的展示页面都没有关系,多知道一点总是好的. CSS选择器: 对我们大多数人来说,CSS选择器并不陌生.最基

CSS选择器的优化

前面花了几个篇幅着重介绍了CSS的选择器的使用,我将其分成三个部分:CSS3基本选择器.CSS3属性选择器详解以及CSS3伪类选择器详解.那么今天我主要想和大家一起来学习——CSS选择器方面的性能优化.因为对性能这一块一直都是很弱的,所以今天先从选择器开始入手,加强自己.如果你也感兴趣那就跟我一起来吧. 浏览器如何识别你的选择器 首先我们需要清楚,浏览器是如何读取选择器,以识别样式,并将相应的样式附于对应的HTML元素,达到美化页面的效果.Chris Coyier曾在<Efficiently R

CSS选择器优先级总结

CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看一下css选择符(css选择器)有哪些? 1.标签选择器(如:body,div,p,ul,li) 2.类选择器(如:class="head",class="head_logo") 3.ID选择器(如:id="name",id="name_t

CSS 选择器【详解】

转自:http://www.cnblogs.com/polk6/archive/2013/07/19/3142142.html CSS 选择器及各样式引用方式介绍 一个好的界面,是一个Web吸引人们最大的卖点. Css :层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素. 1.选择器的分类 语法结构: 1.1 Id选择器 1.1.1 格式 #id :#+元素的id:id是区分大小写. 1.1.2 示例 #title1 {background-color:B

CSS 选择器及各样式引用方式介绍

引用自 :我们都是从菜鸟开始 CSS 选择器及各样式引用方式介绍 一个好的界面,是一个Web吸引人们最大的卖点. Css :层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素. 1.选择器的分类 语法结构: 1.1 Id选择器 1.1.1 格式 #id :#+元素的id:id是区分大小写. 1.1.2 示例 #title1 {background-color:Blue;border-width:thick;} 1.2 Class 类选择器 1.2.1 格式

css选择器的使用详解

-.css选择器的分类: 二.常用选择器详解: 1.标签选择器: 语法: 标签名 { 属性:属性值; } 代码示例: h1 { color: #ccc; font-size: 28px; } 2.类选择器: 语法: .类名 { 属性:属性值: } 代码示例: .top { margin-top:25px; } <div class="top"></div> 3.id选择器: 语法: #ID名称 { 属性:属性值; } 代码示例: #top { padding-t