CSS选择器

今天我们来简单说一下选择器我也是现学现用,ID选择器,类选择器,属性选择器,元素选择器,等等不就不一一说了!

1 id选择器:

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 "#" 来定义。
red {color:red;}

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

<p id="red">这个段落是红色。</p>

2 类选择器:

类选择器类选择器允许以一种独立于文档元素的方式来指定样式。

该选择器可以单独使用,也可以与其他元素结合使用。

.one{color: yellow;}

他的语法也是,即类名前有一个点号(.),然后结合通配选择器

*.important {color:red;}

3 属性选择器:

可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。

下面的例子为带有 title 属性的所有元素设置样式:
[title]{color:red;}
下面的例子为 title="W3School" 的所有元素设置样式:
[title=W3School]{border:5px solid blue;}

注意:只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择

4 元素选择器:

最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。

html {color:black;}
h1 {color:blue;}
如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身:
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.CSS 元素选择器 最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。如果设置 H...
    饥人谷_小侯阅读 884评论 0 1
  • 其实平时用得多的选择器无非也就是那么几个,时间久了,许多不常用的选择器就慢慢忘记了。为了不让自己忘记这些选择器,今...
    盛夏晚清风阅读 1,874评论 0 5
  • <<<在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。 "CSS" 列指示该属性是在哪个 CSS 版...
    松雪宝宝阅读 604评论 0 1
  • 元素选择器 类选择器 ID选择器 属性选择器 派生选择器 1. 元素选择器 最常见css选择器当属元素选择器,在H...
    闻金听凤阅读 324评论 0 1
  • CSS选择器结构逻辑图 接下来按照结构逻辑图具体讲解各个选择器的作用及用法; 基本选择器 基本选择器主要有以下5类...
    FoolishFlyFox阅读 576评论 0 8