IT兄弟连 HTML5教程 CSS3揭秘 CSS选择器2

4  关联选择器

关联选择器只不过是一个用空格隔开的两个或更多的单一选择器组成的字符串。这些选择器可以指定一般属性,而且因为层叠顺序的规则,它们的优先权比单一的选择器大。这种方式只对在第一个元素里关联的第二个元素定义(只要具有关联关系即可,关系的元素中间可以有多层其他HTML元素),对单独的第一个元素或第二个元素无定义。如下所示:

table a { color: red}                          /*  只有在表格<table>内的链接<a>改变了样式  */

本例定义了在表格<table>内的链接<a>改变了样式,文字颜色为红色,而表格外链接的文字颜色没有改变。

5  组合选择器

为了减少样式表的重复声明,组合选择器声明是允许的,只要用英文逗号(,)隔开选择器就可以了。例如,文档中所有的标题可以通过组合给出相同的声明,如下所示:

h1,h2,h3,h4,h5,h6 { color: red;font-family: sans-serif }          /*  使用组合选择器修饰标题  */

6  伪元素选择器

伪元素选择器是指对同一个HTML元素不同状态的一种定义方式。例如,对于<a>标签的正常状态、访问的状态、选中状态、光标移到超链接文本上的状态,就可以使用伪元素选择器来定义。其语法结构如下:

HTML标签:伪元素{属性:值;}                         /*  伪元素选择器的语法结构 */

每个伪元素都以英文的“:”开头,后面的伪元素名称根据作用不同有各自固定的写法。而冒号前面需要指定使用伪元素的HTML标签,目前只有<a>或<p>标签可用。指定超链接元素以不同的方式显示链接(links)、光标移动到超链接上(hover links)、已访问链接(visited links)和可激活链接(active links)时,定位伪元素可给出link、hover、visited或active。一个已访问的链接可以定义为不同的颜色显示,甚至不同的字体大小和风格。如下所示:

本例的效果是使当前链接在访问状态下,以不同颜色、更大的字号显示。而当网页的已访问链接被重选时,又以不同颜色、更小的字号显示。

注意,多个CSS选择器同时作用在同一个HTML元素上时,声明不同的属性具有继承的关系。如果声明的是相同属性,则以优先级高的选择器为主。主要选择器的优先级关系如下:

关联选择器 > ID选择器 > 类选择器 > HTML选择器     à从左向右CSS选择器的优先级递减

原文地址:https://www.cnblogs.com/itxdl/p/11756661.html

时间: 2024-10-05 20:18:50

IT兄弟连 HTML5教程 CSS3揭秘 CSS选择器2的相关文章

IT兄弟连 HTML5教程 CSS3揭秘 CSS选择器1

HTML有标签,CSS就有选择器,选择器就是赋予内部或者外部样式表的名字,当查找到一个或多个HTML元素后,再通过声明属性加样式.常用的样式选择器包括:HTML选择器.类选择器.ID选择器.组合选择器.关联选择器.伪类和伪元素. 1  HTML选择器 HTML选择器,即HTML的标签,用来改变一个指定标签的样式.任何HTML元素都可以是一个CSS的选择器,用于找到和选择器同名的HTML元素.如下所示: 2  类选择器 同一个选择器能有不同的类(class),因而允许同一个元素有不同的样式.例如,

IT兄弟连 HTML5教程 CSS3揭秘 CSS规则的组成

CSS和HTML一样都是由W3C制定的标准,本章中介绍的特性和功能还是来源于CSS1和CSS2(CSS2是根据CSS1扩展的).W3C也有新的版本更新,称为CSS3.虽然浏览器已经准备开始实现CSS3某些方面的内容,但当前浏览器仍然无法支持某些特性.一张样式表由样式规则组成,以告诉浏览器怎样去呈现一个文档.如图6.2所示给出了关于CSS规则的一个示例. 图6.2  CSS规则组成 CSS的规则主要由“选择器”和“声明”两部分组成,选择器指定声明应用于哪个或哪些元素(后面有详细讲解).例如,任何H

IT兄弟连 HTML5教程 CSS3揭秘 CSS简介

HTML使用标签将内容放到网页上,也可使用元素和属性来控制简单的文档外观.如果希望更全面地控制Web页面的外观和布局,则需要使用层叠样式表(简写为CSS).CSS规范的工作原理在于允许用户制定一些规则,描述文档中元素内容的表现形式,通过设置不同的规则控制页面中每一个元素的外观,包括字体的颜色和大小.线的宽度和颜色.页面中各项之间的空白量,以便使页面看上去更令人感兴趣.CSS和HTML一样是所有网页制作技术的核心与基础,是为HTML制定样式的机制,能控制浏览器如何显示HTML中的每个元素及其内容.

IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值1

CSS中的样式属性比较多,经常使用的属性可以分为这么几类:字体.文本.背景.位置.边框.列表,以及其他一些样式属性.每个类中的属性都可以单独使用:如果同一个类中多个属性一起使用,还可以将它们整合为一行解决. 1  字体属性 通过字体属性可以设置字体的族科,改变字体的大小和风格,也可以调整字体加粗,以及让字体变形等.修饰字体的所有属性.值及描述如表6-1所示. 表1  CSS中修饰字体的属性 分别使用表1中字体类的每个样式属性,指定HTML的段落元素p中的字体为bold(粗体).italic(斜体

IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值2

3  背景属性 大多数HTML元素都允许控制背景,包括背景颜色.背景图像.背景重复.背景附件.背景位置等属性.常见的控制背景属性.值及描述如表2所示. 表2  CSS中常见的控制背景的属性 除了使用表6-2中提供的背景属性控制HTML元素的背景样式,也可以将其简化为使用一行代码解决.通过背景类中的background属性实现,语法格式如下所示: background:  <背景颜色> || <背景图像> || <背景重复> || <背景附件> || <

IT兄弟连 HTML5教程 CSS3揭秘 在HTML文档中放置CSS的几种方式

有很多方法将样式表加入到HTML中,每种方法都有自己的优点和缺点.新的HTML元素和属性已被加入,以允许样式表与HTML文档更简易地组合起来.将样式表加入到HTML中的常用方法有内联样式表.嵌入一张样式表或链接到一张外部的样式表. 1  内嵌样式表 样式可以使用style属性内联,该属性可以应用于任意body元素(包括body本身),除了basefont.param和script标记.这个属性将任意数量的CSS声明当作自己的值,而每个声明用分号隔开,如下所示: <p style="colo

IT兄弟连 HTML5教程 CSS3揭秘 CSS3概述

对于Web开发者来说,CSS3不只是一门新奇的技术,更重要的是这些全新概念的Web应用给开发人员带来了无限的可能性,也极大地提高了开发效率.我们不必再依赖图片或者JavaScript去完成圆角.多背景.用户自定义字体.3D动画.渐变.盒阴影.文字阴影.透明度等提高Web设计质量的特色应用. 1  CSS3在选择器上的支持 CSS3在选择器上的丰富支持使得开发人员可以灵活地控制样式.通过选择器的使用,开发人员不再需要在编辑样式时使用多余的.没有任何语义的class属性,而可以直接将样式与元素绑定起

IT兄弟连 HTML5教程 CSS3属性特效 文字排版

direction定义文字排列方式,所有浏览器都兼容这个属性,有两个可选值rtl和ltr.文字排版的参数说明如表1所示. 表1  CSS3文字排版参数说明 上表所示,ltr是初始值,表示left-to-right,就是从左往右的意思,具体描述就是内联内容从左往右依次排布.我们平时网页的处理都是这样的,比方说前后两个图片,默认情况下,DOM在前的就显示在左边. rtl则是另外一个值,right-to-left缩写,就是从右往左的意思,再具体描述下,就是内联内容是从右往左依次排布的,加入应用了这个C

IT兄弟连 HTML5教程 CSS3属性特效 文字阴影

文字阴影是可以叠加的.最基本可以给出四个值,用法如下: text-shadow:x y blur color 文字阴影的参数说明如表1所示. 表1  CSS3文字阴影参数说明 横向偏移量和纵向偏移量可以为负值,代表文字阴影向左偏移或向上偏移.文字阴影是可以叠加的,但是加很多层,会影响页面加载速度.添加多层阴影用“,”隔开.阴影叠加是先渲染前面的,再渲染后面的. 1.最简单的用法 text-shadow:2px 2px 4px #000; 此语法说明为一段文字设定横向偏移量为2px,纵向偏移量为2