浅说css的几个选择器

2024-04-08

浅说css的几个选择器(精选5篇)

篇1:浅说css的几个选择器

1.link选择器:link选择器是对未被访问的链接设置样式,目前来说所有的主流浏览器均支持link选择器,一句话来说,link选择器是在你点击链接之前改变链接的一些样式,

2.visited选择器:正如这个选择器的名字一样,visited,这个选择器与link选择器正好相反,它改变已访问链接的设置样式,目前来说所有的主流浏览器均支持visited选择器。

3,.active选择器:active选择器用于选择活动链接,改变它们的设置样式,当你用鼠标点击时,这个链接此时是活动的,active选择器所改变的就是点击一瞬间的那个触发设置样式,目前来说所有的主流浏览器均支持active选择器,

4.hover选择器:hover选择器是选择鼠标指针浮动在其上的元素,并设置其样式。在css的规定中,如果存在:link和:visited,:hover必须位于它们两个的后面才能生效,目前来说所有的主流浏览器均支持hover选择器。

5.focus选择器:focus选择器用来设定鼠标获得焦点的时候的设置样式。它用来选取获得鼠标焦点的元素并在焦点接触时发挥作用,接收键盘事件或其他用户输入的元素都允许 :focus 选择器。目前来说所有的主流浏览器均支持focus选择器,不过如果focus 用于 IE8 ,则必须声明

篇2:浅说css的几个选择器

③ 伪元素和伪类选择器

样例代码如下:...p:first-letter{ font-size: x-large; color: red;}:nth-of-type(2){ background-color: red; color: #000000;}...

④ 联合选择器和反选择器

利用选择器组合实现联合选择和反选择,

电脑资料

篇3:剖析CSS选择器

1 CSS基本选择器

CSS的三个基本组成部分--选择器, 属性和属性值, 其中选择器指定了要设置样式的网页元素, 选择器一般分为基本选择器和复合选择器, 基本选择器又分为标记选择器、类别选择器和ID选择器3种。

1) 标记选择器:一个HTML页面由很多不同的标记组成, 而CSS标记选择器就是申明标记要采用的CSS样式, 每一种HTML标记的名称都可以作为相应的标记选择器的名称, 对HTML标记的默认格式重新定义样式可用标记选择器, 例如代码:h1{color:red font-size:25px;}, 就是对h1标签的样式重新定义了, 凡是页面中使用h1标签的文字都自动采用以上定义的样式。

2) 类别选择器:CLASS选择器的名称是由用户定义的, 它可以应用于任何标签, 可以实现对于同一个HTML标签的不同样式设置, 或者对不同的标签进行相同的设置, 定义时选择符必须以“.”开头。

例如在

中定义CLASS选择器的代码:

3) ID选择器

ID选择器与类别选择器基本相同, 不同之处在于ID选择器在一个页面中只能使用一次, 作为某个元素的唯一标识符, 一般情况下, ID只用于页面的唯一元素, 如页眉, 主导航条, 布局区块等。类别选择器相对灵活一些, 定义的样式可以使用多次。ID选择器的名称一般也是由用户定义的, 定义时选择符必须以“#”开头, 如果涉及到与HTML文档一起工作的话, CLASS和ID名称对大小写都是敏感的。

例如在

中定义ID选择器代码:

中引用样式的代码:

在很多浏览器下, ID选择器也可以用于多个标记, 但每个标记定义的ID不仅仅CSS可以调用, JavaScript等其他脚本语言同样可以调用, 如果一个HTML中有两个相同ID的标记, 那将会导致JavaScript查找ID时出错, 因此网站设计者在编写CSS代码时, 应该养成良好的编写习惯, 一个ID最多只能赋予一个HTML标记。

2 复合选择器

复合选择器是对两个或多个基本择器通过不同方式连接而构成的, 它一般有三种形式:交集选择器、并集选择器和后代选择器。

1) 交集选择器

交集选择器是由两个选择器直接连接构成, 其结果是选中二者各自元素范围的交集。其中第一个必须是标记选择器, 第二个必须是类别选择器ID选择器, 二者之间不能有空格, 必须连续书写。

例如在

中分别定义了三个选择器:

中引用样式的代码:

上面的代码中定义了

标记的样式, 也定义了.special类别, 还定义了p.special, 用于特殊的控制, 该样式仅仅适用于

标记, 不会影响使用了.special的其他标记。

2) 并集选择器

并集选择器是同时选中各个基本选择器所选择的范围, 任何形式的选择器 (包括标记选择器、类别选择器和ID选择器等) 都可以作为并集选择器的一部分。并集选择器是多个选择器通过逗号连接而成。当某些选择器的风格完全相同或部分相同, 则可以利用并集选择器同时申明风格相同CSS选择器。

例如在

中定义的选择器代码:

中引用样式的代码:

显示效果为:所有行的颜色都是红色, 字体大小为20px。其中“示例文字h2、示例文字p2、示例文字p3有下划线。

3) 后代选择器

后代选择器是通过嵌套的方式对特殊位置HTML标记进行申明, 它的写法是把外层标记写在前面, 内层标记写在后面, 之间用空格分隔, 当标记发生嵌套时, 内层的标记就称为外层标记的后代。标记选择器、类别选择器和ID选择器都可以嵌套构成后代选择器。

例如在

中定义的选择器代码:

选择器的嵌套在CSS的编写中可以大大减少对class和id的声明, 使代码更加简洁。在构建页面HTML框架时通常只给外层标记定义class或id, 内层标记不需要再定义, 只有当子标记无法利用此规则, 才单独进行声明。

3 其他选择器

1) 通配选择器:通配选择器选择页面的所有元素进行样式化。例如:下面的规则将对页面的每个元素都添加一个1像素的实心黑色边框。

2) 属性选择器:属性选择器是基于元素所包含的属性来对它们进行选择。例如下面的选择器来选择所有具有alt属性的img元素:

使用以上选择器, 就可以对具有alt属性的所有图像都添加一个黑色边框。还可以通过属性值来进行选择, 属性选择器会变得更加有用。下面的规则适用于所有src属性值为alert.gif图像:

3) 子对象选择器:子对象选择器是选择作为其它特定元素子对象的元素。例如下面的规则会把作为h3元素子对象的strong元素中的文本转换为蓝色, 但不会转换其它的strong元素。

子对象选择器只影响直接后代, 而后代选择器不仅限于元素的“直接后代”, 还会影响到它的“各级后代”

4) 伪类选择器:伪类不是用来为元素提供样式的, 而是为元素的各种状态提供样式, 最常见的用法就是样式化链接状态。

4 结束语

CSS样式表在网页设计中发挥的作用越来越大, 选择器又是CSS的核心概念, 选择器的不同形式及其应用常常让网页开发人员混淆不清, CSS选择器根据所应用样式的对象不同, 它的形式也不相同, 选择合适的选择器类型应用于不同的网页元素, 不但可以缩减代码, 而且使网站更易于维护, 从而降低网站后期维护成本。

参考文献

[1]温谦.CSS网页设计标准教程[M].北京:人民邮电出版社, 2009:14-28.

篇4:浅说css的几个选择器

【关键词】CSS 选择器 基础语法规则 工作原理

一、引言

CSS是层叠样式表(Cascading Style Sheets)的缩写,用于定义HTML元素的显示形式,是W3C推出的格式化网页内容的标准技术,是网页设计者必须掌握的技术之一。在HTML文档中加入CSS样式表可分为嵌入式样式表、外部样式表和内联样式表三种,在同一文档内可以同时使用三种方法。

二、CSS选择器的基础语法规则

选择器是CSS语法中最重要最基本的概念。使用选择器可以指定XHTML文档中特定标签应用CSS样式。选择器有许多类型,包括标签选择器、类选择器、ID选择器、全局选择器、组合选择器、继承选择器和伪类选择器等。

(一)标签选择器。一个XHTML文档中有许多标签,例如p标签、h1标签等。若要使文档中的所有p标签都使用同一个CSS样式,就应使用标签选择器。如代码“h1 {color:red; font-size:14px;}”,这行代码的作用是将 h1元素内的文字颜色定义为红色,同时将字体大小设置为14像素。在这个例子中,h1是选择器,color和 font-size是属性,red和14px是值。标签选择器可以直接改变该标签的所有样式。

(二)类选择器。使用标签选择器可以为整个XHTML文档中的同一个标签指定相同的CSS样式,但是在实际运用中,XHTML文档中的同一个标签会被反复使用,若要为相同的标签赋予不同的CSS样式就应使用类选择器。以下是使用类选择器定义CSS样式的步骤:(1)编写合适的类选择器名,然后定义CSS样式声明,例如定义类选择器名为news的CSS样式代码.news{ font-size:20px;color:green }。(2)把以news为名的CSS样式应用到XHTML某个指定的标签中。将news样式指定给标签的方法如下:新闻,其中,在

中写入class=“news”的语句。Class和等号都是固定的写法,在双引号中写入类选择器的名称。

篇5:浅说css的几个选择器

后代选择器的写法为,子代元素以空格与父元素形成连接关系构成选择器,如:

divspan{color:blue;}

以上规则的结果为:“作为div元素后代的任何span元素显示为蓝色字体”。

选择器之间的空格是一种结合符(combinator)。每个空格结合符可以解释为“...在...中找到”、“...作为...的一部分”、“...作为...的后代”,但是要求必须从右向左读选择器——《CSS权威指南》第三版

CSS还有两种选择器:类选择器和ID选择器,个中细则不是本文陈述的重点。本文的重点是:空格在后代选择器、类选择器和ID选择器相结合的情况中的种种问题,及解决方式。

先看看以下的规则:

div.blue{color:blue;}

以上规则的结果为:“所有class属性值为blue的div元素显示为蓝色字体”。然而我的要求并不是这样,我的要求是:“作为div元素后代的任何class属性值为blue的元素显示为蓝色字体”。试试以下的规则:

div.blue{color:blue;}

以上规则的改进之处为“div”与“.blue”之间多了一个空格,这样是否就能形成后代选择器呢?答案是否定的!该规则实现的结果依旧是:“所有class属性值为blue的div元素显示为蓝色字体”。

那么该怎么结合类选择器构成后代选择器的效果呢?方法是有的,那就是给父元素div设置一个class或者id属性,假设我给它加上一个class属性,于是规则就变为:

div.contain.blue{color:blue;}

以上规则的结果为:“所有class属性值为contain的div元素,其后代中class属性值为blue的任何元素显示为蓝色字体”。结果虽然不能完全达到我的苛刻要求,但已经很接近了,

接近了,效果一定是很明显的,然而我却发现完全没有了蓝色字体,因为我把规则写为:

div.contain.blue{color:blue;}

以上规则的不同之处在于,“.contain”与“.blue”之间少了一个空格!少了空格,以上选择器就不是后代选择器了,而是另外一种选择器:“多类选择器”。

在HTML中,一个class值中有可能包含一个词列表,各个词之间用空格分隔。那么以上的多类选择器只能将规则应用于如下形式的元素中:

text

以上的class属性值少了其中一个都无法将字体显示为蓝色!

将以上规则放在一起,比较起来会清晰一点:

1div.contain.blue{color:blue;}/*后代选择器*/

2div.contain.blue{color:blue;}/*多类选择器*/

以上两种规则分别应用的元素如下:

1containblue

2containandblue

值得注意的是:ID属性不允许有以空格分隔的词列表。所以以下的规则将无法应用到任何元素:

div#contain#blue{color:blue;}

以上的规则将无法应用到任何元素。你只能乖乖地用空格将两个ID选择器分隔,构成后代选择器。

综上,选择器之间的空格是一种结合符,如果要构成后代选择器,则空格两边的选择符必须为如下两种形式:

元素选择符 空格 元素选择符

非元素选择符 空格 非元素选择符

后代选择器中绝对不可能出现的一种情形:元素选择符 [空格] 非元素选择符。

最重要一点:两个类选择器之间存在空格则构成后代选择器,之间没有空格的则构成多类选择器。

参考资料:《CSS权威指南:第三版》Eric A.Meyer著 尹志忠 侯妍译

上一篇:尊师感恩演讲稿下一篇:《墨与彩的韵味》教学反思