css的分类：内联，内嵌，外部

内联：写在标签里，style=样式，控制精准代码实用性差。

内嵌：嵌在<head></head>里

<style type="text/css">

        </style>

控制没有内联精准，但是实用性高。

外部：单独的样式文件，

引用

<link rel="stylesheet" type="text/css" href=""/>

控制没有内联精准，但是实用性最好。

选择器：

样式是用来选取元素的。

标签：根据标签名来选中元素。

input[type="text"]

class：用.来选中，

根据class命来筛选元素

可以游重复的名字。

id：用#来选中

根据id命来筛选唯一元素

不能有重复的名字。

复合：逗号：并列 div，span

空格 后代：#list li

大于号：子元素选择器 div>P  div中所有p标签

属性选择器;

[属性名 = 属性值]{}   属性名后边可以加 |、*等 代表匹配所有属性有属性值的元素

表单元素的属性选取：input[type="text"]。

伪类：

a标签的四个伪类：

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接,其他元素也有此方法，而且可以找到子元素 */
a:active {color:#0000FF;} /* 已选中的链接 */

伪元素：

与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

:link  a:link  选择所有未访问链接
:visited  a:visited  选择所有访问过的链接
:active  a:active  选择正在活动链接
:hover  a:hover  把鼠标放在链接上的状态
:focus  input:focus  选择元素输入后具有焦点
:first-letter  p:first-letter  选择每个<p> 元素的第一个字母
:first-line  p:first-line  选择每个<p> 元素的第一行
:first-child  p:first-child  选择器匹配属于任意元素的第一个子元素的 <]p> 元素
:before  p:before  在每个<p>元素之前插入内容
:after  p:after  在每个<p>元素之后插入内容
:lang(language)  p:lang(it)  为<p>元素的lang属性选择一个开始值

css分类和选择器的更多相关文章

  1. Css 分类 属性 选择器

    Css 层叠样式表 美化页面的小工具 分类: 内联 (行内)在标签内部以属性的形式呈现,属性名style 内嵌 head标签内以标签形式呈现,标签名style 外部 head标签内 加link标签 引 ...

  2. 一起学HTML基础-CSS样式表-基本概念、分类、选择器

    一.基本概念: CSS  (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...

  3. HTML-CSS样式表-★★★常用属性★★★及基本概念、分类、选择器

    样式属性 背景与前景: background-color:#F90; /*背景颜色,样式表优先级最高*/ background-image:url(路径); /*设置背景图片(默认)*/ backgr ...

  4. CSS伪类选择器

    一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...

  5. Lining.js - 为CSS提供 ::nth-Line 选择器功能

    在CSS中,我们使用 ::first-line 选择器来给元素第一行内容应用样式.但目前还没有像 ::nth-line.::nth-last-line 甚至 ::last-line 这样的选择器.实际 ...

  6. CSS 子元素选择器与后代选择器区别实例讲解

    css子元素选择器和后代选择器在功能描述上非常相同,但是他们其实是有区别的,本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别,需要的朋友可以参考一下. 首先我们来了解一下子元素选择器与 ...

  7. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  8. CSS的总结(选择器,伪类等...)

    关于组合选择器可参考:http://www.cnblogs.com/starof/p/4453458.html 主要内容 CSS概述 CSS和HTML结合的四种方式 CSS样式优先级和代码规范 CSS ...

  9. 关于CSS伪类选择器

    #CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...

随机推荐

  1. Algorithm： GCD、EXGCD、Inverse Element

    数论基础 数论是纯数学的一个研究分支,主要研究整数的性质.初等数论包括整除理论.同余理论.连分数理论.这一篇主要记录的是同余相关的基础知识. 取模 取模是一种运算,本质就是带余除法,运算结果就是余数. ...

  2. nyoj 51-管闲事的小明(遍历，比较)

    51-管闲事的小明 内存限制:64MB 时间限制:4000ms Special Judge: No accepted:9 submit:20 题目描述: 某校大门外长度为L的马路上有一排树,每两棵相邻 ...

  3. hdu 2255 奔小康赚大钱 (KM)

    奔小康赚大钱Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  4. Python3.7.1学习（一）：redis的连接和简单使用

    1.python 利用 redis 第三方库 首先安装:pip install redis 2.reids的连接 Redis使用StrictRedis对象来管理对一个redis server 的所有连 ...

  5. 在阿里云服务器中配置JDK、tomcat、mysql

    阿里云服务器搭建配置 linux命令:参考:https://www.cnblogs.com/itdansan/p/8545187.html cat 文件名: 查看文件内容 ctrl+D : 退出查看 ...

  6. 一文带你深入了解 redis 复制技术及主从架构

    主从架构可以说是互联网必备的架构了,第一是为了保证服务的高可用,第二是为了实现读写分离,你可能熟悉我们常用的 MySQL 数据库的主从架构,对于我们 redis 来说也不意外,redis 数据库也有各 ...

  7. iOS开发调试概览

    概述 我们都知道Xcode默认的调试器是LLDB(在此之前使用的是GDB),但是关于LLDB的debug技巧并非所有人都比较清楚,可能所有人都知道p或者po命令打印一些变量.但是实际的情况时这些还远远 ...

  8. 教你用Java web实现多条件过滤功能

    生活中,当你闲暇之余浏览资讯的时候,当你搜索资料但繁杂信息夹杂时候,你就会想,如何更为准确的定位需求信息.今天就为你带来: 分页查询 需求分析:在列表页面中,显示指定条数的数据,通过翻页按钮完成首页/ ...

  9. 什么鬼，面试官竟然让我用Redis实现一个消息队列！！？

    GitHub 9.4k Star 的Java工程师成神之路 ,不来了解一下吗? GitHub 9.4k Star 的Java工程师成神之路 ,真的不来了解一下吗? GitHub 9.4k Star 的 ...

  10. 单例模式-python

    单例模式 什么是单例 当实例化多次得到的对象中存放的属性都一样的情况,应该将多个对象指向同一个内存,即同一个实例 有什么优点 在内存里只有一个实例,减少了内存的开销,尤其是频繁的创建和销毁实例(比如管 ...