在有些标记语言中，不能使用类名和id选择器，于是css2引入了属性选择器。

3.属性选择器

　　a)根据是否存在该属性来选择

　　　　如果希望选择有某个属性的元素，例如要选择有class属性的所有h1元素，使其文本为银色，可以这样写：

  1. /*根据单个属性来选择*/
    h1[class]{
  2.     color:sliver;
  3. }
    /*还可以根据多个属性来选择*/
    h1[class][id]{
    　　color:yellow;
    }

　　b)根据具体属性值来选择　

　　<style>

　　　　/*也可以利用多个属性值来选择,第二段变成了红色*/

　　　　p[class='one'][alt='two']{
　　　　　　color:red;
　　　　}
　　</style>
　　<body>
　　　　<p class='one'>一个class属性</p>
　　　　<p class='one' alt='two'>一个class属性加上一个alt属性</p>
　　</body>

　　c)根据部分属性值来选择

　　~=：如果属性能够接受词列表，可以根据其中的任意一个词进行选择。

　　*=word1：选择属性值中包含word1的所有元素

　　^=start：选择属性值中以start开头的所有元素

　　$=end：选择属性值中以end结尾的所有元素

  1. <style>
  2.     p[class~='bar']{
  3.         color:red;
  4.     }
  5.     p[class*='wo']{
  6.         color:blue;
  7.     }
  8.     p[class^='th']{
  9.         color:yellow;
  10.     }
  11.     p[class$='ur']{
  12.         color:purple;
  13.     }
  14. </style>
  15. <body>
  16.         <p class='one bar'>one</p><!--红色-->
  17.         <p class='one bard'>与上一段作为对比</p><!--默认颜色-->
  18.         <p class='two ok'>two</p><!--蓝色-->
  19.         <p class='three'>three</p><!--黄色-->
  20.         <p class='four'>four</p><!--紫色-->
  21. </body>

　　d)特定属性选择器

　　　　直接看例子：

  1. /*选择src属性等于figure或者以figure-开头的元素*/
  2. img[src|='figure']{
  3.     border:1px;
  4. }

4.基于文档结构的选择器

　　a)后代选择器——使用空格分隔：

　　　　选择h1中的所有em元素：

  1. h1 em{
  2.     color:gray;
  3. }
    /*当然并不限于两个选择器，例如：*/
    /*将p标签下的所有span标签下的所有em元素的文本颜色设置为灰色*/
    p span em{
    　　color:em
    }

　　b)子元素选择器——使用>号分隔

　　　选择h1的子元素而不是后代元素

  1. <style>
  2.     h1 > em{
  3.         color:red;
  4.     }
  5. </style>
  6. <body>
  7.         <h1>sjfsl<span><em>不会被选择到</em></span><em>会被选择到</em></h1>
  8. </body>

　　c)相邻兄弟（不能是堂兄弟，即拥有相同的父元素）选择器——使用＋号分隔　

  1. <style>
  2.     p + h1{
  3.         color:red;
  4.     }
  5. </style>
  6. <body>
  7.     <p>第一段</p>
  8.     <h1>第二段</h1><!--颜色变红-->
  9.     <h1>第三段</h1><!--颜色不变-->
  10.  
  11. </body>

css选择器(2)——属性选择器和基于元素结构关系的选择器的更多相关文章

  1. jQuery的简单用法（jQuery的简介，选择器，属性和css,文档处理）

    一.jQuery简介 1.1.  JS库 JavaScript 库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器. 1.2.  当前流行的 JavaSc ...

  2. CSS3新增（选择器{属性选择器，结构伪类选择器，伪元素选择器}）

    1.属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器. E [ att ]   选择具有 att 属性的 E 元素   例如:input [ value ...

  3. CSS3新增的选择器和属性

    <!doctype html>无标题文档 一.新增的选择器 CSS3新增的属性选择器 {除ie6外的大部分浏览器支持) 序号 选择器 含义 实例 1 E[att^="val&qu ...

  4. CSS Counters 计数属性

    CSS Counters其实就是一计数器,早期在CSS中计数器仅存在于ul和ol元素.如果要使用在div这样的元素上,只能通过list-style-image或者是元素的backgroud-image ...

  5. 【CSS】float属性

    float浮动属性1.作用: 将页面元素浮动起来,使其能够向左或者向右排列 2.应用: 实现页面中布局的左右排版 实现图文环绕的版式效果 3.值: 4.原理: 浮动元素将脱离默认的文档流,漂浮在默认文 ...

  6. CSS伪元素选择器和属性选择器

    伪元素 能使用伪元素来选择元素中的一些特殊位置 一.给段落定义样式 :first-letter  首字母(只能用于块元素) :first-line  第一行 1.为p元素中的第一个字符设置颜色为黄色, ...

  7. 第49天学习打卡（CSS 层次选择器 结构伪类选择器 属性选择器 美化网页元素 盒子模型）

    推荐书籍:码出高效: Java 开发手册 2.2 层次选择器 idea里代码规范是按:ctrl +alt+L快捷键 注释快捷键:ctrl+/ 1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你 ...

  8. 伪元素选择器，选择器优先级，CSS修改文字属性，CSS修改字体属性，CSS修改其他属性

    伪元素选择器 未使用元素选择器的效果 第一行:伪元素选择器:选择部分内容 第二行:伪元素选择器:选择部分内容 伪元素选择器:选择部分内容 伪元素选择器:选择部分内容 ::selection:选择指定元 ...

  9. 前端知识之CSS(1)-css语法、css选择器（属性、伪类、伪元素、分组与嵌套）、css组合器

    目录 前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2.link标签引入外部css文件 3.3.标签内直接书写 4.c ...

随机推荐

  1. Oracle中dblink的创建与删除

    查询数据库中有哪些dblink连接 select * from dba_objects where object_type='DATABASE LINK'; 删除公有的EMIS_PRODUCTOIN连 ...

  2. bzoj 4513 [Sdoi2016]储能表

    题面 https://www.lydsy.com/JudgeOnline/problem.php?id=4513 题解 要求的式子 用数位dp的方法去做 我们把式子拆开 变成 $\sum_{i=0}^ ...

  3. 127 Word Ladder 单词接龙

    给出两个单词(beginWord 和 endWord)和一个字典,找到从 beginWord 到 endWord 的最短转换序列,转换需遵循如下规则:    每次只能改变一个字母.    变换过程中的 ...

  4. php多文件上传类（含示例）

    在网上看到一个比较好的多文件上传类,自己改良了下,顺便用js实现了多文件浏览,php文件上传原理都是相同的,多文件上传也只是进行了循环上传而已,当然你也可以使用swfupload进行多文件上传! &l ...

  5. [转]如何使用MFC和类型库创建自动化项目

    本文转自:http://www.cnblogs.com/zhoug2020/archive/2012/04/01/2429064.html 摘要 本文详细介绍了如何自动化像Microsoft Offi ...

  6. aspx子集页面找父级页面元素

    var Obj= window.parent.document.getElementById("ctl00_RightTopTree_hidJsonResult"); Obj.va ...

  7. oracle PL、SQL（概念）

    一.PL/SQL简介. Oracle PL/SQL语言(Procedural Language/SQL)是结合了结构化查询和Oracle自身过程控制为一体的强大语言,PL/SQL不但支持更多的数据类型 ...

  8. Lambda表达式。

    函数式编程思想: 面向对象思想:做一件事,先找能解决这件事的对象,然后调用该对象相应方法. 面向过程思想:只要能获取到结果,怎么做的不重要,重视结果,不重视过程. 冗余的代码: public stat ...

  9. 【学习笔记】深入理解js原型和闭包系列学习笔记——精华

    深入理解js原型和闭包笔记: 1．“一切皆是对象”,对象是属性的集合. 丨 函数也是对象,但是使用typeof时为什么函数返回function而 丨  不是object呢,js为何要对函数做这样的区分 ...

  10. Java&Xml教程（十一）JAXB实现XML与Java对象转换

    JAXB是Java Architecture for XML Binding的缩写,用于在Java类与XML之间建立映射,能够帮助开发者很方便的將XML和Java对象进行相互转换. 本文以一个简单的例 ...