CSS选择器

时间：2021-06-19 12:34:06 收藏：0 阅读：11

详细的选择器

关系选择器：
- 后代选择器：S1 S2 选择S1所有的后代的S2元素
- 子代选择器：S1>S2 选择作为S1子级的S2元素
- 相邻选择器：S1+S2 选择S1同级且紧挨着的S2元素
- 兄弟选择器：S1~S2 选择S1同级的所有兄弟节点
属性选择器
- [attr]：查找具有attr属性的元素
- [attr="aa"] 要求attr属性的值是aa的元素
- [attr*="aa"] attr属性值中包含aa即可
- [attr~="aa"] attr属性值包含aa的单词
- [attr^="aa"] attr属性的值以aa开头
- [attr$="aa"] attr属性值以aa来结尾
伪类选择器
- 关于a链接的伪类：:link, :visited, :hover,:active
- E:focus：元素（输入框）获取焦点时选中该元素
- 子元素伪类：:first-child,:last-child, :nth-child(), :nth-last-child(), :only-child
- 其他伪类：:checked,:enabled, :disabled
伪元素选择器
- E::before：在E元素内容区最前面创建一个伪元素
- E::after：在E元素内容区最后面创建一个伪元素
- E::first-letter：将E元素的第一个字母创建成伪元素，设置样式
- E::first-line：将E元素内容的第一行创建为伪元素，设置样式
- E::selection：将E元素内容中选中部分创建为伪元素，设置样式
组合选择器
- 并列选择器：s1, s2, #ID, .class

CSS盒子模型

盒子模型的概念：CSS中抽象出的一个块级元素在页面中占据的空间区域，称为盒子
盒子相关的属性：
- border：查看盒子的边框位置
- width：设置盒子内容区的大小
- background：查看盒子的区域
  - background-color：设置容器的背景色
  - background-image：设置背景图片地址
  - background-repeat：当背景图不能覆盖容器时选择它在容器的填充方式：
    - no-repeat：不重复填充，默认在左上角显示该图片
    - repeat-x ：水平方向铺满
    - repeat-y：垂直方向铺满
  - background-position：当背景图只能部分填充时需要设置它在容器中的位置。该值有两种形式：
    - 固定位置：（X）left/center/right （Y）top/center/bottom
    - 具体像素：设置一个坐标值，它以左上角为原点
  - 缩写形式：背景图相关的几个属性写在一起，背景色在它们的前/后的位置
- padding：盒子的内边距，当设置内边距时盒子会展开，尺寸放大（外扩）
  - padding-top ：
  - padding-right ：
  - padding-bottom ：
  - padding-left ：
  - padding：缩写形式设置四边的填充
    - padding：10px 四个方向都填充10px
    - padding：10px 20px (下左 )上下填充10px 左右填充20px。左边的缺省值用右边的，下面的缺省值用上面的
    - padding ：10px 20px 30px (20px)
- margin：盒子的外边距。它的语法格式和padding是一摸一样

内外边距

行内元素

行内元素设置内边距时，它的上下边距会占据其他行。必须要让它所在的行能够填充边距所占的空间需要调整它的行高。此时的行高 = 上下边距 + 边框 + 文本高度。文本高度约等于它的字体大小：

span {
    border : 1px solid blue;
    padding : 10px 20px;
    font-size : 15px;
    line-height : 37px;/* 1px + 10px + 15px + 10px + 1px*/
}

行内元素不具备垂直方向的外边距，水平方向的外边距是相加的

块级元素

块级元素在内外边距设置时会产生边界坍塌或者边界重叠的现象，具体来说有以下两种情况：

兄弟关系的块级元素：
正常情况下，块级元素在文档流中是垂直分布的。给它们设置外边距时。上面元素的margin-bottom和下面元素的margin-top会塌陷，然后会取上下两者margin里最大值来显示。

<style>
    div {
        width : 100px;
        height : 100px;
    }
    .d1 {
        margin : 100px;
    }
    .d2 {
        margin : 150px;/*上下DIV的实际距离是150px*/
    }
</style>
<div class="d1">
    上面的DIV
</div>
<div class="d2">
    下面的DIV
</div>

父子关系的块级元素：
- 当给父盒子的第一个子元素设置margin。它是以父级的边框、边距来设置的。如果父级没有边框或者边距，那么子元素就会一直向上查找，直到某个父元素拥有边框和边距为止，然后参照它来设置边距。可以给父盒子设置一个透明的边框（不影响本身的显示）或者设定一个边距。
```
<style>
    .container {
        background : #000;
    }
    .container div {
        width : 100px;
        height : 100px;
    }
    .d1 {
        background : pink;
        margin-top : 50px;
    }
    .d2 {
        background : green;
    }
</style>
<div class="container">
    <div class="d1">
        d1
    </div>
    <div class="d2">
        d2
    </div>
</div>
```

浮动属性

浮动是css中实现布局的一个重要工具。基本上在页面排版时都要借助于浮动来完成，一个最基本的需求是实现块级元素和行内元素之间的混排，而浮动就是为了解决这些问题的。

浮动就是让一个元素往左或右边“尽量挤靠”，以使其周边文字（行内元素）可以围绕该浮动元素显示。

其典型的表现就是一张图片向左对齐（align=”left”）的时候，图片标签前后的文字都能够绕着图片展示。

这是“浮动”的原本含义和作用，如下图所示：在介绍浮动之前我们可能已经发现一个问题，块状元素尽管设置了高和宽的属性但是他总是占据一整行，这样的“造型”会产生大量旁白，显然不是我们希望遇见的，浮动的出现就可以改变这种现状。

float属性的几个可选值：

left：元素向左侧浮动
right ：元素向右侧浮动，右浮动时最先在页面中出现的容器在最右边
none：元素不浮动，默认值

<style>
    .container {
        border : 5px solid gray;
    }
    .container div {
        width : 100px;
        height  100px;
        float : right;
    }
    .d1 {background : pink}
    .d2 {background : green}
    .d3 {background : blue}
</style>
<div class="container">
    <div class="d1">
        d1
    </div>
    <div class="d2">
        d2
    </div>
    <div class="d3">
        d3
    </div>
</div>

浮动机制

浮动元素会先于行内元素占据浮动方向的水平空间。浮动元素周围的行框被缩短，从而使得文本围绕浮动元素排版显示。如果浮动旁边是块级元素，则它无法挤占块级元素也就是在其下方显示。

<style>
    .container {
        border: 5px solid gray;
    }
    .container div {
        width: 100px;
        height: 100px;
        background: pink;
        /*行内元素some text的空间被挤占，但块级p标签不会*/
        float: left;
    }
</style>
<div class="container">
    <p>hello world</p>
    <div></div> some text
</div>

浮动元素脱离了原来的文档流（普通文档流），出现在其上方的浮动层当中，原来的位置会被后续元素补充。
浮动的元素也被称之为浮动框，浮动元素会浮动至包含框边缘或浮动层的浮动框之后
- 第一个浮动元素浮动到包含框的边缘，不会超出包含框的范围
- 后面的浮动元素到达浮动层之后会挨着上一个浮动元素排布，当超出时会自动换行

案例演示

<style>
div {
	 border:1px solid white;
	 width:100px;
	 height:100px;
}
.d1 {
	 background:red; 
}
    
.d2 {
	background:green; 
}
.d3 {
	background:blue; 
}
.fl {
    float : left;
}
</style>
previous line
<div class="d1 fl"></div>
<div class="d2 fl"></div>
<div class="d3 fl"></div>
next line

将上例中的d2进行左浮动之后的效果怎样
将上例中的d1、d2同时进行左浮动之后的效果怎样
将上例中的d1、d2、d3全部左浮动之后的效果怎样
给上列中文本分别嵌套p标签，观察效果是否发生变化

浮动特性

浮动之后的元素无论其原先是何种状态，浮动后都会成为行内块状（inline-block）元素。所谓行内块状是指它具有块状元素的高和宽属性但是不占据整行 ，可以在行内显示 img就是一个典型的行内块状元素。

<style>
    span {
        border : 1px solid blue;
        width : 100px;
        height : 100px;
        float : left;	/*设置浮动后 span具有高宽属性*/
    }
</style>
<span>some text</span>hello world

<style>
    div {
        border : 1px solid blue;
        float : left;	/*浮动之后 div不在整行显示*/
	}
</style>
<div>some text</div>hello world

使用display属性可以设置元素的类型，它有以下几种情况：

block：将元素以块状显示
inline：将元素以行内显示
inline-block：将元素显示成行内块级
list-item：元素以列表项来显示，通常需要配置list-type属性设置列表项
none：元素不显示，并且它在页面中的位置会被清除

容器塌陷

元素浮动后脱离了普通文档流，“包含框”的内容（元素）会越来越少，导致包含框在文档流中占据的空间越来越小，尤其当包含框中所有元素都浮动后，整个“框”会出现塌陷。这样从视觉效果来说是很不友好的，同时它会影响后续元素的排版。

清除浮动

若要使得包含框重新包含浮动框，我们可以在包含框中添加一个不浮动的空元素，如DIV，设置它的高度或者上外边距和浮动元素的高度一致，重新“撑起”包含框：

<div class="container">
    <div class="d1">d1</div>
    <div class="d2">d2</div>
    <div class="d3">d3</div>
    <!-- 新建一个空DIV 通过设置高度将容器撑起来 -->
    <div></div>
</div>

通过增加上外边距或高度的办法可以帮助我们解决坍塌，但前提是必须掌握好浮动元素的最大高度。CSS为我们提供了一个解决坍塌的办法，就是清除浮动（clear）。使用属性clear，有常见的3个值：

left：表示不允许该元素左边出现左浮动元素；
right：表示不允许该元素右边出现右浮动元素；
both：表示该元素两边都不要出现浮动元素；——这是最常见的需求（场景）。

所谓清除浮动，其实就是让包含框中的浮动特性终止（结束）而浮动框不受影响。这样包含框就具有了正常的高度，可以正常包住其内部的浮动盒子。可以给包含框内部的末尾添加一个“清除浮动”的空的块盒子来清除浮动。

一个更加灵活的写法是使用伪元素选择器给在父盒子最后位置创建空元素，空元素必须声明为块级类型，然后设置清除浮动。

<style>
    .container::after {
        content : "";
        display : block;
        clear : both;
    }
</style>
<div class="container">
    <div>浮动元素1</div>
    <div>浮动元素2</div>
    <div>浮动元素3</div>
</div>

最后一种解决塌陷的办法是使用overflow 溢出控制，当父元素的高height:auto时（也就是不设置），我们使用overflow：hidden清除浮动（原理是Block Fomatter Context）。当一个盒子里面有浮动元素，则：

如果该盒子不设置高度，就应该清除浮动，overflow：hidden。
如果该盒子设置了高度，此时就应该考虑溢出时的处理效果！

overflow常用值有：

auto：自动，按浏览器的默认设置自动处理，各浏览器可能会有所不同。
scroll：滚动，就是超出范围的时候，盒子出现滚动条（像浏览器的滚动条那样）。
hidden：隐藏，就是将超出部分隐藏起来（视觉上不可见）。
visible：显示，就是虽然超出去了，但仍然显示出来，这是这个属性的默认值，无需设置。

此时，虽然可能超出外层盒子，但不会影响外层盒子后续的位置（布局）。

visibility

visibility属性用来设置元素的可见性。主要有两个值：visible（可见）和hidden（隐藏）

设置visibility为hidden，虽然元素不可见了，但元素原本所占的空间仍然存在（效果是一片空白）

对比：设置display为none，也是隐藏，但此时该元素不但不可见，而且不占版面空间。

表格属性

样式	可选值	含义
border-collapse	collapse（合并）、separate（分离）	合并边框
border-spacing（限边框分离模式）	Xpx/ Xpx Ypx	水平和垂直间距为X px
text-align	left、center、right	单元格水平对齐方式
vertical-align（限单元格）	top、center、middle	单元格垂直对齐方式

列表属性

给UL和li添加边框，查看其作用效果，我们能得出以下结论
ul列表作为块状元素整行显示，并且默认头尾产生空白行，可以视作上下的外边距（margin)
ul列表默认具有左内边距，该内边距中包含了项目符号
列表项的项目符号处于ul的padding之中，在列表项的外面
项目符号设置单一

样式	值	含义
list-style-type	none、square、disc、circle	设置项目符号
list-style-position	inside、outside	项目符号位置
list-style-image	url(‘图片位置‘)	将图片设置为项目符号
list-style	list-style: list-style-type list-style-pisition list-style-image	综合设置（有顺序之分）

原文：https://www.cnblogs.com/xiaoyixiang/p/14902190.html