2.CSS选择器

最新推荐文章于 2023-03-06 14:29:46 发布

小马Mark

最新推荐文章于 2023-03-06 14:29:46 发布

阅读量235

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_45914233/article/details/106880241

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

标记选择器(元素选择器):

标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 “共性” 而不是 ”特性“

div{
    color:red;
    font-size: 100px;
}

类选择器:

对任何合法的HTML标签都可以使用class属性
class属性用于定义页面上的HTML元素标记组，给指定的一组标记设置相同的样式规则
如果是多个类要用空格分隔
设置class属性后，使用类选择器是由点号“.”及类名称直接相连构成

截取片段：

    <style>
        .c2{color: red;font-weight: bold;}
        .c3{font-style: italic;}
    </style>
</head>
<body>
    <div>
        <p>小白</p>
    </div>
    <p class="c2">著名诗人</p>
    <ol class="c1">
        <li class="c2">李白</li>
        <li class="c3 c4">杜甫</li>
        <li>李牧</li>
    </ol>

联合选择器

标记选择器和类选择器联合使用
使用方式：标记选择器与类选择器直接相连

代码片段：

    <style>
        .c2{color: red;font-weight: bold;}
        .c3{font-style: italic;}
		/*类选择器*/
        p.c2{color: green;font-size: 20px;}
        li.c3{color: red;}
		/*联合选择器*/
    </style>
</head>
<body>
    <div>
        <p>小白</p>
    </div>
    <p class="c2">著名诗人</p>
    <ol class="c1">
        <li class="c2">李白</li>
        <li class="c3 c4">杜甫</li>
        <li>李牧</li>
    </ol>

id选择器:

只有页面上的标记(body标记及其子标记)才能具有给定的id
在同一页面中的id必须唯一
id属性的取值要以字母开头（由字母、数字、下划线、连字符组成，最好使用前三个）
使用id选择器由井号“#”以及id属性值直接相连构成

代码片段：

    <style>
        #right{
            color: red;
            text-align: right;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p id="right">使用id选择器设置样式</p>

全局声明(通用选择器):

选中所有的标签，给所有的标签渲染

代码片段：

    <style>
        *{
            color: red;
        }
    </style>
</head>
<body>
    <h1>标题</h1>
    <p>小白</p>
    <a href="">超链接</a>

组合选择器

派生选择器(后代)：

使用空格表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）

代码片段：

    <style>
        div a{ 
            /*div标签下的所有a标签*/
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <a href="">华为</a>  /*变红*/
        <p>
            <a href="">红米</a>  /*变红*/
        </p>
        <a href="">小米</a>  /*变红*/
    </div>
    <a href="">苹果</a>

子代选择器:

使用 > 表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子…)元素p。

代码片段：

    <style>
		/*div标签下的第一层a标签*/
        div>a{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <a href="">华为</a>  /*变红*/
        <p>
            <a href="">红米</a>
        </p>
        <a href="">小米</a>  /*变红*/
    </div>
    <a href="">苹果</a>

集体声明(并集选择器):

多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素，可以使用并集选择器

代码片段：

    <style>
        p,h1{
            color: red;
        }
    </style>
</head>
<body>
    <p>段落1</p>  /*变红*/
    <a href="">超链接</a>
    <h1>h1标签</h1>  /*变红*/
</body>

相邻选择器:

选择紧接着一个标签后的另一个标签，两者有相同的父标签
相邻兄弟选择器使用了加号（+）

代码片段：

    <style>
        div+a{
            color: red;
        }
    </style>
</head>
<body>
    <a href="">三星</a>
    <div>
        <a href="">华为</a>
        <p>
            <a href="">红米</a>
        </p>
        <a href="">小米</a>
    </div>
    <a href="">苹果</a>  /*变红*/
    <a href="">百度</a>

弟弟选择器:

在同一父标签下，一个标签后面另一个标签(所有)全为这个标签的“弟弟”
使用波浪符(~)

代码片段：

    <style>
        div~a{
            color: red;
        }
    </style>
</head>
<body>
    <a href="">三星</a>
    <div>
        <a href="">华为</a>
        <p>
            <a href="">红米</a>
        </p>
        <a href="">小米</a>
    </div>
    <a href="">苹果</a>  /*变红*/
    <a href="">百度</a>  /*变红*/

CSS属性选择器:

属性选择器，字面意思就是根据标签中的属性，选中当前的标签。

基本属性选择器

定义属性选择器时，需要通过方括号([])将属性包围住
[匹配的属性]{属性:值;...} 选择所有包含该属性的标签
标签[匹配的属性]{} 选择该标签且包含该属性的标签

代码片段：

    <style>
        [title]{
            color: red;
        }
		input[type]{
            background-color: green;
		}
    </style>
</head>
<body>
    <div title="div标签">
        <p>段落1</p>          /*变红*/
    </div>
	<input type="text">      /*变绿*/

属性和值选择器

以指定“属性/值”的所有标记设置样式
[属性=属性值]{}
标签[属性=属性值]{}

代码片段：

    <style>
        [title=div标签]{
            color: red;
        }
    </style>
</head>
<body>
    <div title="div标签">
        <p>段落1</p>             /*变红*/
    </div>
    <div title="div2">
        <p>段落2</p>
    </div>
</body>

多个值的属性和值选择器

可以对具有指定值的某个属性的所有标记设置样式（使用于由空格分隔的属性值）
[属性~=value]{} 属性值是以空格分隔的词汇列表中一个单独的词
[属性^=value]{} 属性值是以value开头的
[属性$=value]{} 属性值是以value结尾的
[属性*-value]{} 属性值中包含了value的
[属性|=value]{} 属性值是value或者以"value-"开头的

伪类选择器:

伪类选择器一般会用在超链接a标签中
用法：标签:伪类名{}

伪类名	说明
link	设置a标签在未被访问前的样式
visited	设置a标签在被访问之后的样式
hover	设置a标签在鼠标悬停时的样式（不止用于a标签）
active	设置a标签在被鼠标摁住的时候的样式
focus	向拥有键盘输入焦点的元素添加样式。
first-child	设置第一个子标签的样式
lang	设置具有lang属性的标签的样式

伪元素选择器

伪元素	说明
first-letter	设置第一个字符的样式（用于块级元素）
first-line	设置第一行的样式表（用于块级元素）
before	在元素的内容前面插入新内容（结合content属性使用）
after	在元素内容的后面插入新内容（结合content属性使用）

代码片段：

    <style>
        a:link{
            color: red;
        }
        a:visited{
            color: aqua;
        }
        a:hover{
            color: deeppink;
        }
        a:active{
            color: green;
        }
        p:first-letter{
            font-size: 20px;
            color: blue;
        }
        p:before{
            content: "?";
            font-size: 50px;
            color: brown;
        }
        p:after{
            content: "!";
            font-size: 50px;
            color: brown;
        }
    </style>
</head>
<body>
    <a href="https://www.w3school.com.cn/index.html">w3c</a>
    <p>段航</p>

知识来源于网上

小马Mark

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
2.CSS选择器

标记选择器(元素选择器):标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 “共性” 而不是 ”特性“div{ color:red; font-size: 100px;}类选择器:对任何合法的HTML标签都可以使用class属性class属性用于定义页面上的HTML元素标记组，给指定的一组标记设置相同的样式规则如果是多个类要用空格分隔设置class属性后，使用类选择器是由点号“.”及类
复制链接

扫一扫