css的主要优点之一就是它能很容易地向所有同类型的元素应用一组样式。当然它是通过选择器来实现这一点的。

基本规则结构：

语法= 选择器 +声明块

1.元素选择器——直接使用html元素名，指向文档元素

　　如果想给所有段落都添加缩进的话使用元素选择器是最好的选择

p{

   text-indent:2em;

}

2.类选择器和id选择器——独立于文档元素来指定样式

　　a)类选择器：

　　给部分段落文本加粗，以及列表的某些项，这时可以使用类选择器来应用样式而不需要像使用元素选择器一样考虑具体涉及的元素，只要事先给要指定样式的元素添加相同的类名即可（给需要指定样式元素的class属性指定相同的值）。

　　选择器写法："."加上类名

.target{

    font-weight:bold;

}

　　b)多类选择器：

　　一个元素可以不只有一个类名，class值还可以包含一个词列表，比如：class="first second"；

<style>

    /*通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素,类名的顺序可以颠倒*/

    /*匹配class既有one又有two的段落，第三段和第四段的字体被设置成了粗的*/

    p.one.two{

        font-weight: bold;

    }

</style>

<body>

        <p class='one'>one</p>

        <p class='two'>two</p>

        <p class='one two'>one + two</p>

        <p class='one two third'>one + two + third</p>

</body>

　　c)id选择器：

　　你可能知道会在一个给定的文档中会有一个ID值为important的元素，但是你不知道这个最重要的东西是一个段落，一个短语，一个列表项还是一个小节标题，你只知道每个文档中都会有这么一个最重要的内容，它可能会出现在任何元素中，且只出现一次，那么这种情况下就可以使用id属性了。

　　与class属性不同，id属性的一个值仅可以赋给一个元素，如果有一个元素的id值为one，那么该文档中其他元素的id值都不能是one。（实际上浏览器一般不检查html中id属性的唯一性，你设置多个元素有相同的id属性并不会报错）

　　另外，与class属性不同，id值不能为词列表。如：id='one two'是错的。

　　选择器写法："#"加上id值。

<style>

    #one{

        font-weight: bold;

    }

</style>

<body>

        <p id='one'>利用id选择器来指定样式</p>

</body>

　　

css选择器(1)——元素选择器、类名和id选择器的更多相关文章

  1. CSS 标签、类名和ID选择器有空格和没有空格的区别

    前言 标签选择器.类名选择器以及 ID 选择器在使用上要注意"加空格"和"不加空格".两种使用形式上有很大的差别. 下面是讲解案例的 HTML 代码: < ...

  2. jQuery-day01-介绍 和 选择器获取元素

    1 ,jQuery介绍 1.1,jquery的介绍,javascript库的关系.体验jquery.把js兼容性代码封装在jquery.js中,本身就是一个javascript库. 1.2,jQuer ...

  3. CSS id 选择器

    id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. 下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二 ...

  4. CSS 简介、语法、派生选择器、id 选择器、类选择器、属性选择器

    CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现 ...

  5. CSS中的选择器之类选择器和id选择器

    1.css中的选择器: 1.类选择器,又叫class选择器 2.id选择器 3.html元素选择器(又叫标签选择器) 4.通配符选择器 5.伪类选择器 6.组合选择器(多元素选择器,子元素选择器,后代 ...

  6. [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器

    一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...

  7. 类选择器与ID选择器的比较

    如果已经在元素中标识了class或id,就可以在选择器中使用这个标准,从而只对已标识的元素进行格式化.不过推荐使用类选择器,一会儿我会解释理由. 要在class选择器和id选择器之间作出选择的时候,建 ...

  8. css：id选择器的权重>class选择器的权重=属性选择器的权重>元素选择器

    最近的项目要自己写前端了,重新学习下前端的一下基本知识. 一般在css样式表中,上面的会被下面的覆盖,如下图,文字会显示蓝色: 所以按照正常的来说,下面的css样式,测试的文字应该还是蓝色 但结果,测 ...

  9. 请写出css中选择器（元素选择器、类选择器、id选择器）的优先级顺序，和当各种选择器组合时，优先级的计算规则是什么？

    id选择器>类选择器>元素选择器 规则:选择器的权重值表述为4个部分,用0,0,0,0表示. 通配符*的权重为0,0,0,0 标签选择器.伪元素选择器的权重为0,0,0,1 类选择器.属性 ...

随机推荐

  1. Hexo搭建博客教程(3) - 远程部署到GitHub Pages

    本章讲的是如何将本地的个人项目远程部署到 GitHub Pages,涉及到GitHub的项目仓库.Git的使用,以及Hexo的远程部署等. 1. 安装 hexo-deployer-git 插件 想要将 ...

  2. SpringBoot 整合SpringMVC 原理探究

    https://blog.csdn.net/cml_blog/article/details/70196572 Spring Web MVC 的配置 Bean :WebMvcProperties

  3. PV,UV,IP概念

    PV是网站分析的一个术语,用以衡量网站用户访问的网页的数量.对于广告主,PV值可预期它可以带来多少广告收入.一般来说,PV与来访者的数量成正比,但是PV并不直接决定页面的真实来访者数量,如同一个来访者 ...

  4. Android iconfont字体图标的使用

    1.首先,进入阿里的矢量图标库,在这个图标库里面可以找到很多图片资源,当然了需要登录才能下载或者使用,用GitHub账号或者新浪微博账号登录都可以 2.登录以后,可以搜索自己需要的资源,然后直接下载使 ...

  5. Android开发中SharedPreferences的使用

    在Android开发中,在储存少量的数据时,个人感觉SharedPreferences是最好的选择,SharedPreferences是以键值对的方式进行储存,支持boolean,int,float, ...

  6. ubuntu下安装mongo扩展

    安装openssl apt-get install openssl libssl-dev libssl0.9.8 libgtk2.0-dev 安装php-pear apt-get install ph ...

  7. 洛谷 P2053 [SCOI2007]修车

    题目描述 同一时刻有N位车主带着他们的爱车来到了汽车维修中心.维修中心共有M位技术人员,不同的技术人员对不同的车进行维修所用的时间是不同的.现在需要安排这M位技术人员所维修的车及顺序,使得顾客平均等待 ...

  8. codevs 2600 13号星期几？

    时间限制: 1 s  空间限制: 8000 KB  题目等级 : 黄金 Gold 题目描述 Description 从1900年1月1日(星期一) 开始经过的n年当中,每个月的13号这一天是星期一.星 ...

  9. SAS Fuctions

    1. monotonic(), 单调递增函数.返回一列变量的序列等,类似于_N_ . 2. index v indexw: INDEX Function Searches a character ex ...

  10. 第二周作业xml学习情况

    1.xml简介 可扩展标记语言是一种很像超文本标记语言的标记语言. 它的设计宗旨是传输数据,而不是显示数据. 它的标签没有被预定义.您需要自行定义标签. 它被设计为具有自我描述性. 它是W3C的推荐标 ...