0.前言:无论学什么，前端都是绕不开的一门技术，对于不同的人需求不同，作为一个python开发者不仅需要能读懂基本的html/css以及js代码，还要会使用它的常用的标签，以及了解比较有用的标签，把逻辑捋通，知道有什么才能用什么。需要用的时候查一下资料文档以及博客笔记。当然，如果能记住并使用它就更好不过了。

1.CSS的语法场景(优先级)：

　　1.行内：在当前标记中加入style属性。

　　  2嵌入：最常用的方式，<style></style>

　　  3.外链：<style>@import url(" 路径")

　　  4.导入：写一个单独的css文件。

2，CSS选择器:

　　1,常用的选择器:

　　　　优先级问题: 内联标签-id选择器-类选择器-标签选择器  (id:100  class 10 tag 1) 不可进位

　　　　　　　以下代码的优先级是什么，代码颜色是什么？

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

 <style>

  p{

            color:green;

        }

        .demo{

        color:yellow;

        }

        #ww{

        color:red;

        }

    </style>

</head>

<body>

<p class="demo" id="ww" style="color:black"><label style="color:white">测试</label></p>

</body>

</html>

<!--label >style>id >class>tag-->

<!--output:白色-->　

可见，当多个选择器修饰一个属性时，优先级最高的选择器生效。

　　2. 其余选择器

　　　　后代选择器li a{}

　　　　  全局选择器，用于去除与浏览器之间的边距　　　　

　　　　　伪类选择器：

    1. a:link和a等同
    2. a:visited访问过的样子
    3. a:hover  选择鼠标指针浮动在其上的元素，适用于所有元素
    4. active ：点击样式
    5. after、before：  在链接之前之后添加内容　　a::after{content:"#"}

　　3毗邻、弟弟、儿子选择器：

  <--毗邻选择器，向下选择-->

        div+p {

        color:yellow;

        }
<!--儿子选择器-->

    div>p

　　

   /*弟弟选择器*/
　　a~p{

            color:tomato;

        }

        a~label{

            color: aqua;

        }
 <div>

            <a href="">弟弟选择器</a>

            <p>哈哈</p>

            <label for="">弟弟二</label>

    </div>

　　

　　3属性选择器:

　　　　

[s9]

        {

            color:red;

        }

        [s9=good]{

        color:yellow;

        }
<p s9="hao">好标签</p>

<p s9="good">good标签</p>
 

　　　　　

　　　　

　　

　　　　

笔记一:CSS选择器的更多相关文章

  1. 【CSS学习笔记】CSS选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  2. 【笔记】CSS选择器整理（IE低版本支持性测试）

    时间:2015.05.11 参考附件:css选择器.xmind(网友共享) 查看链接:http://www.w3school.com.cn/cssref/css_selectors.asp   htt ...

  3. 前端学习笔记之CSS选择器

    阅读目录 一 基本选择器 二 后代选择器.子元素选择器 三 兄弟选择器 四 交集选择器与并集选择器 五 序列选择器 六 属性选择器 七 伪类选择器 八 伪元素选择器 九 CSS三大特性 一 基本选择器 ...

  4. CSS学习笔记02 CSS选择器

    1.通配符选择器 通配符选择器用“*"号表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素 /*设置当前页面中所有标签的颜色为红色*/ * { color: red; } 2.标签选 ...

  5. CSS 笔记之 CSS 选择器

    /*先设置背景再设置前景*/ pre{ background-color: #f8f8f8; border: solid 1px #ccc; border-radius: 3px; overflow: ...

  6. 转:CSS选择器笔记

    作者: 阮一峰 日期: 2009年3月12日 去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记. 这几天拿出来看了一下,发现很多都忘记了.所以,我决定把它们贴在这里,方便以后查 ...

  7. 【转】CSS选择器笔记

    作者: 阮一峰 日期: 2009年3月12日 来源:http://www.ruanyifeng.com/blog/2009/03/css_selectors.html 去年我学jQuery的时候,曾经 ...

  8. HTML 学习笔记 CSS(选择器3)

    CSS 属性选择器 属性选择器可以根据元素的额属性以及属性值来选择元素 例子1 如果 你希望把包含title的所有元素变成红色 *[title] {color:red} 例子2 与上面类似 可以只对有 ...

  9. HTML 学习笔记 CSS(选择器)

    CSS元素选择器 最常见的CSS 选择器就是元素选择器 换句话说 文档的元素就是最基本的选择器 如果设置HTML样式 选择器通常就是某个HTML元素 比如p h1 em a 甚至可以是HTML本身 h ...

随机推荐

  1. Java - "JUC线程池" Callable与Future

    Java多线程系列--“JUC线程池”06之 Callable和Future Callable 和 Future 简介 Callable 和 Future 是比较有趣的一对组合.当我们需要获取线程的执 ...

  2. Linux命令行介绍

    一.Linux命令行结尾的提示符有“#”和“$”两种不同的符号,代码如下所示: [root@localhost ~]# ls anaconda-ks.cfg Desktop Documents min ...

  3. HDU1074(KB12-D 状态压缩dp)

    Doing Homework Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...

  4. 集合框架二（Collection接口实现类常用遍历方法）

    四种常用遍历方式 Collection coll = new ArrayList(); coll.add("123"); coll.add("456"); co ...

  5. Tomcat启动报错:org.apache.catalina.LifecycleException: Failed to start component...java.util.zip.ZipException: error in opening zip file

    1.项目环境 IntelliJ IDEA2018.1.6 apache-tomcat-8.0.53 基于springboot开发的项目 maven3.5.3 2.出现问题 从svn同步下项目 启动to ...

  6. drupal7创建自定义的panels布局

    很简单,在主题的 *.info文件中添加一句代码: 这一句很简单,但也很重要,没有这一句,就没在panels的配置界面去显示自定义的布局 plugins[panels][layouts] = layo ...

  7. Maven学习（四）eclipse创建maven项目

    eclipse创建Maven web项目 1.创建新项目 选择File -> New ->Project 选择New Project窗口中选择 Maven -> Maven Proj ...

  8. Python 基于python实现的http接口自动化测试框架(含源码)

    基于python实现的http+json协议接口自动化测试框架(含源码) by:授客 QQ:1033553122      欢迎加入软件性能测试交流 QQ群:7156436  由于篇幅问题,采用百度网 ...

  9. [Java][读书笔记]多线程编程

    前言:最近复习java,发现一本很好的资料,<J​a​v​a​2​参​考​大​全​ ​(​第​五​版​)​> ​ ​H​e​r​b​e​r​t​.Schildt.书比较老了,06年的,一些 ...

  10. 用sparkR， 分析上亿条订单数据的脚本。

    上周我们这个10人的小团队开发的推荐拉新系统, 日拉新人数已接近4万人.过去几个月这个系统从无到有, 拉新从日增几千稳步增长到日增几万, 同事们几个月来,每天工作13个小时以上,洗澡时间都没有, 有时 ...