前端-CSS-3-高级选择器
高级选择器
总结:
<!--
总结:
基础选择器:
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-高级选择器的更多相关文章
- css的高级选择器,后代选择器,子代选择器,并集选择器,交集选择器
高级选择器: 后代选择器 子代选择器 并集选择器 交集选择器 一.后代选择器: 使用空格表示后代选择器,父元素的后代(包括儿子,孙子,从孙子) 也就是说,box类下的所有span标签 字体颜色都被设置 ...
- 前端css样式及选择器
标题: 1.scc概述 2.行内样式 3.内接样式 4.外接样式(链接式) 推荐使用 5.外接样式(导入式) 6.嵌套规则 7.css选择器 1.scc(Cascading Style Shee ...
- 前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器
前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介 叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 ...
- python全栈开发day38-css三种引入方式、基础选择器、高级选择器、补充选择器
一.昨日内容回顾 div:分割整个网站,很多块 (1)排版标签 (2)块级标签 独占一行 可以设置高和宽,如果不设置宽高,默认是父盒子的宽 span: (1) 小区域 (2)文本标签 (3)在一行内显 ...
- 前端 CSS的选择器 高级选择器
高级选择器分为: 后代选择器 儿子选择器 并集选择器 交集选择器 后代选择器 使用空格表示后代选择器.父元素的后代(包括儿子,孙子,重孙子) 后代选择器 在CSS中使用非常频繁 因为HTML元素可以嵌 ...
- day48 前端高级选择器优先级
复习 1. 基础选择器 标签选择器(div) | 类选择器(.div1) | id选择器(#div2) <div class="div1" id="div2&quo ...
- 前端----css 选择器
css 为了修饰页面作用, 让页面好看 ⑴ css的引入方式1,行内样式body里面2,内接样式在html里面的 style 里面3,外接样式两种:①链接式: <link rel=" ...
- css高级选择器&盒模型
css高级选择器&盒模型 1.组合选择器 群组选择器 /* 每个选择器为可以为三种基础选择器的任意一个,用逗号隔开,控制多个*/ div,.div,#div{ color:red } 后代(子 ...
- python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位(position)z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
随机推荐
- 详解SID之终结篇
今天测试某款监控软件时遇到一个比较棘手的问题,这款软件需要在被监控端安装客户端程序.成功在第一个节点安装好客户端后问题出现了,在其他节点安装时报错无法安装.软件报的错误信息无从下手且系统日志也看不出什 ...
- Java的四种引用之强弱软虚
在java中提供4个级别的引用:强引用.软引用.弱引用和虚引用.除了强引用外,其他3中引用均可以在java.lang.ref包中找到对应的类.开发人员可以在应用程序中直接使用他们. 1 强引用 强引用 ...
- [LeetCode系列] 从中序遍历和后序遍历序列构造二叉树(迭代解法)
给定中序遍历inorder和后序遍历postorder, 请构造出二叉树. 算法思路: 设后序遍历为po, 中序遍历为io. 首先取出po的最后一个节点作为根节点, 同时将这个节点入stn栈; 随后比 ...
- POJ2127 LICS模板
题目:http://poj.org/problem?id=2127 十分费劲地终于记录好了路径……用一个前驱. 这是 n^2 的LICS方法.其实就是 n ^ 2 log n 把“找之前的d [ j ...
- Java Web Service 学习笔记
一.服务端 1. 创建Java工程 2. 创建接口HostipalServiceInterface package ws_server; import javax.jws.WebMethod; imp ...
- 转Python 和C#的交互
http://www.cnblogs.com/wilber2013/category/708919.html IronPython和C#交互 IronPython是一个.NET平台上的Python ...
- Django Ajax登录 防止CSRF
什么是CSRF 维基百科: 跨站请求伪造(英语:Cross-site request forgery),也被称为 one-click attack 或者 session riding,通常缩写为 CS ...
- Eclipse整合Tomcat开发Dynamic Web Project环境总结
一.引子 习惯了MyEclipse的你是否曾想过基于Eclipse进行Dynamic Web Project项目开发呢?网上资料颇多,但是实践起来却发现总有这样那样的问题,设计Lucene搜索引擎项目 ...
- appium定位方法
1.id定位 driver.find_element_by_id("这里是resource-id") 2.name定位 (新版本的appium 1.7 已经没有这个定位方法了) d ...
- java web 程序---缓冲代码
在写验证码的时候,我的验证码是随机的,所以每次点击时,刷新页面,验证码都会改变. 可是,当我点击刷新时,验证码不变,说明,没有缓冲. 这里差三行代码. response.setHeader(" ...