6.3复合选择器
6.3.1交集选择器:既是什么又是什么
格式:选择器选择器 {属性:属性值;}
注:选择器之间没有任何的连接符号。选择器可以是class,也可以是id,还可以是标签,但标签要放在前面。 比如: p.one 表示选择类名既是.one 且是段落标签。
<style type="text/css">
/* 既是p标签选择器又是类名为red的类选择器 */
p.red {
color: red;
}
/* 既是p标签选择器又是id名为pink的类选择器 */
p#pink {
color: pink;
}
/* 既是类名为red的类选择器又是id名为pink的类选择器 */
.red#pink {
color: blue;
}
</style>
</head>
<body>
<p class="red">段落1</p>
<p id="pink">段落2</p>
<p class="red" id="pink">段落3</p>
</body>
6.3.2并集选择器:什么和什么
格式:选择器,选择器 {属性:属性值;}
注:并集选择器表示 和 的意思,只要使用逗号分隔,所有选择器都会执行后面的样式。
<style type="text/css">
.red,#pink,.red{
color: red;
}
</style>
</head>
<body>
<p class="red">段落1</p>
<p id="pink">段落2</p>
<p class="red" id="pink">段落3</p>
</body>
6.3.3 兄弟选择器:兄弟选择器是CSS3.0新增的一个选择器。A~B 或者 A+B
语法格式: 选择器+选择器 {属性:属性值;}
选择器+选择器 {属性:属性值;}
‘+’选择器则表示某元素后相邻的兄弟元素,也就是紧挨着的,是单个的。
‘~’选择器则表示某元素后所有同级的指定元素,强调所有的。
<style type="text/css">
/* 类名为red的类选择器相邻的兄弟p标签为粉色 */
.red+p {color: pink;}
/* 类名为red的类选择器后面的所有兄弟div标签为红色*/
.red~div{color: red;}
</style>
</head>
<body>
<p class="red">段落1</p>
<p id="pink">段落2</p>
<p class="red" id="pink">段落3</p>
<div>盒子</div>
<div>盒子2</div>
</body>
6.3.4后代选择器:又称为包含选择器,用来选择元素或元素组的后代
语法格式:选择器 空格 选择器 {属性:属性值;}
<style>
/* 类名为one的选择器所有p标签被选中 */
.one p{
color: antiquewhite;
}
</style>
</head>
<body>
<div class="one">
<p>111</p>
<p>222</p>
<p>333</p>
</div>
</body>
6.3.5子元素选择器:子元素选择器只能选择作为其元素子元素的元素。其写法就是父亲标签写在前面,子级标签写在后面,中间跟一个“>”进行连接。
语法格式:父元素>子元素{属性:属性值;}
注:这里的子元素表示亲儿子,不包含孙子、重孙子之类
/* 类名为one的选择器第一个p标签被选中 */
.one>p{
color: antiquewhite;
}
</style>
</head>
<body>
<div class="one">
<p>111</p>
<span>222<p>333</p></span>
</div>
</body>
6.3.6属性选择器:表示选取标签带有某些特殊属性的选择器
选择器 | 含义 |
---|---|
[attr] | 存在attr属性即可 |
[attr=val] | 属性值完全等于val |
[attr*=val] | 属性值里包含val字符并且在“任意”位置 |
[attr^=val] | 属性值里包含val字符并且在“开始”位置 |
[attr$=val] | 属性值里包含val字符并且在“结束”位置 |
<style>
div[class^="font"] {
color: red;
}
/*表示class属性的值以font开头的标签才能使用该样式*/
</style>
</head>
<body>
<div class="font14">这是一个div</div>
<div class="font24">这是一个div</div>
<div class="textfont">这是一个div</div>
</body>
6.3.7伪类元素选择器
E::first-letter 块级文本的第一个单词或字
E::first-line 块级文本的第一行
E::selection 可改变选中文本的样式
E::before和E::after 在E元素内部的开始位置和结束位置创建一个元素,该元素为行内元素,且必须结合content属性使用。
::-webkit-input-placeholder表示选择到input中的placeholder,为其设置样式
注意:“.”一个点是类选择器, “:”一个冒号是伪类选择器, “::”两个冒号是伪元素选择器。
before与after表示在盒子内部的前端和后端插入内容。
7.css的三大特性
7.1优先级:优先级表示当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定
7.1.1优先级判断
如果使用的是同类型的选择器,那么谁写在后面就听谁的。就近原则
如果使用的是不同类型的选择器,那么会按照选择器的优先级来层叠。
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
7.1.2优先级之!important:用于提升选择器中某个属性的优先级, 可以将被指定属性的优先级提升为最高 。
!important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升 。
!important必须写在属性值得分号前面,与属性值之间加上一个空格 。
!important前面的感叹号不能省略 。
7.1.3优先级权重:当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高 。
权重计算规则
(1)内联样式,如: style=””,权值为1,0,0,0。
(2)ID选择器,如:#content,权值为0,1,0,0。
(3)类,伪类和属性选择器,如.content E:link E[attr],权值为0,0,1,0。
(4)元素选择器和伪元素选择器,如div p ::before,权值为0,0,0,1。
(5)通配符、子选择器、兄弟选择器等的。如*、>、+,权值为0,0,0,0。
(6)继承的样式没有权值。!important的权重最高
1,0,0,0 > 0,99,99,99 也就是说从左往右逐个等级比较,前一等级相等才往后比
复合选择器权重的计算 就是一个简单的加法计算
注意:0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0, 所以不会存在10个div能赶上一个类选择器的情况。
7.2继承性
作用:子元素可以继承父元素的样式。
特殊性:
并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承。
在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承 。
a标签的颜色和下划线的设置不能继承,必须对a标签本身进行设置。
h标签的字体大小不能修改,必须对h标签本身进行修改。
7.3层叠性:是浏览器处理冲突的一个能力。如果一个css属性通过两个选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉
8.标签显示模式:
8.1块级元素(block-level):每个块元素通常都会独自占据一整行或多整行,可以对其设置高度、宽度、对齐等属性,常用于网页布局和网页结构的搭建。
8.1.1常见块元素有:<h1>~<h6>、<p>、<div>、<ul>、<ol>、<form <li>等,其中<div>标签是最典型的块元素。div非常符合布局,所以通常叫CSS+div布局
8.1.2块级元素的特点:
总是从新行开始 --- 换行
宽度、高度、外边距以及内边距都可以控制
宽度默认是容器的100%
可以容纳---嵌套 内联元素和其他块元素
8.2行内元素(inline-level):行内元素(内联元素)不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本的样式。
8.2.1常见的行内元素有:<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中<span>标签是最典型的行内元素。
8.2.2行内元素的特点:
和相邻行内元素在一行上。
宽、高无效,但水平方向的padding和margin可以设置 ,垂直方向padding有效 但是margin不可以。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素(a特殊)。
注意:只有文字才能组成段落,因此p标签中不能放块级元素,示例:p标签中放div,查看源代码(有bug)。链接里面不能在放链接。
8.3行内块元素(inline-block):在行内元素中有几个特殊的标签——<img />、<input />,可以对它们设置宽高和对齐属性,有些资料可能会把它们称为行内块元素。
8.3.1行内块元素的特点:
和相邻行内元素(行内块)在一行上,但是之间会有空白间隙。
默认宽度就是它本身内容的宽度。
宽高、内外边距都可以控制,但在上下边距的问题上仍然遵循行内元素的原则。
8.4块级元素和行内元素区别
8.4.1块级元素的特点:
总是从新行开始
宽高、内外边距都可以控制
宽度默认为容器的100%
可以容纳内联元素和其他块元素 文字类的块级标签(p,h1~h6,dt)内部不能嵌套块级标签
8.4.2行内元素的特点:
和相邻行内元素在一行上
宽高无效,可以设置水平方向的内外边距,垂直方向不可设置。
默认宽度就是它本身内容的宽度
行内元素只能容纳文本和其他行内元素
8.5标签显示模式转换 display
8.5.1块转行内:display:inline;
8.5.2行内转块:display:block;
8.5.3块、行内元素转换为行内块:display:inline-block;