CSS选择器有:id选择器、派生选择器

1、id选择器

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

id 选择器以 "#" 来定义。

#red {color:red;}
#green {color:green;} <p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

2、派生选择器

在现代布局中,id 选择器常常用于建立派生选择器。

#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}

3、类选择器

class选择器通常用点号(.)来显示

4、属性选择器

二、CSS中的样式优先级

  内联样式  <style  font-size="16px">

  内部样式表  <style type="text/css">......</style>

  外部样式表  <link rel="stylesheet" type="text/css" href="mystyle.css" />

  精确匹配大于模糊匹配

    1、id选择器

    2、class类选择器

    3、span标签选择器

    4、*

注明:谁离标签近,谁的优先级就最高。同等水平时,比较精确。

三、CSS选择器主要有以下10类

  1、通配选择器:*{margin:0px;}

  2、类型选择器:a{text-decoration:none;}

  3、属性选择器:input[type="button"]{padding:5px;}

  4、包含选择器:div.code a{text-decoration:none;}

  5、子对象选择器:ul.test>li{font-size:14px;}

  6、ID选择器:#test {color:red;}

  7、类选择器:.test{color:red;}

  8、选择器分组:body,ul,li{margin:0px;}

  9、伪类及伪对象选择器:div:first-letter{font-size:16px;}、a.test:hover{text-decoration:underline;}

  10、相邻选择器:li+li{font-weight:bold;}

四、

CSS:第1课的更多相关文章

  1. CSS前5课总结

    CSS<精通CSS.DIV网页样式与布局>视频前5课总结: 地对地导弹 第一课: 使用CSS控制页面: 1,行内样式 <p style="color:#0000FF; fo ...

  2. 妙味课堂——HTML+CSS(第四课)(一)

    这一课学的东西真是太多了,还不赶快记下来,留待以后慢慢回味! 首先我们回顾一下inline-block的特性: 使块元素在一行显示 使内嵌支持宽高 换行被解析了(问题) 不设置宽度的时候,宽度由内容撑 ...

  3. [Codecademy] HTML&CSS 第三课:HTML Basic II

    本文出自   http://blog.csdn.net/shuangde800 [Codecademy] HTML && CSS课程学习目录 --------------------- ...

  4. [Codecademy] HTML&CSS第八课:Design a Button for Your Webwite

    本文出自   http://blog.csdn.net/shuangde800 [Codecademy] HTML && CSS课程学习目录 --------------------- ...

  5. 妙味课堂——HTML+CSS(第四课)(二)

    单开一篇来讲一个大点的话题——清浮动    来看下例: <!DOCTYPE html> <html> <head> <meta charset="U ...

  6. 妙味课堂——HTML+CSS(第三课)

    常见标签我已经在上一篇文章中提及,我们做前端设计时,主要也是用这些标签(最常用的). 然而有一个问题,就是有的标签都有自己的默认样式.试通过如下代码来说明: <!DOCTYPE html> ...

  7. [Codecademy] HTML&CSS 第七课:CSS: An Overview

    本文出自   http://blog.csdn.net/shuangde800 [Codecademy] HTML && CSS课程学习目录 --------------------- ...

  8. 潭州课堂25班:Ph201805201 WEB 之 CSS 第三课 (课堂笔记)

    在 CSS 中第个标签都可以认为是个盒子,盒子就有以下几层 边框 border border-top: 5px solid black; /*上边框 实线*/ border-right: 3px do ...

  9. html+css web storage课上笔记 2019.3.18

    存储 cookie cookie 使用文本来存储信息 使用时服务器发送cookie给客户端,下一次时,浏览器发送给服务器 web storage local storage 本地的硬件设备中,关闭后不 ...

  10. HTML和CSS高级指南——定位详解

    本文由大漠根据Shay Howe的<An Adavnced Guide to HTML & CSS>第二课<Detailed Positioning>所译,整个译文带有 ...

随机推荐

  1. Linux查看CPU详细信息

    1.查看CPU详细信息 在Linux服务器上查看CPU详细信息: cat /proc/cpuinfo 输出结果: processor : 0 vendor_id : GenuineIntel cpu ...

  2. Zookeeper基础教程(六):.net core使用Zookeeper

    Demo代码已提交到gitee,感兴趣的更有可以直接克隆使用,地址:https://gitee.com/shanfeng1000/dotnetcore-demo/tree/master/Zookeep ...

  3. web自动化,下拉滚动到底部/顶部和下拉滚动到指定的元素

    在web自动化,经常会遇到页面显示内容太多的时候,页面就会出现滚动条,一般有两种方式进行下拉,一种是直接下拉到底部/顶部/中部,或者直接给定元素,直接下拉到指定元素的位置. 两种方式的共同点: 两种方 ...

  4. 利用pyinstaller给工程打包生成python可执行文件

    step1.下载pyinstaller: step2.将pyinstaller的路径加入系统环境变量PATH中:(关键) step3.进入工程的根目录下(即可执行文件.py)所在目录下,cmd,输入命 ...

  5. [ SQLAlchemy ] 关于dynamic的“一知半解”

    问题提出: 1.粉丝机制 2.评论的点赞功能 这两个功能分别由User类和Comment类来实现,同样定义了多对多的关系,查询的时候用的方法却大不一样,先看看代码吧. ### # User类的中间表 ...

  6. vim 安装使用 pathogen

    目录 pathogen 是什么? 如何安装? pathogen 是什么? pathogen 一般作为 vim 新手的第一个插件,用来统一管理 vim 插件包. (官方解释)非常容易地管理你的 'run ...

  7. idea 开启 tomcat 热部署 的 具体流程 和 使用方式

    1前言 一直以来,使用idea做web开发修改html.jsp.js文件后,必须手动重新部署tomcat,最少都有等个6 -10 秒, 甚至有时候还提示找不到某个编译文件报错,重新编译整个项目,那得等 ...

  8. 《剑指offer》面试题29. 顺时针打印矩阵

    问题描述 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字. 示例 1: 输入:matrix = [[1,2,3],[4,5,6],[7,8,9]] 输出:[1,2,3,6,9,8,7,4 ...

  9. leetcode 1541. 平衡括号字符串的最少插入次数

    问题描述 给你一个括号字符串 s ,它只包含字符 '(' 和 ')' .一个括号字符串被称为平衡的当它满足: 任何左括号 '(' 必须对应两个连续的右括号 '))' . 左括号 '(' 必须在对应的连 ...

  10. Three.js之绘制物体的边框及修改lineWidth

    本博文主要记录如何使用three.js绘制物体的边框及修改其lineWidth.three.js是个技术点比较多,查询资料又比较少的框架,单单就这个修改lineWidth就是一个坑.先放一个动态的效果 ...