CSS选择器汇总

最新推荐文章于 2022-06-22 10:46:09 发布

橙子AQA

最新推荐文章于 2022-06-22 10:46:09 发布

阅读量271

点赞数

分类专栏： # CSS 文章标签： CSS

本文链接：https://blog.csdn.net/qq_35211818/article/details/80839925

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、overflow元素
overflow : hidden,scroll,auto隐藏或显示滚动条
overflow-y
overflow-x
二、设置表格间间隔
border-collapse: separate;
border-spacing: 100px 50px;
三、合并单元格
border-collapse:collapse;

四、border属性
border : 1px solid black;
border-style
border-width;
border-color;

五、font属性
font
font-family
font-style
font-size
font-color

六、background属性
background
background-image
background-repeat 平铺方式
backgorund-color
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
<script type="text/javascript" src="example.js"></script>
background-position
background-attachment

七、text 属性
text
text-align 元素内部文字水平布局
text-decoration 删除线的位置
vertical-align 文字或图片垂直布局
color 文字颜色
line-height 行高

八、宽度/高度 = 文本宽度+填充内容（上下）+边框（上下）+边距（上下）
height
width
max-height
min-height
max-width
min-width

九、display visibility属性
显示与隐藏元素
display:none block == $("").hide() $().show()
visibility:hidden show (占空间会影响布局)
display:inline 按行显示

十、position属性
配合 left ,right ,top ,bottom属性使用
static 默认
fixed 元素的位置相对于浏览器窗口是固定位置。
Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠
relative 相对定位会按照元素的原始位置对该元素进行移动
absolute 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。
sticky 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

十一、z-index属性
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

十二、float属性 (先排版浮动属性的元素) --------- 可以使垂直布局变成水平布局
float left|right
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}

十三、clear 属性
left
right
both
none
clear 属性指定元素（左右）两侧不能出现浮动元素。

十四、对齐
1、margin 属性对齐
auto 元素框居中对齐如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。
文件居中对齐采用text-align
图片居中对齐也可以采用margin ：auto （设置好宽度）
2、position ：absolute
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
当使用 position 来对齐元素时, 通常 <body> 元素会设置 margin 和 padding 。这样可以避免在不同的浏览器中出现可见的差异。
3、float属性 ---左右对齐
如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 "clearfix(清除浮动)" 来解决该问题。
.clearfix {
overflow: auto;
}
4、垂直居中对齐 --- padding
内容垂直和水平都居中
水平和垂直都居中，可以使用 padding 和 text-align: center:
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
5、垂直居中 - 使用 line-height

十五、CSS元素选择器
后代选择器(以空格分隔) div p div下的所有p标签
子元素选择器(以大于号分隔） div>p 与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接子元素的元素。
相邻兄弟选择器（以加号分隔） div+p 选择逻辑上紧接在另一个元素（div）后的第一个（p）元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）
普通兄弟选择器（以破折号分隔） div~p 后续兄弟选择器选取所有指定元素之后的逻辑直接相邻兄弟元素

十六、伪类
语法
selector:pseudo-class {property:value;}
selector.class:pseudo-class {property:value;}
1、anchor伪类
例子：
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 *//
2、child伪类
first-child
last-child
p > i:first-child
{
color:blue;
}
3、lang 伪类
伪类使你有能力为不同的语言定义特殊的规则

所有伪类汇总

选择器	示例	示例说明
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择正在活动链接
:hover	a:hover	把鼠标放在链接上的状态
:focus	input:focus	选择元素输入后具有焦点
:first-letter	p:first-letter	选择每个<p> 元素的第一个字母
:first-line	p:first-line	选择每个<p> 元素的第一行
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的 <]p> 元素
:before	p:before	在每个<p>元素之前插入内容
:after	p:after	在每个<p>元素之后插入内容
:lang(language)	p:lang(it)	为<p>元素的lang属性选择一个开始值

十七、CSS中所有选择器汇总

选择器	示例	示例说明	CSS
.class	.intro	选择所有class="intro"的元素	1
#id	#firstname	选择所有id="firstname"的元素	1
*	*	选择所有元素	2
element	p	选择所有<p>元素	1
element,element	div,p	选择所有<div>元素和<p>元素	1
element element	div p	选择<div>元素内的所有<p>元素	1
element>element	div>p	选择所有父级是 <div> 元素的 <p> 元素	2
element+element	div+p	选择所有紧接着<div>元素之后的<p>元素	2
[attribute]	[target]	选择所有带有target属性元素	2
[attribute=value]	[target=-blank]	选择所有使用target="-blank"的元素	2
[attribute~=value]	[title~=flower]	选择标题属性包含单词"flower"的所有元素	2
[attribute\|=language]	[lang\|=en]	选择一个lang属性的起始值="EN"的所有元素	2
:link	a:link	选择所有未访问链接	1
:visited	a:visited	选择所有访问过的链接	1
:active	a:active	选择活动链接	1
:hover	a:hover	选择鼠标在链接上面时	1
:focus	input:focus	选择具有焦点的输入元素	2
:first-letter	p:first-letter	选择每一个<P>元素的第一个字母	1
:first-line	p:first-line	选择每一个<P>元素的第一行	1
:first-child	p:first-child	指定只有当<p>元素是其父级的第一个子级的样式。	2
:before	p:before	在每个<p>元素之前插入内容	2
:after	p:after	在每个<p>元素之后插入内容	2
:lang(language)	p:lang(it)	选择一个lang属性的起始值="it"的所有<p>元素	2
element1~element2	p~ul	选择p元素之后的每一个ul元素	3
[attribute^=value]	a[src^="https"]	选择每一个src属性的值以"https"开头的元素	3
[attribute$=value]	a[src$=".pdf"]	选择每一个src属性的值以".pdf"结尾的元素	3
[attribute=value*]	a[src*="runoob"]	选择每一个src属性的值包含子字符串"runoob"的元素	3
:first-of-type	p:first-of-type	选择每个p元素是其父级的第一个p元素	3
:last-of-type	p:last-of-type	选择每个p元素是其父级的最后一个p元素	3
:only-of-type	p:only-of-type	选择每个p元素是其父级的唯一p元素	3
:only-child	p:only-child	选择每个p元素是其父级的唯一子元素	3
:nth-child(n)	p:nth-child(2)	选择每个p元素是其父级的第二个子元素	3
:nth-last-child(n)	p:nth-last-child(2)	选择每个p元素的是其父级的第二个子元素，从最后一个子项计数	3
:nth-of-type(n)	p:nth-of-type(2)	选择每个p元素是其父级的第二个p元素	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择每个p元素的是其父级的第二个p元素，从最后一个子项计数	3
:last-child	p:last-child	选择每个p元素是其父级的最后一个子级。	3
:root	:root	选择文档的根元素	3
:empty	p:empty	选择每个没有任何子级的p元素（包括文本节点）	3
:target	#news:target	选择当前活动的#news元素（包含该锚名称的点击的URL）	3
:enabled	input:enabled	选择每一个已启用的输入元素	3
:disabled	input:disabled	选择每一个禁用的输入元素	3
:checked	input:checked	选择每个选中的输入元素	3
:not(selector)	:not(p)	选择每个并非p元素的元素	3
::selection	::selection	匹配元素中被用户选中或处于高亮状态的部分	3
:out-of-range	:out-of-range	匹配值在指定区间之外的input元素	3
:in-range	:in-range	匹配值在指定区间之内的input元素	3
:read-write	:read-write	用于匹配可读及可写的元素	3
:read-only	:read-only	用于匹配设置 "readonly"（只读）属性的元素	3
:optional	:optional	用于匹配可选的输入元素	3
:required	:required	用于匹配设置了 "required" 属性的元素	3
:valid	:valid	用于匹配输入值为合法的元素	3
:invalid	:invalid	用于匹配输入值为非法的元素	3

橙子AQA

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器汇总

一、overflow元素overflow : hidden,scroll,auto隐藏或显示滚动条overflow-yoverflow-x二、设置表格间间隔border-collapse: separate;border-spacing: 100px 50px;三、合并单元格border-collapse:collapse;四、border属性border : 1px solid black;bo...
复制链接

扫一扫