css 可以定义不同的标准 来选择可以进行格式化的元素。
1. 元素所在的类型或名称
。如
h1 {color:red;}
p {color:red;}
2.元素所在的位置信息。
如
2.1 选择某个元素下所有的子元素
div p{color:red;}
2.2 选择某个元素下的直接儿子元素
div > p{color:red;} IE6及其以下版本不支持
2.3 选择相邻的同胞
h1 + p {color:red} 紧跟在h1后面的p IE6及其以下版本不支持
3. 元素的class 或 id
.class1 {color:red;}
#id1 {color:red;}
3.1 1,3可以不加空格联合表示,同时满足两个条件
p#id1 {color:red}
p.class1{color:red}
4.元素的伪元素或伪类
4.1 伪类 IE6及其以下版本不支持
div p:fist-child {color:red} div 的第一个p子元素
4.2 伪元素
p:first-letter {color:red;}
4.3 链接的状态 (属于伪类)
a :link .... LVFHA (love f hate)
伪的理解:
伪类:浏览器预定义的一些选择特定状态(hover)dom节点元素(first-child)的方式
伪元素:浏览器定义的访问不属于dom节点的元素的方式(文本第一行,第一个字)
5:元素的属性值 IE6及其以下版本不支持
p[attr = value] {color:red}
6.群组元素
p,h1 {color:red} == p{color:red;} h1{color:red;}
通用选择器 *{margin:0} 作用于页面中所有的可用元素
7.1 -6 的组合使用
div.class1 p em:first-letter {color:red;}
只选择在class等于class1的div元素中的p元素中,em元素的第一个字母
分享到:
相关推荐
CSS选择器的权重分为四类:内联样式、ID选择器、类选择器/属性选择器/伪类、以及元素选择器/伪元素。它们对应的权重分别是: 1. 内联样式(如`style="..."`):1000 2. ID选择器(如`#example`):100 3. 类选择器/...
1. CSS选择器:详述类选择器、ID选择器、元素选择器、伪类和伪元素等,以及更高级的选择器如属性选择器和兄弟选择器。 2. 盒模型:解释盒模型的概念,包括margin、border、padding和content的计算方式。 3. 层叠和...
jQuery选择器基于CSS选择器,并在其基础上扩展了一些更强大的功能,使得开发者能以更加灵活的方式定位和操作DOM元素。 1. **标签选择器**: 标签选择器通过指定HTML标记名来选取元素,例如`$("div")`会选取页面上...
1. **基本概念**:解释CSS的工作原理,包括选择器、属性和值的概念,以及它们如何共同决定元素的样式。 2. **选择器**:详细介绍各类选择器,如元素选择器、类选择器、ID选择器、属性选择器、伪类和伪元素等,以及...
8. **CSS3新特性**:涵盖CSS3的新选择器、过渡效果、动画、阴影、圆角、多列布局等,这些都是现代网页设计的重要组成部分。 9. **响应式设计**:讲解如何使用媒体查询@media实现响应式布局,使网页在不同设备上都能...
4. **选择器和优先级**:深入探讨了CSS选择器的层次和优先级,包括通配符选择器、后代选择器、伪类和伪元素等,以及如何控制样式的覆盖规则。 5. **颜色、字体和文本**:介绍如何设置颜色、字体样式、行高、对齐...
2. **选择器和特异性**:详细讲解不同类型的CSS选择器,包括基本选择器、伪类和伪元素,以及选择器的特异性计算,理解这些可以帮助优化CSS优先级。 3. **盒模型**:解释CSS盒模型,包括内容、内边距、边框和外边距...
1. CSS选择器:了解各种类型的选择器,如基本选择器(元素选择器、类选择器、ID选择器)、伪类选择器(`:hover`、`:active`、`:focus`等)以及高级选择器(子选择器、相邻兄弟选择器等),它们是如何定位和影响HTML...
1. CSS选择器:讲解如何选择HTML元素,如类选择器、ID选择器、标签选择器等。 2. 属性与值:介绍各种CSS属性,如颜色、字体、边距、填充,以及如何设置这些属性的值。 3. 层叠和继承:解释CSS规则的优先级和继承机制...
几个常用 CSS 属性的简短写法 精简 CSS 代码有很多种方法,但其中最常用的方法可能就是使用属性的简短形式。 具有简短写法的 CSS 属性很多,但是常用的属性无外乎字体、列表、背景、边框、透明等几种,所以在此对这...
6. **选择器与优先级**:解析CSS的选择器层次,包括组合选择器(如子元素选择器>``、相邻兄弟选择器+`、一般同胞选择器~`)和特异性计算,以及如何控制样式覆盖。 7. **CSS3新特性**:涵盖CSS3的新选择器(如`:nth-...
首先,基本选择器是最为常用的,它包括ID选择器、类选择器、标签选择器以及通配符选择器。ID选择器使用井号(#)加上元素的ID来选取,类选择器使用点(.)加上类名来选取,标签选择器直接使用HTML标签名来选取,而通配符...
1. **基础概念**:解释CSS的基本概念,如选择器、声明、属性和值,以及CSS的盒模型理论,包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。 2. **选择器**:详述各种类型的选择器,如元素选择器...
...在头部,通常会包含元信息(如字符...这包括理解HTML标签的结构和语义,掌握CSS选择器和样式规则的运用,以及如何组织和引用图像资源。对于想要创建自己博客或者提高前端开发技能的人来说,这是一个很好的学习资源。
这一集可能会介绍更高级的选择器,如属性选择器和组合选择器,以提高CSS的定位精确性。 2. **盒模型**:CSS盒模型是理解布局的基础,包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。视频可能...
1. **选择器**:解释类选择器、ID选择器、元素选择器、后代选择器、伪类和伪元素等,以及如何组合使用它们。 2. **盒模型**:涵盖width、height、padding、border和margin,理解盒模型对元素布局的影响。 3. **...
2. **选择器**:讲解各类选择器,如元素选择器、类选择器、ID选择器、属性选择器等,以及如何使用它们来定位并应用样式。 3. **属性和值**:详述各种CSS属性,如颜色、字体、边距、填充、位置、布局等,并演示如何...
2. **选择器和属性**:讲解了CSS中的选择器,如元素选择器、类选择器、ID选择器等,以及如何通过属性来设置样式,例如颜色、字体、大小、边距等。 3. **盒模型**:详细解析CSS盒模型,包括内容(content)、内边距...
6. **选择器优先级**:理解CSS选择器的优先级,包括内联样式、内部样式表和外部样式表的权重,以及如何通过`!important`强制应用特定样式。 7. **响应式设计**:学习使用`media queries`来实现不同设备和屏幕尺寸下...