老师的博客:https://www.cnblogs.com/liwenzhou/p/7999532.html

参考w3 school:http://www.w3school.com.cn/css/css_selector_grouping.asp

先来个总结：

　　

css 样式大总结

行内样式 直接写

内部样式  在head中<style>

外部样式  在head中<link href='地址' rel ='stylesheet' type='text/css'>

    在外部样式中又分为以下几类：

    基本选择器：

        元素选择器

            P{}

        id 选择器

            #i1{} 一般第一位不要用数字

        类选择器

            p.c1{} and .c1 {}  class=''

        通用选择器

         * {}

    组合选择器：

        后代选择器 p li {}

        儿子选择器 div>p{} 儿子不选孙子

        毗邻选择器 div +p{} 在div后面同级的p

        弟弟选择 div~p{} div后面同级的p

    属性选择器：

        p[s9='af']{}

        p[s9]{} 优先级要大

    其他：

        [title^='asdf']{}以asdf 开头的title属性

        [title$='asdf']{}以asdf 结尾的title属性

        [title*='asdf']{}含有asdf 的title属性

        [title~='asdf']{}title的多个属性中含有asdf 的

    分组和嵌套：

        分组：div，p{}

                div，

                p{}

        嵌套：.c1 p{}    .c1中的p

    伪类选择器：

        a link{} 未访问

        a visited{} 已访问

        a active{} 选定的

        a hover {} 放在上面的的连接

        input ：focus{} 输入框输入时

    伪元素选择器：

        P:first-letter{}首字母

        p:before{} 在p元素之前

        p:afer{} 在p元素之后

      before和after多用于清除浮动。

css的继承

    body{}很低的

选择器的优先级：

    行内 内部 外部

    内联 id 类 元素

css一共三种引入的样式:分别为行内样式，内部样式，外部样式

先来看下面的两种样式

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>css实例</title>

    <style>

        /*这是行内注释*/

        p{

            color: red;

            font-size: 28px

        ;}

    </style>

</head>

<body>

<p style="color:red;font-size:18px">直接行内注释</p>

<p>海燕啊</p>

</body>

外部样式

基本的选择器

<body>

<p style="color:red;font-size:18px">直接行内注释</p>

<p>默认元素选择器</p>

<p>默认元素选择器</p>

<p id="i1">id选择器 但是只能引用一下，因为id只有一个</p>

<p class="c1">类选择器</p>

<p class="c1">类选择器</p>

<p class="c1">类选择器</p>

<p class="c1">类选择器</p>

<p class="c1">类选择器</p>

<h1>h1通用选择器</h1>

</body>

</html>

css文件

/*先来段注释*/

/*元素选择器*/

p {

    color: rgba(,,,0.94)

    ;font-size: 28px;

}

/*id选择器*/

#i1 {

    color: rgba(,,,0.64);)

    ;font-size: 39px;}

/*类选择器*/

/*两种写法  第一种  .c1*/

p.c1 {

    color: yellow;

    font-size: 1px;

}

/*样式类名不要用数字开头（有的浏览器不认）。*/

/*标签中的class属性如果有多个，要用空格分隔。*/

/*通用选择器*/

* {

    color: white;

    font-size: 50px;

}

组合选择器

先来看html

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>组合选择器</title>

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

</head>

<body>

<ol>

    <li>后代选择器</li>

</ol>

<h1>This is a <em>important</em> heading</h1>

<p>This is a <em>important</em> paragraph.</p>

<div>it is  <span>儿子 </span></div><!--span是儿子-->

<div>it is <em> <span>孙子 </span></em></div>

<div>i am div</div>

<p>i am p</p>

<ul>

    <li> i am li</li>

    <p>i am p bu li brother1</p>

    <p>i am p bu li brother1</p>

    <p>i am p bu li brother1</p>

    <li> i am li</li>

</ul>

</body>

</html>

然后css

/*后代选择器*/

/*只针对某个类中的小类*/

ol li{color: aqua }

p em {

    color: blue;

}

/*儿子选择器 只选择儿子，孙子就不会选择*/

div > span{

    color:magenta;

    font-size: 50px;}

/*毗邻选择器 紧挨着的选着*/

/*选择后者 及p*/

div+p{

    color:blanchedalmond;

font-size: 2ch}

/*弟弟选择器*/

/*选择li后面的所有的同级p标签*/

li~p {

  border: 2px solid royalblue;

    color: firebrick;

    font-size: 58px;

属性选择器

html

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>属性选择器</title>

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

</head>

<body>

<p s9="asdf">wo shi yi p 标签</p>

<p s9="f">wo shi yi p 标签</p>

</body>

</html>

css

/*属性标签*/

/*第一种 s9属性是asdf*/

p[s9="asdf"]{

    color: aqua;

font-size: 53px

}

/*第二种 含有s9属性的*/

p[s9]{

    color: aqua;

font-size: 5px

}

/*很明显第二种的级别更加的高级*/

更多

/*找到所有title属性以hello开头的元素*/

[title^="hello"] {

  color: red;

}

/*找到所有title属性以hello结尾的元素*/

[title$="hello"] {

  color: yellow;

}

/*找到所有title属性中包含（字符串包含）hello的元素*/

[title*="hello"] {

  color: red;

}

/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/

[title~="hello"] {

  color: green;

}

分组与嵌套

下面是老师博客

分组

当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

div, p {

  color: red;

}

但是一般的写法是

div,

p {

  color: red;

}

嵌套

多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。

.c1 p {

  color: red;

}

。

css_选择器的更多相关文章

  1. Python开发——17.CSS

    一.CSS 1.概述 CSS(Cascading Style Sheets),层叠样式表,用来控制网页数据的表现,使网页的表现与数据内容分离. 2.引入方式 (1)行内式 <body> & ...

  2. 每日CSS_霓虹灯按钮悬停效果

    每日CSS_霓虹灯按钮悬停效果 2020_12_20 1. 代码解析 1.1 html 代码片段解析 <a href="#"> <span></spa ...

  3. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  4. jQuery的61种选择器

    The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...

  5. 05.LoT.UI 前后台通用框架分解系列之——漂亮的时间选择器

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  6. CSS 选择器及各样式引用方式

    Css :层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素. 目录 1. 选择器的分类:介绍ID.class.元素名称.符合.层次.伪类.属性选择器. 2. 样 ...

  7. jQuery学习之路（1）-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  8. 谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  9. JQuery 选择器

    选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...

随机推荐

  1. 如何写好CSS系列之表单(form)

    表单模块可以分为两部分:一是表单的布局,也就是规范表单元素单元的排列位置:二是表单元素,如:输入框.单选.复选.列表组件.搜索组件等,由于列表组件.搜索组件不是单纯的css组件,所以暂且没有实现. 一 ...

  2. redis 系列25 哨兵Sentinel (高可用演示 下)

    一. Sentinel 高可用环境准备 1.1 Sentinel 集群环境 环境 说明 操作系统版本 CentOS  7.4.1708  IP地址 172.168.18.200 网关Gateway 1 ...

  3. 基础才是重中之重~delegate里的Invoke和BeginInvoke

    回到目录 Invoke和BeginInvoke都是调用委托实体的方法,前者是同步调用,即它运行在主线程上,当Invode处理时间长时,会出现阻塞的情况,而BeginInvod是异步操作,它会从新开启一 ...

  4. java~spring-ioc的使用

    spring-ioc的使用 IOC容器在很多框架里都在使用,而在spring里它被应用的最大广泛,在框架层面 上,很多功能都使用了ioc技术,下面我们看一下ioc的使用方法. 把服务注册到ioc容器 ...

  5. yum仓库的创建

    这篇博客是yum仓库的配置过程,如果是yum客户端配置请参考 http://www.cnblogs.com/zhaojiedi1992/p/zhaojiedi_linux_002.html 1 环境介 ...

  6. 图像检索(1): 再论SIFT-基于vlfeat实现

    概述 基于内容的图像检索技术是采用某种算法来提取图像中的特征,并将特征存储起来,组成图像特征数据库.当需要检索图像时,采用相同的特征提取技术提取出待检索图像的特征,并根据某种相似性准则计算得到特征数据 ...

  7. 痞子衡嵌入式：ARM Cortex-M内核那些事（5）- 指令集

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是ARM Cortex-M指令集. 指令集 指令长度(bits) 包含指令 CortexM0 CortexM0+ CortexM1 Cor ...

  8. (摘)linux下yum安装redis以及使用

    1.yum install redis      --查看是否有redis   yum 源 2.yum install epel-release    --下载fedora的epel仓库 3.yum ...

  9. mybatis报错：Caused by: java.lang.IllegalArgumentException: Caches collection already contains value for com.crm.dao.PaperUserMapper

    一.问题 eclipse启动时报下面的错误: Caused by: java.lang.IllegalArgumentException: Caches collection already cont ...

  10. Linux系统启动详解

    系统启动流程 通过下图认识下Linux系统的总体启动流程. BIOS BIOS一般负责检查硬件和查找启动设备. MBR:Boot Code MBR只是一段引导代码,真正的引导是由引导程序去执行的. G ...