一、CSS的复合选择器
- 更高效的选择目标元素。
- 后代选择器、子选择器、并集选择器、伪类选择器等。
1.后代选择器
- 可以选择父元素里的子元素。
- 又称包含选择器。
- 必须是空格,必须是后代,ul li {color: red;}。
- 儿子、孙子都可以,只要是后代就行。ol li a {color: red;}。
- 可以是任意基础选择器。
2.子元素选择器
- 选择亲儿子元素。
- >分隔div>p {color: red;}。
3.并集选择器
- 可以选择多组标签,同时为他们定义相同的样式。
- .隔开。
- 任何选择器都可以作为并集选择器的一部分。
- 喜欢竖着写。
4.伪类选择器
- 用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或者选择第1个,第n个元素。
- 用冒号表示,如:hover。
- 有链接伪类、结构伪类等。
- 链接伪类选择器:
-
a:link /*选择所有未被访问的链接*/ a:visited /*选择所有已被访问的链接*/ a:hover /*选择鼠标指针位于其上的链接*/ a:active /*选择活动链接(鼠标按下未弹起的链接)*/
- 注意事项:必须按顺序LVHA;必须给链接单独指定样式。
/* 一般开发中的写法 */
a { color: gray; } a:hover { color: red; }
5.:focus伪类选择器
- 用于获得焦点得表单元素。
二、CSS的元素显示模式
- 了解不同类型的标签更好地布局网页。
- 就是以什么方式进行显示。
- 分为块元素和行内元素。
1.块元素
- 常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中div是最典型的块元素。
- 自己独占一行。
- 可设置宽高,默认宽为父级的。
- 里面可以方行内或者块级元素(文字类的元素内不能放块级元素)。
2.行内元素
- 常见的<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,典型的是span。
- 一行可以多个。
- 高宽设置无效。
- 只能容纳文本或其他行内元素。
- 链接里面不能再放链接。
- 特殊情况链接<a>里面可以放块级元素,但是给<a>转换一下块级模式最安全。
3.行内块元素
- 特殊的标签<img>、<input>、<td>,它们同时具有块元素和行元素的特点。有些资料称它们未行内块元素。
- 一行可以有多个,中间有空白缝隙。(行内元素特点)
- 本身的宽度是内容的宽度。(行内元素特点)
- 可以设置宽度高度。(块级元素特点)
4.元素显示模式转换
- 简单理解:一个模式的元素需要另一种模式的特性。
- 比如想要增加链接<a>的出发范围。
- 转换为块元素:display:block;。
- 转换为行内元素:display: inline;。
- 转换为行内块元素:display: inline-block;。
5.小工具 snipaste
- 截图工具,可以贴到屏幕上。
三、CSS的背景
- 给页面元素添加背景样式。
- 背景颜色:teansparent/color。
- 背景图片:非常便于控制位置,background-image: none/url。
- 背景平铺:background-repeat:repeat/no-repeat/repear-x/repeat-y。
- 背景图片位置:background-position: x y;可以使用方位名词或精准单位。(1)都是方位名词。(2)只写一个另一个默认居中。(3)参数值是精确坐标,则必定先x后y。如果只指定一个数值,那该数值一定是x坐标,另一个默认居中对齐。(4)混合使用时,第一个必是x第二个必是y。
- 背景图像固定:background-attachment: scroll/fixed。
- 背景复合写法:将这些属性简写再同一个属性bacjground中,没有特定的顺序。background:背景颜色 背景图片 背景平铺 背景图像滚动 背景图像位置。
- 背景色半透明:background: rgba(0,0,0,0.3);alpha取值0~1。(可以写成.3)
-
参数值 说明 length 百分数、由浮点数字和单位标识符组成的长度值 position top|center|bottom|left|center|right 方位名词
四、CSS三大特性
- 层叠行、继承性、优先级。
1.层叠性
- 一个样式会覆盖另一个冲突的样式。
- 冲突时,就近原则,哪个离结构近就执行哪个样式。
2.继承性
- 子标签继承父标签的某些样式。
- 行高的继承性:font: 12px/1.5 "Microsoft YaHei";(1.5表示行高为当前元素大小的1.5倍)。优势是里面的元素可以根据自己文字大小自动调整行高。
3.优先级
- 选择器相同,则执行层叠性。
- 选择器不同,则根据选择器权重执行。
-
选择器 选择器权重 继承或者* 0,0,0,0 元素选择器 0,0,0,1 类选择器,伪类选择器 0,0,1,0 ID选择器 0,1,0,0 行内样式style="" 1,0,0,0 !important 重要的 ∞无穷大
标签:行内,伪类,19,元素,链接,学习,background,选择器,CSS From: https://www.cnblogs.com/SHUOSHIBUDEERYI/p/16993464.html