老师的博客: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. 双飞翼布局的改造 box-sizing和margin负值的应用

    box-sizing + margin负值 升级双飞翼布局 一.box-sizing属性 .content-size, .border-size{ width: 200px; height: 100p ...

  2. oracle数据库默认是10次尝试失败后锁住用户

    一般数据库默认是10次尝试失败后锁住用户 1.查看FAILED_LOGIN_ATTEMPTS的值select * from dba_profiles: 2.修改为无限次(为安全起见,不建议使用)alt ...

  3. 说一说MVC的控制器(二)

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  4. Lucene 05 - 使用Lucene的Java API实现分页查询

    目录 1 Lucene的分页查询 2 代码示例 3 分页查询结果 1 Lucene的分页查询 搜索内容过多时, 需要考虑分页显示, 像这样: 说明: Lucene的分页查询是在内存中实现的. 2 代码 ...

  5. 《HelloGitHub月刊》第 11 期

    <HelloGitHub>第 11 期 兴趣是最好的老师,<HelloGitHub>就是帮你找到兴趣! 简介 最开始我只是想把自己在浏览 GitHub 过程中,发现的有意思.高 ...

  6. Docker折腾手记-linux下安装

    Linux下的安装方法 博主用的是centos7,其它也是大同小异 我根据的是官网的教程进行的操作,地址是 https://docs.docker.com/engine/installation/li ...

  7. Linux文件权限与属性详解 之 SUID、SGID & SBIT

    Linux文件权限与属性详解 之 一般权限 Linux文件权限与属性详解 之 ACL Linux文件权限与属性详解 之 SUID.SGID & SBIT Linux文件权限与属性详解 之 ch ...

  8. [PHP] defunct僵尸进程

    1.如果子进程先于父进程退出, 同时父进程又没有调用wait/waitpid,则该子进程将成为僵尸进程 2.如果fork完就不管了可以使用 忽略子进程信号, 防止僵尸进程 pcntl_signal(S ...

  9. jsp基础语言-jsp动作

    jsp动作是一组jsp内置的标签,用来控制jsp的行为,执行一些常用的jsp页面动作.通过jsp动作实现使用多行java代码能够实现的效果,即对常用的jsp功能进行抽象与封装. jsp共有七种标准的“ ...

  10. 跨域iframe如何实现高度自适应？

    经常有项目会要求实现iframe高度自适应,如果是同域的还好说,如果是跨域的,父页面没有办法操作子页面,想要正确获取子页面高度的话,可以采用以下办法: 方法一:使用HTML5 postMessage ...