一、语法规则

选择器{

    属性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. AngularJS——基础小知识（一）

    $time0ut :定时器 $rootscope :全局的 $scope : 局部的作用域:   它下面的方法: $scope.$watch $scope.$apply   1)$scope.$wat ...

  2. 杭州集训Day5

    下面是Day5的题目!(其实都咕了好几天了 100+70+40=210. T1 皇后 XY 的疑难 (1s 512MB) 1.1 题目描述 有一个n*n的王国城堡地图上,皇后XY喜欢看骑士之间的战斗, ...

  3. P1507NASA食物

    这道题是一个01背包的延伸题,只要透彻理解了,就不难了. 这个题有两个T,一个是体积一个是质量,所以这时候我们必须要加一个for了,同时要优化空间(三维降二维),然后用f[j][k]来表示当体积为j, ...

  4. 【WPS/Visio】WPS word无法复制或编辑Visio对象

    前言 Win10,WPS2019,Visio2016. 好像是有一次设置 .vsdx 的默认打开方式为Visio,之后每次在WPS里复制Visio对象,或双击编辑WPS word中以前的Visio对象 ...

  5. Java组合算法

    这是一个简单的问题,大一刚学编程的时候做的笔记. 打印出从1.2.3……n中取出r个数的不同组合(n>=r>=1) 例如n=3,r=2,输出: 1,2 2,3 下面是实现的代码: publ ...

  6. python利用(threading,ThreadPoolExecutor.map,ThreadPoolExecutor.submit) 三种多线程方式处理 list数据

    需求:在从银行数据库中取出 几十万数据时,需要对 每行数据进行相关操作,通过pandas的dataframe发现数据处理过慢,于是 对数据进行 分段后 通过 线程进行处理: 如下给出 测试版代码,通过 ...

  7. Linux系统性能测试工具（四）——CPU性能测试工具之super_pi、sysbench

    本文介绍关于Linux系统(适用于centos/ubuntu等)的CPU性能测试工具-sysbench.CPU性能测试工具包括: super_pi: sysbench——不仅可以测试CPU性能,而且可 ...

  8. 雷电模拟器 v3.71绿色版

    目录 1. 按 2. 介绍 3. 下载地址 1. 按 安卓模拟器目前的市场基本上稳定了,逍遥.夜神.雷电,用的人都很多,网易mumu从阴阳师时代就被大家熟知,腾讯手游助手也是随着吃鸡游戏而火,这两个模 ...

  9. springboot之学习搭建

    什么是**SpringBoot?** Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配 ...

  10. 2019 Multi-University Training Contest 4 1008K-th Closest Distance（二分+主席树）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6621 题目大意:给一个数组,每次给 l ,r, p, k,问区间 [l, r] 的数与 p 的绝对值的 ...