一 基础选择器

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

例子:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>css学习</title>
  6. <style>
  7. /*#标签选择器*/
  8. p{
  9. color: red;
  10. }
  11. /*类选择器*/
  12. .c1{
  13. color:green;
  14. }
  15. /*id选择器*/
  16. #d2{
  17. color: yellow;
  18.  
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div>div标签</div>
  24. <div id="d2">div标签2</div>
  25. <p class="c1">p标签</p>
  26. <span class="c1">我是span标签</span>
  27. <span>我是span2号</span>
  28.  
  29. </body>
  30. </html>

二 高级选择器

1 后代选择器   子带选择器(儿子选择器) 毗邻选择器  弟弟选择器

例子:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>高级选择器</title>
  6. <style>
  7. /*后代选择器(儿子,孙子,子子孙孙)*/
  8. div a{
  9. color: red;
  10. }
  11. /*儿子选择器*/
  12. div>a{
  13. color:blue
  14. }
  15. /*毗邻选择器,就是a和span紧挨着*/
  16. a+span{
  17. color:yellow
  18. }
  19. /*弟弟选择器,相当于这个标签下面的所有标签都生效*/
  20. a~span{
  21. color:aqua;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <div>
  27. <div>
  28. <p>
  29. <a>我是孙子p标签</a>
  30. </p>
  31. </div>
  32. <a>我是儿子p标签</a>
  33. <span>我是span1号</span>
  34. <span>我是span2号</span>
  35.  
  36. </div>
  37.  
  38. </body>
  39. </html>

2 交集选择器

交集选择器:第一个选择器是标签选择器,第二个选择器是类选择器

  1. form input.active{
  2. width:200px;
  3. }

3 伪类选择器

例子:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>伪类选择器</title>
  6. <style>
  7. /*去除超链接的下划线*/
  8. a{
  9. text-decoration:none;
  10. }
  11. /*鼠标放到超链接上线显示的样式*/
  12. a:hover{
  13. color: red;
  14.  
  15. }
  16.  
  17. /*设置第一个首字母的样式*/
  18. p:first-letter{
  19. color: red;
  20. font-size: 30px;
  21.  
  22. }
  23. /* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/
  24. p:before{
  25. content: 'alex';
  26. }
  27. /*在....之后 添加内容,使用非常频繁 通常与咱们后面要讲到布局 有很大的关联(清除浮动)*/
  28.  
  29. p::after{
  30.  
  31. /*解决浮动带来的问题*/
  32. content:'.';
  33. display: block;
  34. /*width: 100px;
  35. height: 100px;
  36. background-color: red;*/
  37. visibility: hidden;
  38. height: 0;
  39. }
  40. </style>
  41. </head>
  42. <body>
  43. <p>我是p标签1</p>
  44. <a href="http://www.baidu.com">百度一下</a>
  45.  
  46. </body>
  47. </html>

三 样式权重问题

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

例子:

  1. <!--外接式和导入式只能同时存在一个-->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>css引入方式</title>
  7. <!--文件类型内接式-->
  8. <style type="text/css">
  9. p{
  10. color: green;
  11. width: 100px;
  12. height: 100px;
  13. }
  14. </style>
  15. <!--外接式,不用写style-->
  16. <link rel="stylesheet" href="./css/index.css">
  17. <!--导入式-->
  18. <style type="text/css" media="screen">
  19. @import url('./css/index.css');
  20.  
  21. </style>
  22. </head>
  23. <body>
  24. <div style="color:red;">
  25. 我是一个div
  26. </div>
  27. <p>段落</p>
  28. <a href="#">百度</a>
  29.  
  30. </body>
  31. </html>

2 权重问题比较

100>010>001
id>类>标签

例子:

  1. <!--优先级大小-->
  2. <!--id class 标签 三者依次从左到右的个数,那个左边的数字大,那个就会生效,所以pa生效-->
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6. <meta charset="UTF-8">
  7. <title>选择器</title>
  8. <!--下面这个是把默认的样式重置-->
  9. <link rel="stylesheet" type="text/css" href="https://unpkg.com/reset-css@4.0.1/reset.css">
  10. <style type="text/css" media="screen">
  11. /*1 0 0*/
  12. #pa{
  13. color: yellow;
  14.  
  15. }
  16. /*0 1 0*/
  17. .app{
  18. color:red;
  19. }
  20. /*0 0 1*/
  21. p{
  22. color: blue;
  23. }
  24.  
  25. </style>
  26. </head>
  27. <body>
  28. <div id="box">
  29. <div>
  30. <div>
  31. <div class="child">
  32. <p id="pa" class="app">猜猜我是什么颜色</p>
  33.  
  34. </div>
  35. </div>
  36. </div>
  37.  
  38. </div>
  39. <p>段落</p>
  40.  
  41. </body>
  42. </html>

四 样式继承问题

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

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

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

例子:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>继承</title>
  6. <style>
  7. *{
  8. padding: 0;
  9. margin: 0;
  10. }
  11. div{
  12. width: 200px;
  13. height:100px;
  14. background-color: green;
  15. color:red;
  16. font-size: 20px;
  17. text-align:center;
  18. line-height: 100px;
  19. /*设置行高可以让文字居中显示*/
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <div>
  25. <p>德国</p>
  26. </div>
  27.  
  28. </body>
  29. </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. 严格模式下顶层箭头函数this指向的是全局对象

    我们知道普通函数调用,this在非严格模式下指向全局对象,在严格模式下是undefined.那箭头函数呢?我们知道,箭头函数没有自己的this,它的this是最近外层非箭头函数的this,那直接在顶层 ...

  2. node 和npm环境安装

    node 安装 1.下载node二进制文件 [root@baolin-images#>> ~]#wget https://nodejs.org/dist/v10.16.0/node-v10 ...

  3. mysql8.0 安装版没有my.ini

    这时候,打开 benchmark,看一下实际路径就好了

  4. springmvc框架通过web.xml配置404 500错误导向页

    总不能用户输错了url就弹 这玩意吧? <error-page> <error-code>404</error-code> <location>/WEB ...

  5. 再问你Java内存模型的时候别再给我讲堆栈方法区

    在介绍Java内存模型之前,先来看一下到底什么是计算机内存模型,然后再来看Java内存模型在计算机内存模型的基础上做了哪些事情.要说计算机的内存模型,就要说一下一段古老的历史,看一下为什么要有内存模型 ...

  6. 计蒜客 Prefix Free Code(字典树+树状数组)

    Consider n initial strings of lower case letters, where no initial string is a prefix of any other i ...

  7. linux常用目录介绍

    bin:全称binary,含义是二进制,该目录中存放的都是一些二进制文件,这些文件都是可以被运行的. dev:该目录主要存放的是外接设备,例如:光盘等.注意:在其中的设备是不能被直接使用的,需要挂载( ...

  8. meta标签、利用媒体查询 link不同的CSS文件

    利用媒体查询 link不同的CSS文件:<link rel="stylesheet" media="screen and (min-width:1px) and ( ...

  9. GBRT(GBDT)(MART)(Tree Net)(Tree link)

    源于博客 GBRT(梯度提升回归树)有好多名字,标题全是它的别名. 它是一种迭代的回归树算法,由多棵回归树组成,所有树的结论累加起来得到最终结果.在被提出之初与SVM一起被认为是泛化能力较强的算法. ...

  10. MySQL安装后设置root 密码

    Mysql安装完成后初始化root 密码为空,直接回车 使用命令行: mysqladmin -u root password "123456" 来设置root密码.这里我设置的密码 ...