Css选择器

最新推荐文章于 2023-12-12 09:35:39 发布

坚持小P

最新推荐文章于 2023-12-12 09:35:39 发布

阅读量442

点赞数

分类专栏： Css

本文链接：https://blog.csdn.net/Goblin_J/article/details/45701035

版权

Css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.派生选择器

包含三个后代选择器;子类选择器;相邻兄弟选择器

后代选择器:

p span {color:red;}
子类选择器:(子的意思就是儿子，而该标签下的其他子标签不起作用)

p > span{color:red;}

相邻兄弟选择器,只对相邻兄弟内的内容产生影响，而兄弟内的其他标签内的内容无影响

p + span{color:red;}

代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        a span {
            color: red;
        }

        a > span {
            color: green;
        }

        span + div {
            color: pink;
        }
    </style>
</head>
<body>
    <a>
        <div><span>fdsfsd</span></div>
    </a>
    <a><span>wsc</span><div>bb<span>sss</span></div>
    </a>
</body>
</html>

效果图如下：

2.类选择器

类选择器： .sp{color:red;} .sp td{color:red}　(只对类为sp的标签内的td影响) td.sp{td内的类为sp的元素影响}

代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        .aa td {
            color: red;
            border: dashed 1px black;
        }

        td.bb {
            color: green;
            border: dashed 1px green;
        }
    </style>
</head>
<body>
    <a class="aa">
        <table>
            <tr>
                <td>这是个单元格
                </td>
            </tr>
        </table>
    </a>
    <table>
        <tr>
            <td class="bb">这是个单元格
            </td> 
        </tr>
    </table>
    <a class="bb">非td内的bb类标签无影响</a>
</body>
</html>

效果图:

3.ID选择器

ID选择器 #xxx{color:red;} ID选择器和后代一起使用 #xxx span{color:red;}
代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        #newA {
            color: red;
            border: dotted 1px black;
            padding: 5px;
        }

        #newB b {
            color: blue;
        }

        #newB span {
            color: green;
        }

        #newB {
            border: ridge 1px green;
            padding: 5px;
        }
    </style>
</head>
<body>
    <a id="newA">ID为newA的<a>标签为红色</a>
    <a id="newB">ID为newB的a标签内的b元素为<b>蓝色</b>
        span元素内的为<span>绿色</span></a>
</body>
</html>

效果图：

属性选择器：

格式为：[value]{color:red;} [value=xxx]{color:red} [value~=xxx]{color:red}

[value],[value=css] 这两个无需比较

[value~=css] 匹配css是个完整的词，不管前后，例如css; css a;a css; 但是css-a就不行。

[value*=css] 匹配的只要是value值内有css出现就行，不管是不是单独的词或者在前在后，例:csss,s-css,css-a

[value|=css] 匹配的只有两种形式例如：css;css-afd

[value$=css] 匹配的是css结尾例如：1css;1-css;1 css;

代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        div {
            border: dotted 1px green;
            width: 300px;
            margin: 5px;
        }

        [val] {
            color: red;
        }

        [val1=css] {
            color: blue;
        }

        [val2~=css] {
            color: gray;
        }

        [val3*=css] {
            color: hotpink;
        }

        [val4$=css] {
            color: yellowgreen;
        }

        [val5|=css] {
            color: blanchedalmond;
        }
    </style>
    <div>
        <a val="s">val</a>
    </div>
    <div>
        <a val1="css">val1</a>
        <a val1="csss">val1</a>
    </div>
    <div>
        <a val2="css aa">val2</a>
        <a val2="csss">val2</a>
        <a val2="css-s">val2</a>
        <a val2="1 css s">val2</a>
    </div>
    <div>
        <a val3="css">val3</a>
        <a val3="csss">val3</a>
        <a val3="csss-cs">val3</a>
        <a val3="ss-css">val3</a>
    </div>
    <div>
        <a val4="1css">val4</a>
        <a val4="1-css">val4</a>
        <a val4="1 css">val4</a>
        <a val4="cscss">val4</a>
    </div>
    <div>
        <a val5="css">val5</a>
        <a val5="css-s">val5</a>
        <a val5="css s">val5</a>
        <a val5="css^s">val5</a>
        <a val5="csss">val5</a>
        <a val5="s css">val5</a>
    </div>
</head>
<body>
</body>
</html>

效果图如下：

坚持小P

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Css选择器

1.派生选择器包含三个后代选择器;子类选择器;相邻兄弟选择器后代选择器:p span {color:red;} 子类选择器:(子的意思就是儿子，而该标签下的其他子标签不起作用)p > span{color:red;}相邻兄弟选择器,只对相邻兄弟内的内容产生影响，而兄弟内的其他标签内的内容无影响p + span{color:red;}代码如下：
复制链接

扫一扫

专栏目录