老师的博客: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. PHP中Smarty引擎的常用语法

    PHP中Smarty引擎的常用语法 输出今天的日期: {$smarty.now|date_format:"%H:%M %A, %B %e, %Y"} 实际上用到了PHP的time( ...

  2. I-think-2

    最近自己的压力的确很大,对自己近期思想情况做一个总结. 本来假期都自己的未来已经做了一个详细的规划:其中近期的目标就是考上一所自己心仪的大学去读研究生,并且自己也选好了大学,作为自己研究生的目标--- ...

  3. 产品研发团队如何融合OKR与Scrum敏捷开发？

    「 OKR 」现在非常的火爆,很多公司都在使用,不仅国外的 Google.英特尔等大公司在用,国内的一线知名互联网企业今日头条和一些创业团队也都在使用. 那为什么「 OKR 」这么受欢迎呢,因为把它可 ...

  4. Chapter 5 Blood Type——23

    I didn't answer. I closed my eyes again and fought the nausea with all my strength, clamping my lips ...

  5. Perl线程池

    Thread::Pool模块提供了Perl解释器线程的线程池,手册:https://metacpan.org/pod/Thread::Pool.

  6. 【Angular专题】——（2）【译】Angular中的ForwardRef

    原文地址:https://blog.thoughtram.io/angular/2015/09/03/forward-references-in-angular-2.html 作者:Christoph ...

  7. 第53章 结束会话端点(End Session Endpoint) - Identity Server 4 中文文档(v1.0.0)

    结束会话端点可用于触发单点注销(请参阅规范). 要使用结束会话端点,客户端应用程序会将用户的浏览器重定向到结束会话URL.用户在会话期间通过浏览器登录的所有应用程序都可以参与注销. 注意 终端会话端点 ...

  8. WPF中Datagrid控件添加行号

    /// <summary> /// 导入Excel文件按钮 /// </summary> /// <param name="sender">&l ...

  9. 从零开始学安全(三十一)●kali 输入 msfconsole 启动报错

    解决方法: 实际上是因为没安装就开启了msf,用下面三个命令就解决了 sudo apt-get updatesudo apt-get install metasploit-frameworkmsfco ...

  10. X级联动

    前端数据 @{ ViewBag.Title = "Index"; } <script src="~/Scripts/jquery-1.10.2.js"&g ...