前端-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设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
随机推荐
- cookie、localStorage、sessionStorage 的生命周期
生命周期 存储 生命周期 cookie 没有设置 expires 选项时,cookie 的生命周期仅限于当前会话中,关闭浏览器意味着这次会话的结束,所以会话 cookie 仅存在于浏览器打开状态之下. ...
- linux SSH各配置项解释
Linux下SSH各配置项解释 关于ssh 设置的相关总结(ssh最大连接数.ssh连接时长.安全性配置等)以redhat6.3为例 ssh配置文件在: /etc/ssh/sshd_config可以打 ...
- php curl curl_getinfo()返回参数详解
php curl请求在curl_exec()函数执行之后,可以使用curl_getinfo()函数获取CURL请求输出的相关信息,示例代码如下: curl_exec($ch);$info = curl ...
- linux I2C_client产生方法一
\arch\arm\mach-omap2/board-am335xevm.c static struct i2c_board_info am335x_i2c2_boardinfo[] = { { I ...
- Servlet 串联过滤器
1. 串联Servlet过滤器的工作流程 2. 创建两个过滤器 MyFilter1和MyFilter2 1) MyFilter1 package com.example.filter; import ...
- JZ2440 裸机驱动 第6章 存储控制器
本章目标: 了解S3C2410/S3C2440地址空间的布局 掌握如何通过总线形式访问扩展的外设,比如内存.NOR Flash.网卡等 ························ ...
- java jni 调用c++ opencv代码成功范例
java上建立接口定义 package com.dtk; public class Rec { public native String RecImage(String src); public st ...
- VS2010中visual assist x的一些问题
1.如你想输入return关键字,那么在你输入r的时候该工具就会把带r的相关函数都列出,你选择一个即可,免去了连续输入和牢记的烦恼 2.当你对某个函数不是很理解的时候,你可以将鼠标放在该函数上,该工具 ...
- Django 配置总结
配置 app urls 项目下的urls.py from django.conf.urls import url,include urlpatterns = [ url(r'^BookApp/', i ...
- java 静态导入