老师的博客: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. Zabbix系列之八——安装agent监控windows

    一.下载zabbix-agent客户端 被监控的主机装在windows server 2012 64位操作系统,被监控端需要安装: http://www.zabbix.com/downloads/3. ...

  2. 华为oj之字符串最后一个单词的长度

    题目: 字符串最后一个单词的长度 热度指数:9697 时间限制:1秒 空间限制:32768K 本题知识点: 字符串 题目描述 计算字符串最后一个单词的长度,单词以空格隔开. 输入描述: 一行字符串,非 ...

  3. Kafka数据迁移

    1.概述 Kafka的使用场景非常广泛,一些实时流数据业务场景,均依赖Kafka来做数据分流.而在分布式应用场景中,数据迁移是一个比较常见的问题.关于Kafka集群数据如何迁移,今天笔者将为大家详细介 ...

  4. angr初使用（1）

    angr是早在几年前就出来了的一款很好用的工具,如今也出了docker,所以想直接安个docker来跑一跑. docker pull angr/angr .下载下来以后,进入docker ,这时并没有 ...

  5. 10年架构师告诉你，他眼中的Spring容器是什么样子的

    相关文章 如何慢慢地快速成长起来? 成长的故事之Spring Core系列 你是如何看待Spring容器的,是这样子吗? Spring的启动过程,你有认真思考过吗?(待写) 面向切面编程,你指的是Sp ...

  6. percona-toolkit 之 【pt-archiver】

    背景: 工作上需要删除或则归档一张大表,这时候用pt-archiver可以很好的满足要求,其不仅可以归档数据,还有删除.导出到文件等功能.并且在主从架构当中,可以兼顾从库(一个或则多个)进行归档,避免 ...

  7. Docker镜像构建的两种方式（六）--技术流ken

    镜像构建介绍 在什么情况下我们需要自己构建镜像那? (1)当我们找不到现有的镜像,比如自己开发的应用程序 (2)需要在镜像中加入特定的功能 docker构建镜像有两种方式:docker commit命 ...

  8. Python之文件和目录操作

    1.文件基本操作 python内置了打开文件的函数open(),使用规则如下:   File_object=open(filename[,access_mode][,buffering]) Filen ...

  9. ROS笔记3 理解nodes

    http://wiki.ros.org/ROS/Tutorials/UnderstandingNodes 介绍几个命令行工具用法 roscore rosnode rosrun A node reall ...

  10. Sql 语句拼接 多条件分页查询

    Create PROCEDURE [dbo].[Proc_B2B_GetBatchMainPaging] @StationNo AS varchar() , --m @StationName AS v ...