高级选择器

总结:

 <!--
总结:
基础选择器:
1.标签选择器 div
2.类选择器 .div1
3.id选择器 #box
4.通配符选择器 *
高级选择器:
1.群组选择器 中间用,
.title,.content,.footer{}
2.交集选择器 选择器之间不能有空格,第一个标签必须是标签选择器,第二个标签可以是id或者类选择器
p.p1{} p#title1{}
3.后代选择器 选择器之间用 空格
ul a{}
4.子代选择器 选择器之间用 >
ul>li{}
5.毗邻选择器 选择器之间用 + 紧跟着h3标题的标签
h3+p{}
6.兄弟选择器 选择器之间用~
h3~p{}
7.属性选择器
[class='baidu']{}
[class^='btn']{}
[class$='ault']{}
css样式优先级:
行内样式 > 内部样式表 > 外部样式表
ID选择器 > 类选择器 > 标签选择器
-->

并集选择器:

/*并集选择器 (组合)  设置多个标签中的统一样式*/
a,h4{
color: #666;
font-size: 20px;
text-decoration: none;
} /* * 通配符选择器 */
/* 性能有点差*/
html,body,div,p,span,a{ color: red; }

交集选择器:

/*交集选择器*/

        h3{
width:300px;
color: red;
} .active{
font-size: 30px;
} h3.active{
background-color: yellow;
}

后代选择器

        /*后代选择器 在css中使用非常频繁*/
/*div p{
color: red;
} div div p{
color: yellow;
} .container div p{
color: green;
}*/

子代选择器:

/*子代选择器*/

        .container>p{
color: yellowgreen;
}

属性选择器:

除了HTML元素的id属性和class属性外,还可以根据HTML元素的特定属性选择元素。

 <div class="box">
<form>
<label for="user">用户名</label>
<input type="text" name="" id="user">
<label for="pwd">密码:</label>
<input type="password" id="pwd">
</form> </div>
---------------------------------------------------
根据属性查找 [title] {
color: red;
}
---------------------------------------------------
根据属性和值查找
找到所有title属性等于hello的元素:
[title="hello"] {
color: red;
}
-----------------------------------------------------
找到所有title属性以hello开头的元素: [title^="hello"] {
color: red;
} ------------------------------------------------------
找到所有title属性以hello结尾的元素:
[title$="hello"] {
color: red;
}
------------------------------------------------------
找到所有title属性中包含(字符串包含)hello的元素: [title*="hello"] {
color: red;
}
----------------------------------------------------
找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素:
[title~="hello"] {
color: red;
}
---------------------------------------------------
表单常用
input[type="text"] {
backgroundcolor: red;
}

前端-CSS-3-高级选择器的更多相关文章

  1. css的高级选择器,后代选择器,子代选择器,并集选择器,交集选择器

    高级选择器: 后代选择器 子代选择器 并集选择器 交集选择器 一.后代选择器: 使用空格表示后代选择器,父元素的后代(包括儿子,孙子,从孙子) 也就是说,box类下的所有span标签 字体颜色都被设置 ...

  2. 前端css样式及选择器

    标题: 1.scc概述 2.行内样式 3.内接样式 4.外接样式(链接式)    推荐使用 5.外接样式(导入式) 6.嵌套规则 7.css选择器 1.scc(Cascading Style Shee ...

  3. 前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器

    前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介    叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 ...

  4. python全栈开发day38-css三种引入方式、基础选择器、高级选择器、补充选择器

    一.昨日内容回顾 div:分割整个网站,很多块 (1)排版标签 (2)块级标签 独占一行 可以设置高和宽,如果不设置宽高,默认是父盒子的宽 span: (1) 小区域 (2)文本标签 (3)在一行内显 ...

  5. 前端 CSS的选择器 高级选择器

    高级选择器分为: 后代选择器 儿子选择器 并集选择器 交集选择器 后代选择器 使用空格表示后代选择器.父元素的后代(包括儿子,孙子,重孙子) 后代选择器 在CSS中使用非常频繁 因为HTML元素可以嵌 ...

  6. day48 前端高级选择器优先级

    复习 1. 基础选择器 标签选择器(div) | 类选择器(.div1) | id选择器(#div2) <div class="div1" id="div2&quo ...

  7. 前端----css 选择器

      css 为了修饰页面作用, 让页面好看 ⑴ css的引入方式1,行内样式body里面2,内接样式在html里面的 style 里面3,外接样式两种:①链接式: <link rel=" ...

  8. css高级选择器&盒模型

    css高级选择器&盒模型 1.组合选择器 群组选择器 /* 每个选择器为可以为三种基础选择器的任意一个,用逗号隔开,控制多个*/ div,.div,#div{ color:red } 后代(子 ...

  9. python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  10. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性  定位(position)z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

随机推荐

  1. 详解SID之终结篇

    今天测试某款监控软件时遇到一个比较棘手的问题,这款软件需要在被监控端安装客户端程序.成功在第一个节点安装好客户端后问题出现了,在其他节点安装时报错无法安装.软件报的错误信息无从下手且系统日志也看不出什 ...

  2. Java的四种引用之强弱软虚

    在java中提供4个级别的引用:强引用.软引用.弱引用和虚引用.除了强引用外,其他3中引用均可以在java.lang.ref包中找到对应的类.开发人员可以在应用程序中直接使用他们. 1 强引用 强引用 ...

  3. [LeetCode系列] 从中序遍历和后序遍历序列构造二叉树(迭代解法)

    给定中序遍历inorder和后序遍历postorder, 请构造出二叉树. 算法思路: 设后序遍历为po, 中序遍历为io. 首先取出po的最后一个节点作为根节点, 同时将这个节点入stn栈; 随后比 ...

  4. POJ2127 LICS模板

    题目:http://poj.org/problem?id=2127 十分费劲地终于记录好了路径……用一个前驱. 这是 n^2 的LICS方法.其实就是 n ^ 2 log n 把“找之前的d [ j ...

  5. Java Web Service 学习笔记

    一.服务端 1. 创建Java工程 2. 创建接口HostipalServiceInterface package ws_server; import javax.jws.WebMethod; imp ...

  6. 转Python 和C#的交互

    http://www.cnblogs.com/wilber2013/category/708919.html IronPython和C#交互   IronPython是一个.NET平台上的Python ...

  7. Django Ajax登录 防止CSRF

    什么是CSRF 维基百科: 跨站请求伪造(英语:Cross-site request forgery),也被称为 one-click attack 或者 session riding,通常缩写为 CS ...

  8. Eclipse整合Tomcat开发Dynamic Web Project环境总结

    一.引子 习惯了MyEclipse的你是否曾想过基于Eclipse进行Dynamic Web Project项目开发呢?网上资料颇多,但是实践起来却发现总有这样那样的问题,设计Lucene搜索引擎项目 ...

  9. appium定位方法

    1.id定位 driver.find_element_by_id("这里是resource-id") 2.name定位 (新版本的appium 1.7 已经没有这个定位方法了) d ...

  10. java web 程序---缓冲代码

    在写验证码的时候,我的验证码是随机的,所以每次点击时,刷新页面,验证码都会改变. 可是,当我点击刷新时,验证码不变,说明,没有缓冲. 这里差三行代码. response.setHeader(" ...