CSS选择器day01
一、
标签选择器
又称为元素选择器，文档的元素就是最基本的选择器。
如：
P{ border:1px solid red; }
类选择器
以点’’."开头，后面紧跟类名。类名不允许有空格，与元素中class属性的值保持一致。
.one{ border:1px solid red; }
ID选择器
以#开头，后面紧跟一个ID名，ID不能重复，在选择唯一的元素的时候比较有用。
#two{ border:2px dashed blue; }
普遍选择器
使用"*"来表示普遍选择器，表示选择所有元素，通常用在组合选择器中。
*{ margin:0; padding:0; }
层次选择器
1、后代选择器
使用" "空格来隔开两个选择器，可包括子元素的子元素
2、子代选择器
使用">"来隔开两个选择器。只包括子元素。
3、相邻同胞选择器
使用 “+” 隔开两个选择器。例如 ".one+*"表示选择class为"one"元素的下一个兄弟元素。
4、一般同胞选择器
使用 “~” 隔开两个选择器。例如 ".one~*"表示选择class为"one"元素之后的所有兄弟 元素。
多选择器
使用","隔开
例如 “div,.one,#tt” 表示选择div元素，class为one的元素以及id为tt的元素
嵌套选择器
多个选择器嵌套使用。例如 “div.one” 表示class为one的div元素。
属性选择器
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
border: 1px solid red;
margin: 10px;
}
/* [title]选中有title属性的元素
[title=one]选中有title属性并且属性值为one的元素
[title^=t]选中有title属性并且属性值为以t开头的元素
[title$=e] 选中有title属性并且属性值为以e结尾的元素
title*="o"] 选中有title属性并且属性值包含o的元素
*/
/* div[title*="one"] {
background-color: pink;
} */
/* class~="one"] 选中有class属性并且属性值中有一个是one的元素 */
div[class~="one"] {
background-color: green;
}
</style>
</head>
<body>
<div class="one" title="one"></div>
<div class="two" title="two"></div>
<div class="one two" title="three"></div>
<div></div>
</body>
伪类选择器
1、子代元素相关的伪类元素选择器
:only-child 选择作为别人独生子的元素
:first-child 选择作为别人第一个孩子的元素
:last-child 选择作为比尔最后一个孩子的元素
:nth-child(n) 选择作为别人第n个孩子的元素
:nth-last-child(n) 选择作为别人倒数第n个孩子的元素
:first-of-type 选择作为别人每种类型中的第一个孩子
:last-of-type 选择作为别人每种类型的倒数第一个孩子
:nth-of-type(n) 选择作为别人每种类型中的第n个孩子
:nth-last-of-type(n) 选择作为别人每种类型中的倒数第n个孩子
2、元素状态相关伪类元素选择器
:link 未被访问的状态，a标签
:visited 已访问过的状态，a标签
:hover 鼠标悬停的状态，a标签，其他标签也可用
:active 活动的状态， a标签，其他标签也可用
/* 必须按照顺序 lvha */
/* 设定a标签未被访问的时候的样式 */
a:link {
color: gray;
}
/* a标签访问过后的样式 */
a:visited {
color: burlywood;
}
/* a标签悬停状态的样式 */
a:hover {
color: chartreuse;
}
/* a标签点击、活动状态 */
a:active {
color: darkorange;
}
:focus 聚焦的状态
:checked 用户选中的单选按钮和复选按钮
:default 默认选中的单选按钮和复选按钮
:enabled、 :disabled 可用的表单控件、禁用的表单控件 l :valid 、:invalid 通过验证的、不通过验证的
:required、:optional 必填的和选填的
:in-range 、:out-of-range 在范围内的、在范围外的
:checked
/* 选中默认选中的单选按钮或者复选按钮，设置外边线outline */
input[type="radio"]:default {
outline: 2px solid red;
}
/* 选中用户选中的单选按钮或者复选按钮，设置外边线outline */
input[type="radio"]:checked {
/* border边框占据屏幕空间
outline外边线不占据屏幕空间 */
outline: 2px solid cornflowerblue;
}
<body>
<form action="#">
<input type="radio" checked name="gender" />男
<input type="radio" name="gender" />女<br />
<input type="number" name="" id="" max="100" min="0" step="10" />
</form>
</body>
伪元素选择器
伪元素以"::"开头，用在选择器后，用于选择指定的元素。
::after 选中之后的不存在的节点，可配合content属性进行内容填充
::before 选中之前的不存在的节点，可配合content属性进行内容填充
::first-letter 选中第一个文本字符
::first-line 选中第一行文本
::selection 选中用户在选择的时候的文本
优先级
就近原则
错误：行内样式表>内部样式表>外部样式表
CSS级联（CSS样式谁生效）
1.!important 修饰的最优先
2.选择器特性值大的优先
行内样式表特性值 1000
ID选择器特性值 100
类选择器、属性选择器、伪类选择器特性值 10
标签选择器、伪元素选择器特性值 1
空格、>、+、～、* 都是0
3.特性值如果一样，那么采取就近原则
CSS外边距合并问题
块级元素垂直方向合并
毗邻元素外边距合并问题
兄弟元素之间上下外边距区域如果发生了重叠，谁大用谁的
父子元素之间，父有上边距，子有上边距，上边距合并，谁大用谁的
扫一扫
382
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
