老师的博客: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. Sdcard插拔、状态广播监听，Android文件系统，Android存储器相关知识总结

    一 SDcard广播监听,注册,取消注册的实现 (1)根据实际需要监听的事件,添加action,并注册,一般在onCreate中添加 //在IntentFilter中选择你要监听的行为 IntentF ...

  2. linux（centos）搭建.net core 运行环境

     总的来说,非常简单,我记录一下: 1.打开https://www.microsoft.com/net/download?initial-os=linux 这里"Instal .NET C ...

  3. Spring Boot 项目配置的使用方法

    第一种写法resources目录下的application.properties文件 第二种写法resources目录下的application.yml文件 在项目中获取配置项: 分组配置:  (配置 ...

  4. springmvc 项目完整示例05 日志 --log4j整合 配置 log4j属性设置 log4j 配置文件 log4j应用

    log4j 就是log for java嘛,老外都喜欢这样子,比如那个I18n  ---internationalization  不就是i和n之间有18个字母... http://logging.a ...

  5. Spring Boot（十二）单元测试JUnit

    一.介绍 JUnit是一款优秀的开源Java单元测试框架,也是目前使用率最高最流行的测试框架,开发工具Eclipse和IDEA对JUnit都有很好的支持,JUnit主要用于白盒测试和回归测试. 白盒测 ...

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

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

  7. Swing——简单的计算器

    前言 这是博主学习完Swing后,使用Swing实现的一个简单计算器.做简单的计算器的目的是将最近所学的Swing给应用起来,写博文介绍的目的是记录做这个计算器的思路.下面将分为界面和事件两部分介绍. ...

  8. 【.NET Core项目实战-统一认证平台】第十章 授权篇-客户端授权

    [.NET Core项目实战-统一认证平台]开篇及目录索引 上篇文章介绍了如何使用Dapper持久化IdentityServer4(以下简称ids4)的信息,并实现了sqlserver和mysql两种 ...

  9. Angularjs进阶笔记（2）-自定义指令中的数据绑定

    有关自定义指令的scope参数,网上很多文章都在讲这3种绑定方式实现的效果是什么,但几乎没有人讲到底怎么使用,本篇希望聊聊到底怎么用这个话题. 一. 自定义指令 自定义指令,是Angularjs用来实 ...

  10. JDK源码分析（三）—— LinkedList

    参考文档 JDK源码分析(4)之 LinkedList 相关