CSS3选择器

最新推荐文章于 2024-07-08 16:06:00 发布

Judian6974

最新推荐文章于 2024-07-08 16:06:00 发布

阅读量950

点赞数

CC 4.0 BY-SA版权

分类专栏： css3选择器文章标签： css3

本文链接：https://blog.youkuaiyun.com/Judian6974/article/details/77937145

css3选择器专栏收录该内容

1 篇文章

订阅专栏

CSS3选择器

1.1属性选择器

E[attr ^= “value”]指定属性名,找以value开头的属性;
E[attr $= “value”]指定属性名,找以value结尾的属性;
E[attr *= “value”]指定属性名,找包含value的属性值;

<style>
        /*div[id^="product"]{*/
            /*color: yellow;*/
        /*}*/
        /*div[id$="3"]{*/
            /*color: yellow;*/
        /*}*/
        div[id*="product"]{
            color: yellow;
        }
    </style>
</head>
<body>
<div id="product-1">商品1</div>
<div id="product-2">商品2</div>
<div id="product-3">商品3</div>
<div id="money">价格</div>
</body>

1.2伪类选择器

1.2.1和用户界面相关的：
E:enabled{ }：元素被激活的时候触发，比如输入框获取焦点
E:disabled{ }：元素被禁用的时候触发，比如输入框不可获取到焦点
E:checked{ }：元素被选中的时候触发，比如radio或checkbox元素的选中

<style>
        input:enabled{
            background: pink;
        }
        input:disabled{
            background: red;
        }
    </style>
</head>
<body>
<input type="text" disabled placeholder="请输入密码"/>
</body>

E::selection{ }：选中的时候触发，比如一大堆文字被选中的时候，给选中的文字设置字体
注意：只能向::selection选择器应用少量CSS属性：color、background、cursor以及outline

<style>
        p::selection{
            color: brown;
            background: black;
        }
    </style>
</head>
<body>
<p>一、 不要刻意去猜测他人的想法，如果你没有智慧与经验的正确判断，通常都会有错误的。
    二、 总有些名字，突然从你生活中淡去；而另一些名字，已不记得什么时候开始熟悉。
    三、 跟家人争，争赢了，亲情没了；跟爱人争，争赢了，感情淡了；跟朋友争，争赢了，情义没了。争的是理，输的是情，伤的是自己。
    四、 “其实你知道的，任何一种需要你花尽心思去讨好的感情都不会撑的太久。”
    五、 放下不是放弃，是一种生活的态度，轻松不是懈怠，是闲适的一种悠然；不执著不是不认真，是一种自在、随意、随缘的人生智慧！
    六、 你的时间有限，不要浪费于重复别人的生活。不要让别人的观点淹没了你内心的声音。</p>
</body>

1.2.2结构性伪类：
E:root；在HTML文档中，就是HTML元素
body的高度是什么？？当我们没有对HTML元素设置背景颜色的时候，HTML会自动读取body的背景颜色。
E:empty；当一个元素没有内容（子元素）的时候触发。

<style>
        td:empty{
            background: gray;
        }
    </style>
</head>
<body>
<table border="1">
    <tr><th>名字</th><th>年龄</th></tr>
    <tr><td>张三</td><td>27</td></tr>
    <tr><td>李四</td><td>25</td></tr>
    <tr><td>幢幢</td><td></td></tr>
</table>

E:nth-child(index){ }；所有元素的父元素的第index个子元素，子元素的编号是从1开始，同时输号的顺序不管什么类型的元素标号一次递增
E:nth-of-type(index){ } == E:first-of-type{ }；所有元素的父元素的第index子元素，还在的编号根据同一类的元素进行编号，如果子元素有多种元素（div、h3、p），那么就有多组编号
E:last-of-type{ } == E:nth-of-type(最后一个){ }

<style>
        p:first-child{
            background: yellow;
        }
        /*h3:nth-child(3){*/
            /*background: grey;*/
        /*}*/
        p:nth-of-type(2){ /*对同类型的标签进行标号*/
            background: pink;
        }
    </style>
</head>
<body>
<article>
    <h3>北京</h3>
    <p>北京欢迎你</p>
    <div>不欢迎</div>
    <h3>江苏</h3>
    <p>江苏欢迎你</p>

    <h3>浙江</h3>
    <p>浙江欢迎你</p>
</article>
<p>我</p>
<p>是</p>
<p>谁</p>
</body>