美文网首页
CSS-选择器

CSS-选择器

作者: 小驴拉磨 | 来源:发表于2020-08-04 20:35 被阅读0次

一、什么是选择器

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

二、基本选择器

image.png

全部标签的颜色设置为蓝色


image.png
1、通用选择器

代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>通用选择器</title>
    <style type="text/css">
        *{
            color: #00f;
        }

    </style>
</head>
<body>
    <h2>请问中国的四大名著</h2>
    <ul>
        <li>西游记</li>
        <li>三国演义</li>
        <li>红楼梦</li>
        <li>水浒传</li>
    </ul>
    <p>万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。 经过接近8年的艰苦努力,该标准规范于2014年10月29日终于制定完成。</p>
</body>
</html>
2、标签选择器
image.png
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标签选择器</title>
    <style type="text/css">
        /*
        格式:标签名{属性:值;}
        */
        h2{
            color: red;
        }
        li{
            color: green;
        }
        p{
            color: blue;
        }

    </style>
</head>
<body>
    <h2>请问中国的四大名著</h2>
    <ul>
        <li>西游记</li>
        <li>三国演义</li>
        <li>红楼梦</li>
        <li>水浒传</li>
    </ul>
    <p>万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。 经过接近8年的艰苦努力,该标准规范于2014年10月29日终于制定完成。</p>
</body>
</html>
3、类选择器
image.png
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>类选择器</title>
    <style type="text/css">
        /*
        格式:class的属性值{属性:值;}
        只要class是temp的标签,不管他是什么标签他都会设置样式。
        */
        .temp{
            color: red;
        }

        /*
        先找到p标签,然后去找p标签里面有没有class属性值是temp1的,如果有就给其设置样式。
        */
        p.temp2{
            color: blue;
        }

    </style>
</head>
<body>
    <h2 class="temp">请问中国的四大名著</h2>
    <ul>
        <li>西游记</li>
        <li>三国演义</li>
        <li>红楼梦</li>
        <li>水浒传</li>
    </ul>
    <p class="temp2">万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。 经过接近8年的艰苦努力,该标准规范于2014年10月29日终于制定完成。</p>
</body>
</html>
4、id选择器
image.png
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>id选择器</title>
    <style type="text/css">
        /*
        格式:#id{属性:值;}
        作用:给拥有指定的id属性值来设置样式
        但要注意在一个HTML文件中ID的属性值是唯一的
        */
        #temp{
            color: red;
        }

        
        #temp2{
            color: blue;
        }

    </style>
</head>
<body>
    <h2 id="temp">请问中国的四大名著</h2>
    <ul>
        <li>西游记</li>
        <li>三国演义</li>
        <li>红楼梦</li>
        <li>水浒传</li>
    </ul>
    <p id="temp2">万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。 经过接近8年的艰苦努力,该标准规范于2014年10月29日终于制定完成。</p>
</body>
</html>

相关文章

  • css-选择器

    CSS选择器最主要的基础选择器。 选择器 含义通用元素选择器,匹配页面任何元素。(这也就决定了我们很少使用)...

  • CSS-选择器

    标签选择器 指用HTML标签名称作为选择器,按标签名进行分类,为页面中的某一类标签指定为同一样式。 类选择器 类选...

  • CSS-选择器

    1、元素/标签/类型选择器 以标签作为选择器 p{color:#f00;} div{ba...

  • CSS-选择器

    一、什么是选择器 选择器是指通过一定的语法规则选取对应的HTML标记,然后给对应的HTML标记设置样式。选择器分为...

  • CSS-选择器

    选择器

  • CSS-选择器

    标签选择器 标签选择器是指用HTML标签名作为选择器,可以把某一类标签全部选择出来,然后为页面中某一类标签指定统一...

  • CSS-常用选择器

    常用选择器 子代和父代选择器 伪类选择器 伪元素 属性选择器 孩子选择器 兄弟选择器 否定伪类 优先选择器 a的伪类

  • css-选择器类型

    一、元素选择器 文档元素为最基本的选择器示例: 二、id选择器 id 选择器可以为标有特定 id 的 HTML 元...

  • CSS-属性&&选择器

    CSS选择器、CSS属性 css的固定格式: 注意点: style写在head中间,type="text/css"...

  • CSS-其他选择器

    一、其他选择器 二、目录代码 2-1 id选择器 index.html index.css 2-2 逗号选择器 i...

网友评论

      本文标题:CSS-选择器

      本文链接:https://www.haomeiwen.com/subject/uxbwrktx.html