疯狂H5笔记 - CSS选择器

最新推荐文章于 2022-03-03 18:13:46 发布

19年，重新开始写

最新推荐文章于 2022-03-03 18:13:46 发布

阅读量486

点赞数

分类专栏： html5+css3 文章标签： css

本文链接：https://blog.csdn.net/qq_27905183/article/details/53081483

版权

html5+css3 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

1.属性选择器：

1.E{...}：对所有E元素起作用
2.E[attr]{...}：对具有attr属性的E元素起作用
3.E[attr=value]{...}：对具有attr属性且属性值为value的E元素起作用
4.E[attr~=value]{...}：对具有attr属性且属性值为空格隔开的一系列字符串，其中某个值为value的E元素起作用
5.E[attr|=value]{...}：对具有attr属性且属性值为以连字符分割的一系列字符串，其中第一个值为value的E元素起作用
6.E[attr^=value]{...}：对具有attr属性且属性值以value开头的E元素起作用
7.E[attr$=value]{...}：对具有attr属性且属性值以value结尾的E元素起作用
8.E[attr*=value]{...}：对具有attr属性且属性值包括value字符串的E元素起作用

2.包含选择器：用于指定目标选择器必须处于某个选择器对应的元素内部，形如:Selector1 Selector2 …{…}。

3.子选择器：用于指定目标选择器必须是某个选择器对应的元素的子元素，形如:Selector1>Selector2{…}:

/*对处于div之内并且class属性为a的元素起作用的CSS样式 */
div>.a{
    width: 200px;
    height: 300px;
    border: 2px solid green;
}

4.兄弟选择器：用于指定目标选择器必须是某个选择器对应的元素的兄弟元素，形如:Selector1~Selector2{…}

5.选择器组合：可以组合多个所要定义的样式相同的选择器，形如:Selector1,Selector2,…{…}

6.伪元素选择器：针对CSS中已有的伪元素起作用，CSS提供了如下几个伪元素选择器:

1.:first-letter：对指定对象内的第一个字符起作用，该选择器仅对块元素起作用，如果想要对内联元素起作用，可以设置元素的width/height或者设定position=absolute或者设定display=block 
2.:first-line：对指定对象的第一行内容起作用，该选择器也同样对块元素起作用
3.:before：用于在指定对象内部的前端插入内容
4.:after：用于在指定对象内部的尾端插入内容

7.CSS提供了几个内容相关的属性:

1.content：该属性值可以是字符串、url（url）、attr(all)、counter（name）、
counter（name，list-style-type）、open-quote、close-quote等格式。用于向指定元素之前或者之后插入指定内容
2.quotes：用于为content属性定义open-quote、close-quote，该属性c的值可以是两个以空格分开的字符串，分别表示open-quote和close-quote
3.counter-increment：该属性用于定义一个计数器，属性值就是定义的计数器的名称
4.counter-reset：该属性用于对指定的计数器的值进行复位

一个小例子:

<!Doctype html>
<html>
    <head>
        <meta http-equiv="author" content="chengxi" />
        <meta http-equiv="keywords" content="css,style" />
        <title>样式选择器</title>
        <style>
            div>div:before{
                /*设置前缀*/
                content: 'cheng';
                color: blue;
                font-weight: bold;  
            }
            /*配合quotes属性使用*/
            div>div{
                quotes: "<<" ">>";
            }
            div>div:bofore{
                content: open-quote;
            }
            div>div:after{
                content: close-quote;
            }
            /*使用计数器*/
            div>div{
                counter-increment: mycounter;
            }
            div>div:before{
                content: counter(mycounter) ":";
            }
        </style>
    </head>
    <body>
        <div>
            <div>java</div>
            <div>ajax</div>
            <div>struts</div>
        </div>
    </body>
</html>

8.CSS提供的伪类选择器有如下几个:

Selector:root：匹配文档的根元素，html文档中永远都是<html>元素
Selector:first-child:匹配当前选择器的第一个子节点元素
Selector:last-child：匹配当前选择器的最后一个子节点元素
Selector:nth-child(n)：匹配当前选择器的第n个子节点元素
Selector:nth-last-child(n)：匹配当前选择器的倒数第n个字节点元素
Selector:nth-child(add/event)：匹配当前选择器的所有奇数/偶数子节点元素
Selector:nth-last-child(odd/event)：匹配当前选择器的所有倒数奇数/偶数子节点元素
Selector:nth-child(xn+y)：匹配当前选择器的子节点中满足xn+y表达式的结点元素
Selector:nth-last-child(x+n+y)：匹配当前选择器的子节点中满足xn+y表达式的倒数结点元素
Selector:only-child：匹配当前选择器唯一不重复元素的子节点元素
Selector:first-od-type：匹配与当前选择器对应的元素同类型的第一个兄弟元素
Selector:last-of-type：匹配与当前选择器对应的元素同类型的最后一个兄弟元素
Selector:nth-of-type(n)：匹配与当前选择器对应的元素同类型的第n个兄弟元素
Selector:nth-last-of-type(n)：匹配与当前选择器对应的元素同类型的倒数第n个兄弟元素
Selector:only-of-type：匹配与当前选择器对应的元素同类型的唯一兄弟元素
Selector:empty：匹配符合当前选择器并且内部没有任何子元素的元素

9.CSS提供的UI元素状态的伪类选择器:

Selector:link：匹配当前选择器且未被访问时的元素状态
Selector:hover：匹配当前选择器且处于鼠标悬停状态的元素状态
Selector:active：匹配当前选择器且处于被用户激活状态但是鼠标还未放下的元素状态
Selector:visiter：匹配当前选择器且已经被访问过的元素状态
Selector:focus：匹配当前选择器且得到焦点的元素
Selector:enabled：匹配当前选择器且当前处于可用状态的元素
Selector:disabled：匹配当前选择器且当前处于不可用状态的元素
Selector:checked：匹配当前选择器且当前被选中状态的元素
Selector:default：匹配当前选择器且页面打开时处于选中状态的元素
Selector:read-only：匹配当前选择器且处于只读状态的元素
Selector:read-write：匹配当前选择器且处于读写状态的元素
Selector:selection：匹配当前选择器的元素中当前被选中的内容

10.浏览器的专属前缀属性:

-ms-：Internet Explorer浏览器专属的CSS属性
-moz-：基于Gecko引擎的浏览器专属的CSS属性
-o-：Opera浏览器的专属CSS属性
-webkit-：基于Webkit引擎的浏览器的专属CSS属性

11.CSS新增两个特殊的伪类选择器:

Selector:target：匹配符合当前选择器且必须是命名锚点目标的元素
小例子:
<!Doctype html>
<html>
    <head>
        <title>easy targer css</title>
        <style>
            :target{
                /*用于高亮显示当前正在被访问的锚点目标元素，当点击如下java链接，将会高亮显示锚点目标元素也就是div元素里的内容*/
                background-color: #ff0;
            }
        </style>
    </head>
    <body>
        <a href="#java">java</a>
        <div id="java">
            <h2>疯狂java讲义</h2>
            <p>详细讲解了java的基础，是一本不错的自学书</p>
        </div>
    </body>
</html>

Selector1:not(Selector2)：匹配符合Selector1选择器，但是不符合Selector2选择器的元素

19年，重新开始写

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
疯狂H5笔记 - CSS选择器

1.属性选择器：1.E{...}：对所有E元素起作用2.E[attr]{...}：对具有attr属性的E元素起作用3.E[attr=value]{...}：对具有attr属性且属性值为value的E元素起作用4.E[attr~=value]{...}：对具有attr属性且属性值为空格隔开的一系列字符串，其中某个值为value的E元素起作用5.E[attr|=value]{...}：对具有at
复制链接

扫一扫