一、语法规则

选择器{
属性1:属性值1;
属性2:属性值2;
......
}
/*注释*/

二、如何在html中应用CSS

1. 外部引用css文件

   css文件:css/layout.css(css文件夹和HTML位于同一个目录下)
<head>
<link rel="stylesheet" href="css/layout.css">
</head>

2. 内部嵌入css

    <head>
<style>
/*css代码*/
</style>
</head>

3. 元素内部使用

<div style="属性名:属性值;属性名:属性值;"></div>

三、选择器

1. 基本选择器

1)元素选择器

a div body ul

2)类选择器

.ClassName     例如: .current

3)ID选择器

#IdName         例如: #top_nav

4)普遍选择器

*{
/*css代码*/
}

5)并且选择器

选择器1选择器2
p.one#first
<p class="one" id="first"></p>

6)并列选择器

p,.one,#first
<p></p>
<div class="one"></div>
<ul id="first"></ul>

2. 层次选择器

1)后代选择器

使用空格分割两个选择器, 例如 【parant son】

2)子代选择器

使用大于号分割两个选择器,例如 【parent > son】

3)下一个兄弟选择器

使用+分割两个选择器,例如 【li:first-child + *】

4)之后所有兄弟选择器

使用波浪线~分割两个选择器,例如【li:first-child ~ *】

3. 属性选择器(过滤器)

配合基本选择器进行筛选
<input type="text" name="username"> selector[name] 选择具有name属性的元素、无论该属性的值为什么
selector[name=val] 选择具有name属性的、并且name的值为val元素
selector[name*=val] 选择具有name属性的、并且name的值之一为val的元素
selector[name^=val] 选择具有name属性的、并且name的值以val开头的元素
selector[name$=val] 选择具有name属性的、并且name的值以val结尾的元素
selector[name~=val] 选择具有name属性的、并且name的值包含val的元素

4. 伪类选择器

配合基本选择器进行筛选

1) 子元素

:first-child
:last-child
:nth-child(n)、: nth-last-child(n)
:first-of-type
:last-of-type
:nth-of-type(n)、:nth-last-of-type(n) 注:n可以为元素的序号,也可以为特殊的字符,比如“odd”,“even

2) 状态

:hover、:active:、focus
:enabled、 :disabled;:checked、 :default
:invalid、 :valid、 :required、 :optional、 :in-range 、:out-of-range

5. 伪元素选择器

伪元素以"::"开头,用在选择器后,用于选择指定的元素。

::after
常用于清除浮动,让浮动的子元素将父撑起来。
例:
<ul id = "nav">
<li></li>
<li></li>
</ul> #nav::after{
content = "";
display = block;
clear = both;
} ::before
::first-letter
::first-line
::selection

未完待续... ...

CSS札记(一):CSS选择器的更多相关文章

  1. CSS系列:CSS选择器

    选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记样式都是通过不同的CSS选择器来控制的.用户只需要通过选择对不同的HTML标签进行选择,并赋予各种样式声明,即可实现各种效果. ...

  2. CSS:CSS样式表及选择器优先级总结

    我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式.内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢? 也会遇到这样的情况,在样式表中,对同一个HTML元素,我们有可能既用到了 ...

  3. Html 之div+css布局之css选择器

    CSS选择器 什么叫选择器?通俗的来说就是 我想改变html 中某个地方的  字体大小 或者背景色 或者其它属性 内边距 外边距,宽度高度 等等 一些Css 样式. 那么我们如何找到对应的 元素呢? ...

  4. CSS选择器、CSS hack及CSS执行效率

    主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS  一.CSS选择器.优先级与 ...

  5. CSS样式----图文详解:css样式表和选择器

    主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...

  6. [HTML] CSS Id 和 Class选择器

    id 和 class 选择器 如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器. id 选择器 id 选择器可以为标 ...

  7. css笔记09:选择器优先级

    1. (1) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  8. CSS 选择器之基本选择器 属性选择器 伪类选择器

    CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className)    所有浏览器都支持类选择器,但多类选择器(.classNa ...

  9. HTML+CSS Day05 基本CSS选择器、复合CSS选择器与CSS继承性

    1.基本CSS选择器 (1)标记选择器 <style>                       h1{ color:red; font-size:25px;}           &l ...

随机推荐

  1. 一个实用的iptables脚本(各种过滤写法参考)

    #!/bin/shmodprobe ipt_MASQUERADEmodprobe ip_conntrack_ftpmodprobe ip_nat_ftpiptables -Fiptables -t n ...

  2. Java中字符编码和字符串所占字节数 .

    首 先,java中的一个char是2个字节.java采用unicode,2个字节来表示一个字符,这点与C语言中不同,C语言中采用ASCII,在大多数 系统中,一个char通常占1个字节,但是在0~12 ...

  3. javascript中的继承-寄生组合式继承

    前文说过,组合继承是javascript最常用的继承模式,不过,它也有自己的不足:组合继承无论在什么情况下,都会调用两次父类构造函数,一次是在创建子类原型的时候,另一次是在子类构造函数内部.子类最终会 ...

  4. Sublime Text 3 安装及汉化操作

    Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等.还可自定义键绑定,菜单和工具栏.Sublime Text 的主要功能包括:拼写检查,书签,完整的 ...

  5. Java——自定义外部字体文件

    package chapter1; import javax.swing.*;import java.awt.*;import java.io.IOException;import java.io.I ...

  6. 46. Permutations (JAVA)

    Given a collection of distinct integers, return all possible permutations. Example: Input: [1,2,3] O ...

  7. jQuery学习总结06-插件开发

    本文是参考了Joey的博客后整理的. 先从一个简单扩展jQuery对象的demo开始说起: //sample:扩展jquery对象的方法,redTextColor()用于改变字体颜色. (functi ...

  8. 测试员小白必经之路----常见的Dos命令

    Dos是什么? 是一个命令行执行的操作系统 进入终端: win + r 运行输入: cmd 当前计算机的本地时间:Time 退出当前正在执行的命令: ctrl +c 设置在多少时间后自动关机: Shu ...

  9. 【转】交换分区SWAP

    SWAP就是LINUX下的虚拟内存分区,它的作用是在物理内存使用完之后,将磁盘空间(也就是SWAP分区)虚拟成内存来使用. 它和Windows系统的交换文件作用类似,但是它是一段连续的磁盘空间,并且对 ...

  10. PAT Advanced 1001 A+B Format (20 分)

    Calculate a+b and output the sum in standard format -- that is, the digits must be separated into gr ...