css选择器怎么使用,css有哪些选择器

css选择器无疑是css代码中最重要的一环,要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。
所以合理使用css选择器,将会使你的代码更高效。

操作方法

  • 01

    1、css元素选择器 最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。 如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身。 例子:

  • 02

    2、选择器分组 假设希望 h2 元素和段落都有灰色。为达到这个目的,最容易的做法是使用以下声明: 将 h2 和 p 选择器放在规则左边,然后用逗号分隔,就定义了一个规则。其右边的样式(color:gray;)将应用到这两个选择器所引用的元素。逗号告诉浏览器,规则中包含两个不同的选择器。如果没有这个逗号,那么规则的含义将完全不同。

  • 03

    3、类选择器 类选择器允许以一种独立于文档元素的方式来指定样式。 该选择器可以单独使用,也可以与其他元素结合使用。 提示:只有适当地标记文档后,才能使用这些选择器,所以使用这两种选择器通常需要先做一些构想和计划。 要应用样式而不考虑具体设计的元素,最常用的方法就是使用类选择器。 在使用类选择器之前,需要修改具体的文档标记,以便类选择器正常工作。 为了将类选择器的样式与元素关联,必须将 class 指定为一个适当的值。请看下面的 HTML 代码: 在上面的代码中,两个元素的 class 都指定为 important:第一个标题( h1 元素),第二个段落(p 元素)。

  • 04

    4、ID选择器 首先,ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。 请看下面的规则: 与类选择器一样,ID 选择器中可以忽略通配选择器。前面的例子也可以写作:

  • 05

    5、属性选择器 如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器。 如果您希望把包含标题(title)的所有元素变为红色,可以写作:

  • 06

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

  • 07

    7、子元素选择器 与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。 如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)。 例如,如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:

  • 08

    8、相邻兄弟选择器 相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。 例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:

(0)

相关推荐

  • CSS新手整理的CSS技巧

    CSS新手整理的CSS技巧

  • CSS系列:[1]CSS实现半透明div层的方法

    首先,先看一下实例,如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http ...

  • DIV+CSS教程:[4]CSS如何设置文字字体

    CSS也可以像Word编辑那样,可以对文字的字体进行设置.那么CSS是如何对HTML页面中文字进行字体设置的呢? 操作方法 01 在html语言中,文字的字体设置是通过<font face=&q ...

  • HTML怎样引入css,怎样使用css

    HTML中通过使用css可以让网页的美观效果更进一步. 今天小编我就来给大家分享一下 HTML中怎样使用css怎样引入css的噢. 操作方法 01 如图所示,可以直接在标签里面用style加引号来插入 ...

  • css属性选择器有哪些

    css除了一般的选择器之外,还有哪些属性选择器呢 操作方法 01 E[att]:元素[属性]:选择具有att属性的E元素. 02 E[att=val]:元素[属性=属性值]:选择具有att属性且属性值 ...

  • css选择器有哪些,以及它们们的优先级

    css(层叠式样式表)作为一种表现标准语言,它能使html的表现更加丰富;作为一名web应用开发人员,css的使我们的工作变的更加有趣,同时也让我们增加了许多头疼的事!现在小编着重讲一下css的常见选 ...

  • 在Frontpage 中定义网页CSS样式

    说明:目前Frontpage的最新版本是FrontpageXP(Frontpage 2003),本文是以Frontpage2000讲述的,但本文所描述的方法在FrontpageXP中基本上是适用的!另 ...

  • 怎么用css设置一个图片位置并有边框宽度

    在网页设计中常常会用到图片放到一个想要的位置,并制定宽度高度,使得这样图片增加网页的绚丽多姿,怎么设置额.下面讲讲css使用.通过css选择器使用及宽度高度定位等知识组合. 操作方法 01 先写好ht ...

  • css样式兼容不同浏览器问题解决办法

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 ...