【生意多】-免费发布分类信息
当前位置: 首页 » 新闻 » 教程 » 正文

CSS的五种基本选择器

放大字体  缩小字体 发布日期:2020-06-25 01:39:01    浏览次数:9
导读

  要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。  每一条css样式定义由两部分组成,形式如下: [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。  一个完整的HTML页面是由很多不同的标签组成。标签选择器:指用HTML标签名称作为选择器,按标签名称分类,为页

  要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。

  每一条css样式定义由两部分组成,形式如下: [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。

  一个完整的HTML页面是由很多不同的标签组成。标签选择器:指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。

  如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身。

  以上css代码会对整个文档添加黑色背景;将所有p元素字体大小设置为30像素同时添加灰色背景;对文档中所有h2元素添加红色背景。

  ⑵ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。 根据元素ID来选择元素,具有唯一性,这意味着同一id在同一文档页面中只能出现一次。

  例如:在css中,下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为黄色:

  下面的HTML 代码中,id 属性为 red 的 p 元素显示为红色,而 id 属性为 green 的 p 元素显示为绿色。

  类选择器使用类名来选择元素,前提是要在HTML中,给元素定义一个class的属性,class=类名,然后使用.进行标识,后面紧跟类名。

  类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用,也可以与其他元素结合使用。

  在使用类选择器之前,需要修改具体的文档标记,以便类选择器正常工作。为了将类选择器的样式与元素关联,必须将 class 指定为一个适当的值。

  在上面的代码中,两个元素的 class 都指定为 important:第一个标题( h1 元素),第二个段落(p 元素)。

  选择器现在会匹配 class 属性包含 important 的所有 p 元素,但是其他任何类型的元素都不匹配,不论是否有此 class 属性。

  选择器 p.important 解释为:“其 class 属性值为 important 的所有段落”。 因为 h1 元素不是段落,这个规则的选择器与之不匹配,因此 h1 元素不会变成红色文本。

  例如,如果希望将一个特定的元素同时标记为重要(important)和警告(warning),就可以写作:

  为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色,可以这样写:

  上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此,以下示例标记中的前三个元素将被选中,而不会选择后两个元素:

  ⑴后代选择器(descendant selector)又称为包含选择器。后代选择器可以选择作为某元素后代的元素。

  ⑵在后代选择器中,规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符(combinator)。

  ⑶每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”,但是要求必须从右向左读选择器。

  ⑴上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本(如段落或块引用中的 em)则不会被这个规则选中.

  ⑵h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。如果要从左向右读选择器,可以换成以下说法:“包含 em 的所有 h1 会把以下样式应用到该 em”。

  可以使 HTML 中不可能实现的任务成为可能。假设有一个文档,其中有一个边栏,还有一个主区。边栏的背景为蓝色,主区的背景为白色,这两个区都包含链接列表。不能把所有链接都设置为蓝色,因为这样一来边栏中的蓝色链接都无法看到。解决方法是使用后代选择器。在这种情况下,可以为包含边栏的 div 指定值为 sidebar 的 class 属性,并把主区的 class 属性值设置为 maincontent。

  ⑵不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)。

  如果从右向左读,选择器 h1 strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。

  这个规则会把第一个 h1 下面的两个 strong 元素变为红色,但是第二个 h1 中的 strong 不受影响:

  ⑴相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。

  ⑵相邻兄弟选择器使用了加号(+),即相邻兄弟结合符(Adjacent sibling combinator)。与子结合符一样,相邻兄弟结合符旁边可以有空白符。

  这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。

  在上面的片段中,div 元素中包含两个列表:一个无序列表,一个有序列表,每个列表都包含三个列表项。这两个列表是相邻兄弟,列表项本身也是相邻兄弟。

  不过,第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟,因为这两组列表项不属于同一父元素(最多只能算堂兄弟)。

 
关键词: css五大选择器
(文/小编)
打赏
免责声明
• 
本文为小编原创作品,作者: 小编。欢迎转载,转载请注明原文出处:http://www.31duo.com/news/show-317352.html 。本文仅代表作者个人观点,本站未对其内容进行核实,请读者仅做参考,如若文中涉及有违公德、触犯法律的内容,一经发现,立即删除,作者需自行承担相应责任。涉及到版权或其他问题,请及时联系我们。
 

(c)2016-2019 31DUO.COM All Rights Reserved浙ICP备19001410号-4

浙ICP备19001410号-4