css选择器

派生选择器

根据其元素在其上下文关系来定义样式

<style type="text/css">
body{
font-size:12px;
color:red;
}
</style>

p{font-size:12px;line-height:1.6em;}

上面的css样式代码的作用：为p标签设置12px字号，行间距设置1.6em的样式。

id选择器

<html>

  <head>

    <meta charset="utf-8" />

    <link href="10.css" type="text/css" rel="stylesheet" />

    <meta name="generator"

    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />

    <title></title>

  </head>

  <body>

    <p>

      <strong>p标签hello</strong>

    </p>

    <ul>

      <li>

        <!--如何给li标签单独加样式，派生 li strong{属性： 属性值}-->

        <strong>li标签hello</strong>

      </li>

    </ul>

  </body>

</html>
li strong {

    color:red;

}

strong{

    color:blue;

}

id选择器#

<html>

  <head>

    <meta charset="UTF-8" />

    <link href="11.css" type="text/css" rel="stylesheet" />

    <meta name="generator"

    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />

    <title></title>

  </head>

  <body>

    <p id="pid">hello css</p>

  </body>

</html>
#pid {

color:red}
<html>

  <head>

    <meta charset="UTF-8" />

    <link href="11.css" type="text/css" rel="stylesheet" />

    <meta name="generator"

    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />

    <title></title>

  </head>

  <body>

    <p id="pid">hello css

    <a href="#">欢迎来到</a></p>

    <div id="divid">这是div

    <p>这是第一个div</p></div>

  </body>

</html>
#pid {

color:red}

#pid a{

    color:pink;

}

#divid p{

    color:green;

}

派生选择器和ID选择器同时使用

类选择器.

<html>

  <head>

    <meta charset="UTF-8" />

    <link href="12.css" type="text/css" rel="stylesheet" />

    <meta name="generator"

    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />

    <title></title>

  </head>

  <body>

    <p class="pclass">这是一个class效果

    <a href="#">这是一个链接</a></p>

    <div class="divclass">这是一个div的class</div>

  </body>

</html>
.pclass{

color:blue;

}

.pclass a{

    color:pink;

}

.divclass{

    color:red;

}

属性选择器

<html>

  <head>

    <meta charset="UTF-8" />

    <style type="text/css">

[title]{color:green;}[title=te]{color:red;}

</style>

    <meta name="generator"

    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />

    <title></title>

  </head>

  <body>

    <p title="t">属性选择器</p>

    <p title="te">属性aa选择器</p>

  </body>

</html>

相同点：可以应用于任何元素
不同点：

1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）

.stress{

    color:red;

}

.bigsize{

    font-size:25px;

}

<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>

还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：

.food>li{border:1px solid red;}

这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。

<style type="text/css">

.first>span{border:1px solid red;}

</style>

<p class="first">三年级时，<span>我还是一个<span>胆小如鼠</span>的小女孩</span>，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>

把文字内容的“我还是一个胆小如鼠的小女孩”这一句话加入红色边框。效果图如下：

css 层叠样式表的更多相关文章

  1. CSS层叠样式表(Cascading Style sheets)

    CSS层叠样式表(Cascading Style sheets) --------- ---------------- ----------- --------------- ----------- ...

  2. 《精通CSS层叠样式表》

    书名 <精通CSS层叠样式表> 图片 时间 2017-7月 学习 感觉和ps一样对我都不友好 3天撸完

  3. CSS：CSS层叠样式表的概述

    CSS层叠样式表:Cascading Style Sheets 介绍: 现代网页的设计原则是内容和样式分离,降低它们之间的直接相互依存关系,解耦性,同时,同样的内容,可以通过不同的CSS样式表现出来. ...

  4. css:层叠样式表-网页布局基础

    css:层叠样式表:一.写法分类: 1.内联(行内,写在标签里面,以属性的形式表现,属性名是style) 例:<table style="background-color: aqua& ...

  5. 【HTML/XML 7】CSS层叠样式表

    导读:上篇博客说到用XSL去实现XML文档的表现形式的美化,那么另外一种方式就是CSS的使用.本篇博客系统的介绍CSS,下篇博客,将系统的介绍XSL. 一.CSS的发展历史 1996年,层叠样式表(C ...

  6. 实验时css层叠样式表不更新的情况

    自定义了CSS的样式,希望在页面中起作用.因为MVC中Views/Shared/_Layout.cshtml是所有视图的公共文件,如下: <!DOCTYPE html> <html& ...

  7. 前端内容之CSS层叠样式表

    CSS(Cascading Style Sheet层叠样式表) 把HTML认为是网页的骨架 那么CSS就是用于对HTML骨架进行修饰,比如加背景色.显示方式.位置等等属性 CSS语法形式: 一个完整的 ...

  8. CSS层叠样式表的层叠是什么意思（转自知乎）

    转自知乎上的回答:http://www.zhihu.com/question/20077745 解答一: 层叠指的是样式的优先级,当产生冲突时以优先级高的为准.1. 开发者样式>读者样式> ...

  9. css层叠样式表

    css的三种声明方式    1.行内样式        通过每个标签都有的style属性        <div style="color:red;">黄卫星说没有内容 ...

随机推荐

  1. Java中的final修饰符

    1.什么时候可以选择final修饰符 如果想让一个类不被其他类继承,不允许在有子类,这时候就要考虑用到final来修饰. 2.用final修饰的类 首先大家要明白,用final修饰的类是不能被继承的, ...

  2. shell截取字符串

    image_tag="pangu-20151021102145\"" 1.用#号截取,符号-右面所有字符串 TMP=${image_tag#*-} echo $TMP 得 ...

  3. HDU 4857 逃生 （优先队列+反向拓扑）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4857 解题报告:有n个点,有m个条件限制,限制是像这样的,输入a  b,表示a必须排在b的前面,如果不 ...

  4. 关于seajs

    (这些文章都是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com) 最近经常听到各种JS前缀的名称,瞬间感觉自己弱爆了,啥都没用过呢,这么下去将来怎么嫁人呢.   ...

  5. Insertion Sort List

    对链表进行插入排序,比对数组排序麻烦一点. ListNode *insertSortList(ListNode *head) { ListNode dummy(-); for (ListNode *c ...

  6. Ubuntu删除history记录

    history -c就是清除本次登录到目前所执行的命令 转自: http://www.linuxdiyf.com/viewarticle.php?id=189355

  7. python 列表转为字典的两个小方法

    1.现在有两个列表,list1 = ['key1','key2','key3']和list2 = ['1','2','3'],把他们转为这样的字典:{'key1':'1','key2':'2','ke ...

  8. 数据库ACID

    数据库的事务隔离级别 10.数据库的事务隔离级别一般分为4个级别,其中可能发生“不可重复读”的事物级别有()A.SERIALIZABLE B.READ COMMITTEDC.READ UNCOMMIT ...

  9. poj 1007 DNA Sorting 解题报告

    题目链接:http://poj.org/problem?id=1007 本题属于字符串排序问题.思路很简单,把每行的字符串和该行字符串统计出的字母逆序的总和看成一个结构体.最后把全部行按照这个总和从小 ...

  10. Java性能优化权威指南-读书笔记（五）-JVM性能调优-吞吐量

    吞吐量是指,应用程序的TPS: 每秒多少次事务,QPS: 每秒多少次查询等性能指标. 吞吐量调优就是减少垃圾收集器消耗的CPU周期数,从而将更多的CPU周期用于执行应用程序. CMS吞吐调优 CMS包 ...