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. =============Python安装与使用================

    用文本编辑器写Python程序,然后保存为后缀为.py的文件,就可以用Python直接运行这个程序了. Python的交互模式和直接运行.py文件有什么区别呢? 直接输入python进入交互模式,相当 ...

  2. HDU 4858 项目管理（邻接表 暴力模拟）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4858 我们建造了一个大项目!这个项目有n个节点,用很多边连接起来,并且这个项目是连通的! 两个节点间可 ...

  3. unity3d进行脚本资源打包加载

    原地址:http://www.cnblogs.com/hisiqi/p/3204752.html 本文记录如何通过unity3d进行脚本资源打包加载 1.创建TestDll.cs文件 public c ...

  4. next_permutation 和 一个不成功的案例

    一个失败的案例:(POJ 1009) 题目描述 小翔同学的宿舍WIFI添加了密码,密码每天都会变更.而小翔每天都会给蹭网的同学们提供密码提示.现在请你根据密码提示,编写程序破译密码. 已知密码提示给出 ...

  5. 15 day 1代碼

    第一题 用堆维护. #include <cstdio> #include <algorithm> #include <queue> int n,i,f[400000 ...

  6. docker的四种网络模式

    /* 1. host模式 : docker run 使用 --net=host指定 docker使用的网络实际上和宿主机一样 2. container模式: 使用 --net=container:co ...

  7. SpringMVC请求处理流程

    从web.xml中 servlet的配置开始, 根据servlet拦截的url-parttern,来进行请求转发   Spring MVC工作流程图   图一   图二    Spring工作流程描述 ...

  8. Solr DIH导入出现 Data Config problem: 前言中不允许有内容 异常

    Solr配置DIH导入时出现 “Data Config problem: 前言中不允许有内容.” 异常. <response> <lst name="responseHea ...

  9. iOS 第三方自定义Alertview项目MBProcessHud中的重要代码分析

    做ios,弹出一个自定义的alertview挺常见的.ios7以前,我们可以对系统的UIAlertView进行一点操作,实现一点简单的定制,但是ios7不再允许我们这样做了.因此,我们需要自己创建一个 ...

  10. Spring配置JNDI的解决方案

    我的配置环境是:Spring + Tomcat + MySql 说明: 1. $TOMCAT_HOME代表Tomcat的安装目录. 第一步:在Tomcat的$TOMCAT_HOME/conf/cont ...