大型网站建设兴田德润实惠,网站建设div ass,个人网站制作基本步骤,编程培训班学费一般多少钱一、基本选择器
1. 通配选择器
作用#xff1a;可以选中所有的 HTML 元素。 语法#xff1a;
* {
属性名: 属性值;
}举例#xff1a;
/* 选中所有元素 */
* {
color: orange;
font-size: 40px;
}主要用于#xff1a;清除样式。
2. 元素选择器
作用#xff1a;为页面…一、基本选择器
1. 通配选择器
作用可以选中所有的 HTML 元素。 语法
* {
属性名: 属性值;
}举例
/* 选中所有元素 */
* {
color: orange;
font-size: 40px;
}主要用于清除样式。
2. 元素选择器
作用为页面中 某种元素 统一设置样式。 语法
标签名 {
属性名: 属性值;
}举例
/* 选中所有h1元素 */
h1 {
color: orange;
font-size: 40px;
}
/* 选中所有p元素 */
p {
color: blue;
font-size: 60px;
}注意 元素选择器无法实现差异化设置例如上面的代码中所有的 p 元素效果都一样。
3. 类选择器
作用根据元素的 class 值来选中某些元素。 语法
.类名 {
属性名: 属性值;
}举例
/* 选中所有class值为speak的元素 */
.speak {
color: red;
}
/* 选中所有class值为answer的元素 */
.answer {
color: blue;
}注意点 元素的 class 属性值不带 . 但 CSS 的类选择器要带 . 。 class 值是我们自定义的按照标准不要使用纯数字、不要使用中文、尽量使用 英文与数字的组合若由多个单词组成使用 - 做连接例如 left-menu 且命名 要有意义做到 “见名知意”。 一个元素的 class 属性能写多个值要用空格隔开例如 !-- 该写法正确class属性能写多个值 --
h1 classspeak big你好啊/h14. id 选择器
作用根据元素的 id 属性值来精准的选中某个元素。 语法
#id值 {
属性名: 属性值;
}举例
/* 选中id值为earthy的那个元素 */
#earthy {
color: red;
font-size: 60px;
}注意
id 属性值尽量由字母、数字、下划线( _ )、短杠( - )组成最好以字母开头、不要包含空 格、区分大小写。一个元素只能拥有一个 id 属性多个元素的 id 属性值不能相同。一个元素可以同时拥有 id 和 class 属性。
5. 基本选择器总结 二、复合选择器
1. 交集选择器
作用选中同时符合多个条件的元素。 语法
选择器1选择器2选择器3...选择器n {}举例
/* 选中类名为beauty的p元素为此种写法用的非常多 */
p.beauty {
color: blue;
}
/* 选中类名包含rich和beauty的元素 */
.rich.beauty {
color: green;
}注意
有标签名标签名必须写在前面。id 选择器、通配选择器理论上可以作为交集的条件但实际应用中几乎不用 —— 因为没 有意义。交集选择器中不可能出现两个元素选择器因为一个元素不可能即是 p 元素又是 span 元 素。用的最多的交集选择器是元素选择器配合类名选择器例如 p.beauty 。
2. 并集选择器
作用选中多个选择器对应的元素又称分组选择器。 语法
选择器1, 选择器2, 选择器3, ... 选择器n {}多个选择器通过 , 连接此处的含义就是或。
举例
/* 选中id为peiqi或类名为rich或类名为beauty的元素 */
#peiqi,
.rich,
.beauty {font-size: 40px;background-color: skyblue;width: 200px;
}注意
并集选择器我们一般竖着写。任何形式的选择器都可以作为并集选择器的一部分 。并集选择器通常用于集体声明可以缩小样式表体积。
3. HTML元素间的关系
分为①父元素、②子元素、③祖先元素、④后代元素、⑤兄弟元素。
父元素直接包裹某个元素的元素就是该元素的父元素。子元素被父元素直接包含的元素简记儿子元素。祖先元素父亲的父亲…一直往外找都是祖先。后代元素儿子的儿子…一直往里找都是后代。兄弟元素具有相同父元素的元素互为兄弟元素。
4. 后代选择器
作用选中指定元素中符合要求的后代元素。 语法
选择器1选择器2 选择器3......选择器n{
}先写祖先再写后代 选择器之间用空格隔开空格可以理解为 “xxx中的”其实就是后代的意思。 举例
/*选中ul中的所有li*/
ulli{color:red;
}
/*选中ul中所有li中的a*/
ullia{color:orange;
}
/*选中类名为subject元素中的所有li*/
.subjectli{
color:blue;
}
/*选中类名为subject元素中的所有类名为front-end的li*/
.subjectli.front-end{color:blue;}注意
后代选择器最终选择的是后代不选中祖先。儿子、孙子、重孙子都算是后代。
5. 子元素选择器
作用 选中指定元素中符合要求的子元素儿子元素。先写父再写子 子代选择器又称子元素选择器、子选择器。 语法
选择器1选择器2选择器3......选择器n{
}举例
/* div中的子代a元素 */
diva {
color: red;
}
/* 类名为persons的元素中的子代a元素 */
.personsa{
color: red;
}
注意
子代选择器最终选择的是子代不是父级。子、孙子、重孙子、重重孙子 … 统称后代子就是指儿子。注意二者的区别。
6. 兄弟选择器
6.1 相邻兄弟选择器
作用选中指定元素后符合条件的相邻兄弟元素。所谓相邻就是紧挨着他的下一个。 语法
选择器1选择器2 {
} 示例
/* 选中div后相邻的兄弟p元素 */
divp {color:red;
}6.2 通用兄弟选择器
作用选中指定元素后符合条件的所有兄弟元素。 语法
选择器1~选择器2 {
} 实例
/* 选中div后的所有的兄弟p元素 */
div~p {
color:red;
}注意两种兄弟选择器选择的是下面的兄弟。
7. 属性选择器
作用选中属性值符合一定要求的元素。 语法
1. [属性名] 选中具有某个属性的元素。
2. [属性名值] 选中包含某个属性且属性值等于指定值的元素。
3. [属性名^值] 选中包含某个属性且属性值以指定的值开头的元素。
4. [属性名$值] 选中包含某个属性且属性值以指定的值结尾的元素。
5. [属性名*“值”] 选择包含某个属性属性值包含指定值的元素。举例
/* 选中具有title属性的元素 */
div[title]{color:red;}
/* 选中title属性值为atguigu的元素 */
div[titleatguigu]{color:red;}
/* 选中title属性值以a开头的元素 */
div[title^a]{color:red;}
/* 选中title属性值以u结尾的元素 */
div[title$u]{color:red;}
/* 选中title属性值包含g的元素 */
div[title*g]{color:red;}
8. 伪类选择器
作用选中特殊状态的元素。 如何理解“伪” ? — 虚假的不是真的。 如何理解“伪类” — 像类( class )但不是类是元素的一种特殊状态。 常用的伪类选择器
8.1 动态伪类 :link 超链接未被访问的状态。 :visited 超链接访问过的状态。 :hover 鼠标悬停在元素上的状态。 :active 元素激活的状态。 什么是激活—— 按下鼠标不松开。 注意点遵循 LVHA 的顺序即 link 、 visited 、 hover 、 active。 :focus 获取焦点的元素。 表单类元素才能使用 :focus 伪类。 当用户点击元素、触摸元素、或通过键盘的 “ tab ” 键等方式选择元素时就是获 得焦点。
8.2 结构伪类
常用的
:first-child 所有兄弟元素中的第一个。:last-child 所有兄弟元素中的最后一个。:nth-child(n) 所有兄弟元素中的第 n 个。:first-of-type 所有同类型兄弟元素中的第一个。:last-of-type 所有同类型兄弟元素中的最后一个。:nth-of-type(n) 所有同类型兄弟元素中的第n个 。
关于 n 的值
0 或 不写 什么都选不中 —— 几乎不用。n 选中所有子元素 —— 几乎不用。1~正无穷的整数 选中对应序号的子元素。2n 或 even 选中序号为偶数的子元素。2n1 或 odd 选中序号为奇数的子元素。-n3 选中的是前 3 个。
9. 伪元素选择器
作用选中元素中的一些特殊位置。 常用伪元素 ::first-letter 选中元素中的第一个文字。 ::first-line 选中元素中的第一行文字。 ::selection 选中被鼠标选中的内容。 ::placeholder 选中输入框的提示文字。 ::before 在元素最开始的位置创建一个子元素必须用 content 属性指定内容。 ::after 在元素最后的位置创建一个子元素必须用 content 属性指定内容。
三、选择器的优先级权重
通过不同的选择器选中相同的元素 并且为相同的样式名设置不同的值时就发生了样式的冲突。到底应用哪个样式此时就需要看优先级了。 优先级如下
行内样式 ID选择器 类选择器 元素选择器 通配选择器。计算方式每个选择器都可计算出一组权重格式为 (a,b,c) a : ID 选择器的个数。 b : 类、伪类、属性 选择器的个数。 c : 元素、伪元素 选择器的个数。 例如 比较规则 按照从左到右的顺序依次比较大小当前位胜出后后面的不再对比例如
(1,0,0) (0,2,2)
(1,1,0) (1,0,3)
(1,1,3) (1,1,2)特殊规则 行内样式权重大于所有选择器。!important 的权重大于行内样式大于所有选择器权重最高
