CSS|02 基本选择器

选择器

什么是选择器

选择器是指通过一定的语法规则选取到对应的HTML标记,然后给这个对应的HTML标记设置样式。
选择器分为四大类:基本选择器、复合选择器、 伪类选择器、属性选择器

    基本选择器
        通用选择器:将匹配HTML所有标签。不建议使用。
            比如:*{margin:0px}
        标签选择器:匹配对应的HTML标签。
            比如:p{font-size:14px}
        类选择器:给定指定的CLASS属性值的元素设置样式。
            比如:.box{width:800px;}
        id选择器:可以为标有特殊id的HTML元素指定特定的样式,只能使用一次。id选择器以"#"来定义。
            比如:#title{font-size:14px;}

    复合选择器
        选择器1,选择器2{属性:值;} 
            多元素选择器,同时匹配选择器1和选择器2,多个选择器之间用逗号分隔
            举例: p,h1,h2{margin:0px;}
        E F{属性:值;}  
            后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔
            举例: #slidebar p {font-color: #990000;}
        E > F{属性:值;}
            子元素选择器,匹配所有E元素的子元素F
            举例: div > p{color:#990000;}
        E + F{属性:值;}
            相邻元素选择器,匹配所有紧随E元素之后的同级元素F
            举例: div + div{color:#990000;}

    伪类选择器
        伪类选择器是用来给超级链接的不同状态来设置样式。

        :link 向未被访问的链接添加样式 
        :visitied 向已被访问的链接添加样式
        :hover 当鼠标悬浮在元素上方时,向元素添加样式
        :active 鼠标放在元素上面时,点击的一瞬间

        注意:超级链接的不同状态它其实是有顺序。也就是说伪类选择器设置其实是有顺序。
             如果不按照伪类选择器的顺序,那么样式就会失效。
        顺序:要遵守"爱恨准则"要先有爱,才有恨。"Love Hate" LVHA

    属性选择器
        什么是属性选择器?
            属性选择器它是与标签的属性名和属性值有关。
            属性选择器是通过标签的属性名和属性值来匹配元素。

        选择器            含义                           举例
        [attr]           匹配指定的属性名的所有元素         h1[align]{}
        [attr="val"]     匹配属性等于指定值的所有元素       h1[align="center"]{}
        [attr*="val"]    匹配属性中包含指定值的所有元素      Font[color*="00"]
        [attr$="val"]    匹配属性的值以指定值结束的所有元素   Font[color$="00"]
        [attr^="val"]    匹配属性以指定值开头的所有元素      Font[color^="00"]

基本选择器

通用选择器

通用选择器_行内式:

对于body中所有 的元素设置属性color="#f00",通用选择器,通用,就是对所有的。
*{}在中括号中写样式代码,*星号来匹配所有的。

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <font color="#f00">
    <h2>请回答出中国的四大名著</h2>
    <ul>
        <li>西游记</li>
        <li>红楼梦</li>
        <li>水浒传</li>
        <li>三国演义</li>
    </ul>
    <p>《红楼梦》,中国古代章回体长篇小说,中国古典四大名著之首。其通行本共120回,一般认为前80回是清代作家曹雪芹所著,后40回作者为无名氏,由高鹗、程伟元整理。小说以贾、史、王、薛四大家族的兴衰为背景,以大荒山青埂峰下顽石幻化的通灵宝玉为视角,以贾宝玉与林黛玉、薛宝钗的爱情婚姻悲剧为主线,描绘了一些闺阁佳人的人生百态,展现了真正的人性美和悲剧美,是一部从各个角度展现中国清代社会百态的史诗性著作。</p>
    </font>
</body>
</html>

通用选择器_嵌入式:

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        /*使用嵌入式*/
        /*使用通用选择器来设置样式*/
        /*给HTML中的所有的标签设置样式*/
        *{
            color: #00f; /* 蓝色 */
        }
    </style>
</head>
<body>
    <h2>请回答出中国的四大名著</h2>
    <ul>
        <li>西游记</li>
        <li>红楼梦</li>
        <li>水浒传</li>
        <li>三国演义</li>
    </ul>
    <h4>看我是否能变蓝色</h4>
    <p>《红楼梦》,中国古代章回体长篇小说,中国古典四大名著之首。其通行本共120回,一般认为前80回是清代作家曹雪芹所著,后40回作者为无名氏,由高鹗、程伟元整理。小说以贾、史、王、薛四大家族的兴衰为背景,以大荒山青埂峰下顽石幻化的通灵宝玉为视角,以贾宝玉与林黛玉、薛宝钗的爱情婚姻悲剧为主线,描绘了一些闺阁佳人的人生百态,展现了真正的人性美和悲剧美,是一部从各个角度展现中国清代社会百态的史诗性著作。</p>
</body>
</html>

标签选择器

就是根据不同的标签设置不同的样式。

这里的标签就是HTML中元素的标签,比如要给p标签设置样式,可以写p{},中括号中写样式代码。这样就能匹配HTML中所有的p标签,从而设置样式。

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标签选择器</title>
    <style type="text/css">
        /*使用嵌入式*/
        /*使用标签选择器来设置样式*/
        h2{
            color: #f00;
        }
        p{
            color: #00f;
        }
    </style>
</head>
<body>
    <h2>请回答出中国的四大名著</h2>
    <ul>
        <li>西游记</li>
        <li>红楼梦</li>
        <li>水浒传</li>
        <li>三国演义</li>
    </ul>
    <p>《红楼梦》,中国古代章回体长篇小说,中国古典四大名著之首。其通行本共120回,一般认为前80回是清代作家曹雪芹所著,后40回作者为无名氏,由高鹗、程伟元整理。小说以贾、史、王、薛四大家族的兴衰为背景,以大荒山青埂峰下顽石幻化的通灵宝玉为视角,以贾宝玉与林黛玉、薛宝钗的爱情婚姻悲剧为主线,描绘了一些闺阁佳人的人生百态,展现了真正的人性美和悲剧美,是一部从各个角度展现中国清代社会百态的史诗性著作。</p>
</body>
</html>

类选择器

对应HTML中元素的class属性,对不同的class设置不同的样式。

给类为class1的元素可以设置.class1{}也就是.类名,在中括号中写样式代码,class1必须在HTML中是存在的。

比如想要获取div标签下的类为class1的元素设置样式,可以写div.class1也就是标签名.类名{}

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>类选择器</title>
    <style type="text/css">
        /*使用嵌入式*/
        /*使用类选择器来设置样式*/
        .h{
            color: #f00;
        }
        /*先找到p标签,然后再去找p标签里面有没有class为profile,有的话就设置这个样式*/
        p.profile{
            color: #00f;
        }

    </style>
</head>
<body>
    <h2 class="h">请回答出中国的四大名著</h2>
    <ul class="h">
        <li>西游记</li>
        <li>红楼梦</li>
        <li>水浒传</li>
        <li>三国演义</li>
    </ul>
    <p class="profile">《红楼梦》,中国古代章回体长篇小说,中国古典四大名著之首。其通行本共120回,一般认为前80回是清代作家曹雪芹所著,后40回作者为无名氏,由高鹗、程伟元整理。小说以贾、史、王、薛四大家族的兴衰为背景,以大荒山青埂峰下顽石幻化的通灵宝玉为视角,以贾宝玉与林黛玉、薛宝钗的爱情婚姻悲剧为主线,描绘了一些闺阁佳人的人生百态,展现了真正的人性美和悲剧美,是一部从各个角度展现中国清代社会百态的史诗性著作。</p>
</body>
</html>

id选择器

对应HTML中元素的id属性,对不同的id设置不同的样式。

给id为id1的元素可以设置#id1{}也就是#id名{},在中括号中写样式代码,id1必须在HTML中是存在的。

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>id选择器</title>
    <style type="text/css">
        /*使用嵌入式*/
        /*使用id选择器来设置样式*/
        #h{
            color: #f00;
        }
    </style>
</head>
<body>
    <h2 id="h">请回答出中国的四大名著</h2>
    <ul id="h">
        <li>西游记</li>
        <li>红楼梦</li>
        <li>水浒传</li>
        <li>三国演义</li>
    </ul>
    <p>《红楼梦》,中国古代章回体长篇小说,中国古典四大名著之首。其通行本共120回,一般认为前80回是清代作家曹雪芹所著,后40回作者为无名氏,由高鹗、程伟元整理。小说以贾、史、王、薛四大家族的兴衰为背景,以大荒山青埂峰下顽石幻化的通灵宝玉为视角,以贾宝玉与林黛玉、薛宝钗的爱情婚姻悲剧为主线,描绘了一些闺阁佳人的人生百态,展现了真正的人性美和悲剧美,是一部从各个角度展现中国清代社会百态的史诗性著作。</p>
</body>
</html>
相关推荐
FØund4041 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
酷酷的威朗普1 小时前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
渊兮兮1 小时前
Vue3 + TypeScript +动画,实现动态登陆页面
前端·javascript·css·typescript·动画
一棵开花的树,枝芽无限靠近你1 小时前
【PPTist】添加PPT模版
前端·学习·编辑器·html
土豆湿2 小时前
拥抱极简主义前端开发:NoCss.js 引领无 CSS 编程潮流
开发语言·javascript·css
鸽鸽程序猿5 小时前
【前端】CSS
前端·css
学不会•7 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
猫爪笔记13 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html
爱上语文15 小时前
HTML和CSS 表单、表格练习
前端·css·html
小肚肚肚肚肚哦15 小时前
盘点浏览器盒模型中各种 width、height 、边距和位置属性
css·html