您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
一、CSS选择器之标签选择器(元素选择器)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择器</title> <style type="text/css"> /** * 标签选择器 * 作用:通过元素选择器可以选择页面中的所有指定元素 * 语法:标签名{} */ p{ background-color: yellow; } </style> </head> <body> <h2>静夜思</h2> <p>床前明月光,</p> <p>疑是地上霜。</p> <p>举头望明月,</p> <p>低头思故乡。</p> </body> </html>
二、CSS选择器之id选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择器</title> <style type="text/css"> /** * 标签选择器 * 作用:通过元素选择器可以选择页面中的所有指定元素 * 语法:标签名{} */ p{ background-color: yellow; } /** * id选择器 * 作用:通过元素的id属性值来选择唯一的元素 * 语法:#id属性值{} */ #four{ background-color: aqua; } </style> </head> <body> <h2>静夜思</h2> <p>床前明月光,</p> <p>疑是地上霜。</p> <p>举头望明月,</p> <p id="four">低头思故乡。</p> </body> </html>
三、CSS选择器之类选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择器</title> <style type="text/css"> /** * 标签选择器 * 作用:通过元素选择器可以选择页面中的所有指定元素 * 语法:标签名{} */ p{ background-color: yellow; } /** * id选择器 * 作用:通过元素的id属性值来选择唯一的元素 * 语法:#id属性值{} */ #four{ background-color: aqua; } /** * 类选择器i * 作用:通过元素的class属性值选中一组元素 * 语法:.class属性值{} */ .multi{ background-color: antiquewhite; } </style> </head> <body> <h2>静夜思</h2> <p class="multi">床前明月光,</p> <p class="multi">疑是地上霜。</p> <p class="multi">举头望明月,</p> <p id="four">低头思故乡。</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择器</title> <style type="text/css"> /** * 标签选择器 * 作用:通过元素选择器可以选择页面中的所有指定元素 * 语法:标签名{} */ p{ background-color: yellow; } /** * id选择器 * 作用:通过元素的id属性值来选择唯一的元素 * 语法:#id属性值{} */ #four{ background-color: aqua; } /** * 类选择器 * 作用:通过元素的class属性值选中一组元素 * 语法:.class属性值{} */ .multi{ background-color: antiquewhite; } .hello{ font-weight: bold; } </style> </head> <body> <h2>静夜思</h2> <!-- 时间:2016-12-04 描述:可以有多个选择器作用于同一个元素 --> <p class="multi hello">床前明月光,</p> <p class="multi">疑是地上霜。</p> <p class="multi">举头望明月,</p> <p id="four">低头思故乡。</p> </body> </html>
四、CSS选择器之分组选择器(并集选择器)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择器</title> <style type="text/css"> /** * 分组选择器(并集选择器) * 作用:通过选择器分组可以同时选中多个选择器对应的元素 * 语法:选择器1,选择器2,选择器3{} */ p,#four,.three{ background-color: aquamarine; } </style> </head> <body> <h2>静夜思</h2> <!-- 时间:2016-12-04 描述:可以有多个选择器作用于同一个元素 --> <p class="multi hello">床前明月光,</p> <p class="multi">疑是地上霜。</p> <p class="three">举头望明月,</p> <p id="four">低头思故乡。</p> </body> </html>
五、CSS选择器之通配选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择器</title> <style type="text/css"> /** * 通配选择器 * 选中页面中的所有元素 * 语法:*{} */ *{ background-color: red; } </style> </head> <body> <h2>静夜思</h2> <!-- 时间:2016-12-04 描述:可以有多个选择器作用于同一个元素 --> <p class="multi hello">床前明月光,</p> <p class="multi">疑是地上霜。</p> <p class="three">举头望明月,</p> <p id="four">低头思故乡。</p> </body> </html>
六、CSS选择器之复合选择器(交集选择器)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择器</title> <style type="text/css"> /** * 复合选择器(交集选择器) * 作用:可以选中同时满足多个选择器的元素 * 语法:选择器1选择器2选择器3{} */ p.three{ background: yellow; } </style> </head> <body> <h2>静夜思</h2> <p class="multi hello">床前明月光,</p> <p class="multi">疑是地上霜。</p> <p class="three">举头望明月,</p> <p id="four">低头思故乡。</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择器</title> <style type="text/css"> /** * 标签选择器 * 作用:通过元素选择器可以选择页面中的所有指定元素 * 语法:标签名{} */ p{ background-color: yellow; } /** * id选择器 * 作用:通过元素的id属性值来选择唯一的元素 * 语法:#id属性值{} */ #four{ background-color: aqua; } /** * 类选择器 * 作用:通过元素的class属性值选中一组元素 * 语法:.class属性值{} */ .multi{ background-color: antiquewhite; } .hello{ font-weight: bold; } .three{ font-family: "楷体"; } /** * 分组选择器(并集选择器) * 作用:通过选择器分组可以同时选中多个选择器对应的元素 * 语法:选择器1,选择器2,选择器3{} */ p,#four,.three{ background-color: aquamarine; } /** * 通配选择器 * 选中页面中的所有元素 * 语法:*{} */ *{ background-color: red; } /** * 复合选择器(交集选择器) * 作用:可以选中同时满足多个选择器的元素 * 语法:选择器1选择器2选择器3{} */ p.three{ background: yellow; } </style> </head> <body> <h2>静夜思</h2> <p class="multi hello">床前明月光,</p> <p class="multi">疑是地上霜。</p> <p class="three">举头望明月,</p> <p id="four">低头思故乡。</p> </body> </html>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。