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. php面试题之二——Javascript（基础部分）

    二.JavaScript部分 1. JS 表单弹出对话框函数是?获得输入焦点函数是? 弹出对话框函数:alert(), prompt(), confirm() 获得输入焦点函数:focus() 2. ...

  2. Linux / UNIX create soft link with ln command

    How to: Linux / UNIX create soft link with ln command by NIXCRAFT on SEPTEMBER 25, 2007 · 42 COMMENT ...

  3. Vmware虚拟机

    1.在虚拟机安装完系统后找到相对应的保存路径如:D:\VMware\VOS\Win7x64OS 2.该目录下面会有很多文件和文件夹,其中配置文件Windows 7 x64.vmx和硬盘文件Window ...

  4. php远程抓取网站图片并保存

    以前看到网上别人说写程序抓取网页图片的,感觉挺神奇,心想什么时候我自己也写一个抓取图片的方法! 刚好这两天没什么事,就参考了网上一个php抓取图片代码,重点借鉴了 匹配img标签和其src属性正则的写 ...

  5. Linux下安装firefox最新版

    Linux刚安装好的时候,默认是火狐浏览器并且版本比较低,我的系统是CentOS,火狐版本号才31,用yum安装的话版本也不是最新,只要从官方网站下载最新版安装就可以了,方法如下: 首先去火狐主页,中 ...

  6. mongoose学习笔记2--增删改查1

    查询 之前我们的集合已经创建成功,我们就先来进行第一步操作 —— 查询. 查询分很多种类型,如条件查询,过滤查询等等,今天只学习了最基本的find查询. 举例: 1.find查询: obj.find( ...

  7. cenos配置

    #修复ifconfig1.查看 /sbin/ifconfig是否存在 echo $PATH2.查看ifconfig命令是否存在ls /sbin |grep ifconfig如果ifconfig命令存在 ...

  8. Linux命令--文件管理

    1.ls ls -a 列出目录下是所有文件 ls -l 列出文件的详细信息   2.cd cd /root 进入更目录下的root文件夹 cd file 进入当前目录的file文件夹 cd .. 进入 ...

  9. IntelliJ IDEA快捷键和常用设置

    一   快捷键的使用       1.文本编辑删除 ctr + y复制 ctr + D2.智能提示提示 ctr + space智能提示 ctr + shift + space完成当前语句 ctr + ...

  10. 新浪SAE部署 503 JDK版本冲突解决

    上午把本地调试好的微信应用部署到SAE上,结果访问503错误.关键日志:—————————————————————————————————org.eclipse.jetty.servlet.Servl ...