CSS 选择器总结

来源：互联网发布：数据分析挖掘主观题编辑：程序博客网时间：2024/05/22 10:45

Css 使用在什么地方？怎么使用
1.内嵌式直接在标签中写style 然后写样式
2. 嵌入式，将css 写在head 中使用 <style type="text/css">通过选择器然后进行css样式的设计</style>
3. 外部式：就是将css 设计的代码单独放置在一个.css 文件中然后在 head 中进行引入<link href="xx.css" rel="stylesheet" type="text/css"/>

注意：他们的优先级为就近原则

CSS选择器：

css 通过选择器进行对需要样式的标签进行识别然后进行赋予样式
1.标签选择器其实就是html 代码中的标签，
2.类选择器：语法: .类选择器名称{css代码} 如上面的：
.clazz{
font-size: 80px;
color: blueviolet;
}
使用的时候：在标签中使用class 标示<p class="clazz">类选择器</p>

3.id 选择器和类选择器相相似语法：#id选择器的名称{css代码} 使用的时候标签中使用id 属性

注意：id和类选择器的区别就是在于，id选择器定以后只能使用一次，使用两次错误，但是类可以多次使用
所以建议使用类选择器

4. 子选择器，配合类选择器使用。语法：.类选择器的名称 > 指定要作用的标签
作用：就是让子选择器中的css 样式，作用于指定标签的子代元素，但是其孙子代的就不会起作用。

5. 后代选择器,配合类选择器使用语法：.类选择器标签{css} 即加入空格，用于选择指定元素下的所有的后辈元素

6. 最牛逼的选择器：通用选择器 *{css} 为html中的所有标签的元素进行样式设置

7. 开挂的选择器：伪类选择器，它允许给html不存在的标签（标签的某种状态进行设置）
最常用的：:hover{css}
比如 :a:hover{color:red;} 这样当鼠标移到链接的时候就会触发，然后链接的内容就会变成红色

8. 分组选择符：同时为两个及两个以上的标签同时进行css样式设置例如：
h1,span{
color:red;
}

<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>css 测试</title><style type="text/css">p{font-size: 20px; /*设置p 标签中的字体的大小*/color: aquamarine;/*设置p标签中的字体的颜色*/font-weight: bolder;/*设置 p标签中的字体的宽度：bold 加粗*/}span{font-size: 50px;color: bisque;}.clazz{font-size: 80px;color: blueviolet;}#love{font-size: 60px;color: #000000;max-zoom: initial;background-color: antiquewhite;}.test li{/*后代（包含）选择器*/border: 1px solid #7FFFD4; /*为li 添加边框样式（粗细为 1px 颜色为）*/}a:hover{color: red;}</style></head><body><p>222222222222222<span>使用内嵌式 进行写样式的设计</span>111111111</p><!--        作者：offline        时间：2017-07-29        描述：        Css 使用在什么地方？怎么使用        1.内嵌式 直接在标签中写style 然后写样式        2. 嵌入式，将css 写在head 中使用 <style type="text/css">通过选择器然后进行css样式的设计</style>        3. 外部式：就是将css 设计的代码单独放置在一个.css 文件中 然后在 head 中进行引入<link href="xx.css" rel="stylesheet" type="text/css"/>                注意：他们的优先级为就近原则        --><p style="color: aquamarine; font-size: 40px;">内嵌式使用css样式</p><!--        作者：offline        时间：2017-07-29        描述：        css 通过选择器 进行对需要样式的标签进行识别然后进行赋予样式        1.标签选择器 其实就是html 代码中的标签，        2.类选择器： 语法: .类选择器名称{css代码} 如上面的：        .clazz{font-size: 80px;color: blueviolet;}使用的时候：在标签中使用class 标示<p class="clazz">类选择器</p>3.id 选择器 和类选择器相相似 语法：#id选择器的名称{css代码} 使用的时候 标签中使用id 属性                注意：id和类选择器的区别就是在于，id选择器定以后只能使用一次，使用两次错误，但是类可以多次使用        所以建议使用类选择器                4. 子选择器 ，配合类选择器使用。 语法：.类选择器的名称 > 指定要作用的标签        作用：就是让 子选择器中的css 样式，作用于指定标签的子代元素，但是其孙子代的就不会起作用。                        5. 后代选择器,配合类选择器使用  语法：.类选择器 标签{css} 即 加入空格，用于选择指定元素下的所有的后辈元素                6. 最牛逼的选择器：通用选择器 *{css} 为html中的所有标签的元素进行样式设置                7. 开挂的选择器： 伪类选择器 ，它允许给html不存在的标签（标签的某种状态进行设置）        最常用的：:hover{css}         比如 :a:hover{color:red;} 这样当鼠标移到链接的时候就会触发，然后链接的内容就会变成红色              8. 分组选择符：同时为两个及两个以上的标签同时进行css样式设置例如：       h1,span{       color:red;       }        --><p class="clazz">类选择器</p><span id="love">id选择器</span><ul class="test"><li>水果<ul><li>1111</li><li>2222</li><li>3333</li></ul></li><li>蔬菜=<ul><li>44444</li><li>55555</li></ul></li></ul><a href="http://www.baidu.com">伪类选择器：鼠标移到这时会变颜色</a></body></html>

阅读全文

0 0