一 基础选择器

标签选择器：选择的标签的‘共性’，而不是特性
div{}、ul{}、ol{}、form{}
类选择器：.box{}
id选择器：#box{} 只能选择器的特性，主要是为了js
*通配符选择器：重置样式

例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>css学习</title>

     <style>

         /*#标签选择器*/

         p{

             color: red;

         }

         /*类选择器*/

         .c1{

             color:green;

         }

         /*id选择器*/

         #d2{

             color: yellow;

         }

     </style>

 </head>

 <body>

 <div>div标签</div>

 <div id="d2">div标签2</div>

 <p class="c1">p标签</p>

 <span class="c1">我是span标签</span>

 <span>我是span2号</span>

 </body>

 </html>

二 高级选择器

1 后代选择器   子带选择器（儿子选择器） 毗邻选择器  弟弟选择器

例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>高级选择器</title>

     <style>

         /*后代选择器(儿子，孙子，子子孙孙)*/

         div a{

             color: red;

         }

         /*儿子选择器*/

         div>a{

             color:blue

         }

         /*毗邻选择器，就是a和span紧挨着*/

         a+span{

             color:yellow

         }

         /*弟弟选择器,相当于这个标签下面的所有标签都生效*/

         a~span{

             color:aqua;

         }

     </style>

 </head>

 <body>

 <div>

     <div>

         <p>

             <a>我是孙子p标签</a>

         </p>

     </div>

     <a>我是儿子p标签</a>

     <span>我是span1号</span>

     <span>我是span2号</span>

 </div>

 </body>

 </html>

2 交集选择器

交集选择器：第一个选择器是标签选择器，第二个选择器是类选择器

form input.active{

                width:200px;

            }

3 伪类选择器

例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>伪类选择器</title>

     <style>

         /*去除超链接的下划线*/

         a{

             text-decoration:none;

         }

         /*鼠标放到超链接上线显示的样式*/

           a:hover{

             color: red;

                 }

         /*设置第一个首字母的样式*/

         p:first-letter{

             color: red;

             font-size: 30px;

         }

         /* 在....之前 添加内容   这个属性使用不是很频繁 了解  使用此伪元素选择器一定要结合content属性*/

         p:before{

             content: 'alex';

         }

         /*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/

         p::after{

             /*解决浮动带来的问题*/

             content:'.';

             display: block;

             /*width: 100px;

             height: 100px;

             background-color: red;*/

             visibility: hidden;

             height: 0;

         }

     </style>

 </head>

 <body>

 <p>我是p标签1</p>

 <a href="http://www.baidu.com">百度一下</a>

 </body>

 </html>

三 样式权重问题

1 行内的样式>内接样式>外接

例子：

 <!--外接式和导入式只能同时存在一个-->

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>css引入方式</title>

     <!--文件类型内接式-->

     <style type="text/css">

         p{

             color: green;

             width: 100px;

             height: 100px;

         }

     </style>

     <!--外接式，不用写style-->

     <link rel="stylesheet" href="./css/index.css">

     <!--导入式-->

     <style type="text/css" media="screen">

         @import url('./css/index.css');

     </style>

 </head>

 <body>

 <div style="color:red;">

     我是一个div

 </div>

 <p>段落</p>

 <a href="#">百度</a>

 </body>

 </html>

2 权重问题比较

100>010>001
id>类>标签

例子：

 <!--优先级大小-->

 <!--id class 标签 三者依次从左到右的个数，那个左边的数字大，那个就会生效，所以pa生效-->

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>选择器</title>

     <!--下面这个是把默认的样式重置-->

     <link rel="stylesheet" type="text/css" href="https://unpkg.com/reset-css@4.0.1/reset.css">

     <style type="text/css" media="screen">

         /*1 0 0*/

         #pa{

             color: yellow;

         }

         /*0 1 0*/

         .app{

             color:red;

         }

         /*0 0 1*/

         p{

             color: blue;

         }

     </style>

 </head>

 <body>

 <div id="box">

     <div>

         <div>

             <div class="child">

                 <p id="pa" class="app">猜猜我是什么颜色</p>

             </div>

         </div>

     </div>

 </div>

 <p>段落</p>

 </body>

 </html>

四 样式继承问题

继承来的属性权重为0，如果权重都为0，谁描述的近谁优先，就是写的越详细越优先

继承和权重
记住：有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。

但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。

例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>继承</title>

     <style>

         *{

             padding: 0;

             margin: 0;

         }

         div{

             width: 200px;

             height:100px;

             background-color: green;

             color:red;

             font-size: 20px;

             text-align:center;

             line-height: 100px;

             /*设置行高可以让文字居中显示*/

         }

     </style>

 </head>

 <body>

 <div>

     <p>德国</p>

 </div>

 </body>

 </html>

11-1 css属性选择器的更多相关文章

  1. IE7浏览器下CSS属性选择器二三事

    一.为何专门说起IE7 以前,或者说数年前,我们从事桌面端网页开发的时候,基本上都还要兼顾IE6浏览器, 即使有些特性,IE7支持,我们也会忽略之.于是,我们会不自然地把IE6和IE7浏览器归为一路货 ...

  2. CSS 属性选择器的深入挖掘

    CSS 属性选择器,可以通过已经存在的属性名或属性值匹配元素. 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展.本文将会比较全面的介绍属性选择器,尽可能的去挖掘这个选择器在不同场 ...

  3. CSS：CSS 属性 选择器

    ylbtech-CSS:CSS 属性 选择器 1.返回顶部 1. CSS 属性 选择器 具有特定属性的HTML元素样式 具有特定属性的HTML元素样式不仅仅是class和id. 注意:IE7和IE8需 ...

  4. CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别

    CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别 总结: "value 是完整单词" 类型的比较符号: ~=, |= "拼接字符串" 类型的比较 ...

  5. CSS属性选择器温故-4

    1.属性选择器就是通过元素属性来找到元素 2.属性选择器语法 CSS3遵循了惯用的编码规则,通配符的使用提高了样式表的书写效率,也使CSS3的属性选择器更符合编码习惯 3.浏览器兼容性 CSS选择器总 ...

  6. CSS 属性选择器(八)

    一.属性选择器 属性选择使用中括号进行标识,中括号内包含属性名,属性值或者属性表达式 如h1[title],h1[title="Logon"], 二.属性选择器分类 2.1.匹配属 ...

  7. CSS笔记（二）CSS属性选择器

    对带有指定属性的HTML元素设置样式. 参考: http://www.w3school.com.cn/css/css_syntax_attribute_selector.asp 选择器 描述 [att ...

  8. 前端学习 -- Css -- 属性选择器

    属性选择器:根据元素的属性选择指定元素 语法:[属性名] 选取含有指定属性的元素 [属性名="属性值"]:选取属性值等于指定值的元素 [属性名^="属性值"]: ...

  9. 使用这些 CSS 属性选择器来提高前端开发效率

    属性选择器非常神奇.它们可以使你摆脱棘手的问题,帮助你避免添加类,并指出代码中的一些问题.但是不要担心,虽然属性选择器非常复杂和强大,但是它们很容易学习和使用.在本文中,我们将讨论它们是如何运行的,并 ...

  10. css 属性选择器

    css2的属性选择器 1.[class~="flower"]:选中有flower的class class="flower ss" class="ss ...

随机推荐

  1. _mysql_exceptions.IntegrityError: (1062, "Duplicate entry, Python操作MySQL数据库，插入重复数据

    [python] view plain copy sql = "INSERT  INTO test_c(id,name,sex)values(%s,%s,%s)" param =  ...

  2. Delphi 设计模式：《HeadFirst设计模式》Delphi7代码---状态模式[转]

    {没有应用状态模式的代码} //工程文件 program Project1; {$APPTYPE CONSOLE} uses  uGumballMachine in 'uGumballMachine. ...

  3. R330 打印机连供墨水红灯常量处理

    墨水灯红灯常量,表示墨盒没墨水 1.按红灯,将墨盒移动到右侧空处 2.按住连供顶部的重置小按钮 15秒以上,复位(这个应该是让连供墨盒产生一个另外的墨盒序号,骗打印机换了个新墨盒) 3.按打印机红灯, ...

  4. 数据库操作之Spring JDBCTemplate（postgresql）

    本文总结了两种使用JDBCTemplate进行数据库CRUD操作的例子,我用的是pg,废话不说,直接开始吧. 先贴一张目录结果图吧: 上图中最主要的是配置文件和所需的各种jar包. 一.通过属性文件的 ...

  5. redis书籍

    redis中文官网命令网址:http://doc.redisfans.com/ redis英文官网命令网址:https://redis.io/commands redis书籍 由 Karl Segui ...

  6. 助力深度学习！阿里开源可插拔 GPU 共享调度工具

    根据 Gartner 对全球 CIO 的调查结果显示,人工智能将成为 2019 年组织革命的颠覆性力量.对于人工智能来说,算力即正义,成本即能力,利用 Docker 和 Kubernetes 代表云原 ...

  7. Django与HTML业务基本结合

    app里都有migrations文件 app: migrations 数据修改表结构,数据库操作记录 admin Django为我们提供后台管理 apps 配置当前app models ORM,写指定 ...

  8. 【JZOJ5068】【GDSOI2017第二轮模拟】树 动态规划+prufer序列

    题面 有n个点,它们从1到n进行标号,第i个点的限制为度数不能超过A[i]. 现在对于每个s (1 <= s <= n),问从这n个点中选出一些点组成大小为s的有标号无根树的方案数. 10 ...

  9. YouTube上最受欢迎的十大机器学习视频（最新）

    2017-05-04 机器之心 选自KDnuggets 作者:Thuy T. Pham 机器之心编译 参与:微胖.黄小天 虽然 YouTube 有很多不错的机器学习视频,但是很难搞清楚是否值得一看,何 ...

  10. python中函数和方法区别，以及如何给python类动态绑定方法和属性（涉及types.MethodType()和__slots__）

    网上有很多同义但不同方式的说法,下面的这个说法比较让你容易理解和接受 与类和实例无绑定关系的function都属于函数(function): 与类和实例有绑定关系的function都属于方法(meth ...