css选择器详解（css1/2/3）

最新推荐文章于 2021-06-17 20:10:03 发布

cq-wangyong

最新推荐文章于 2021-06-17 20:10:03 发布

阅读量573

点赞数

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

本文链接：https://blog.csdn.net/qq_30282133/article/details/53033842

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.基本选择器

#id

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            #p1 {color: red;}/*将id='p1'的元素的字体颜色设置为红色*/
            p#p2{color: blue;}/*将id='p2'的p标签的字体颜色设置为红色*/
        </style>
    </head>
    <body>
        <p id='p1'>Internet Explorer 9 </p>
        <p id='p2'>Internet Explorer 9 </p>
    </body>
</html>

class

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            .p1 {color: red;}/*将class='p1'的元素的字体颜色设置为红色*/
            .p1.p2{color: blue;}/*将class值包含p1、p2的p标签的字体颜色设置为红色;这是class有多个值的情况,p1和p2位置顺序不限*/
        </style>
    </head>
    <body>
        <p class='p1'>Internet Explorer 8 </p>
        <p class='p1'>Internet Explorer 9 </p>
        <p class='p2 p1'>Internet Explorer 10 </p><!--class可以有多个值，用空格隔开-->
    </body>
</html>

通配*

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            *{color: red;}/*将所有标签的字体颜色设置为红色,*代表所有标签*/
        </style>
    </head>
    <body>
        <p class='p1'>Internet Explorer 8 </p>
        <p class='p1'>Internet Explorer 9 </p>
        <p class='p2 p1'>Internet Explorer 10 </p>
    </body>
</html>

element

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            p{color: red;}/*将所有p标签的字体颜色设置为红色*/
        </style>
    </head>
    <body>
        <p class='p1'>Internet Explorer 8 </p>
        <p class='p1'>Internet Explorer 9 </p>
        <p class='p2 p1'>Internet Explorer 10 </p>
        <div>I love you!</div>
    </body>
</html>

element,element

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            p,div{color: red;}/*将所有p和div标签的字体颜色设置为红色*/
        </style>
    </head>
    <body>
        <p class='p1'>Internet Explorer 8 </p>
        <p class='p1'>Internet Explorer 9 </p>
        <p class='p2 p1'>Internet Explorer 10 </p>
        <div>I love you!</div>
        <li>I hate you!</li>
    </body>
</html>

element element

后代选择器，div p,div中所有的p标签

element > element

子代选择器，div > p,div中的p标签，且p标签的父标签为div

element + element

兄弟选择器，div + p,所有紧挨着div的p标签且p标签在div标签之后（div，p具有同一父标签）

element ~ element

兄弟选择器，div ~ p,div之后的所有p标签（div，p具有同一父标签）

2.属性选择器

[attribute]

[href],所有拥有href属性的标签
a[href],所有拥有href属性的a标签

[attribute=value]

[target='_blank'],所有拥有target属性且target='_blank'的标签
div[target='_blank'],所有拥有target属性且target='_blank'的div标签
/*[target=_blank]*/

[attribute~=value]

[class ~= 'blank'],所有拥有class属性且class属性值包含blank的标签
div[class ~= 'blank'],所有拥有class属性且class属性值包含blank的div标签
/* 这里包含只能是包含独立的单词 如：class='div1 div2 div3' */

[attribute|=value]

[class |= 'blank'],所有拥有class属性且class属性以blank开头的标签
div[class |= 'blank'],所有拥有class属性且class属性以blank开头div标签
/* 这里属性值只能是单独的单词，也可以有连接符'-'*/
/*如：class='blank'class='blank-1'*/

[attribute^=value]

[class ^= 'blank'],所有拥有class属性且class属性以blank开头的标签
div[class ^= 'blank'],所有拥有class属性且class属性以blank开头div标签
/* 只要属性值最开始为blank即可  */

[attribute$=value]

[class $= 'blank'],所有拥有class属性且class属性以blank结尾的标签
div[class $= 'blank'],所有拥有class属性且class属性以blank结尾的div标签
    /* 只要属性值最后为blank即可  */

[attribute*=value]

[class *= 'blank'],所有拥有class属性且class属性包含blank的标签
div[class *= 'blank'],所有拥有class属性且class属性包含blank的div标签
    /* 只要属性值包含blank即可  */

3.伪元素/伪元素

:link
:visited
:hover
:active

:before


div:before{content:'添加内容';color:red}
div:before{content:''attr(属性名)'';color:red}
/*在div内容之前添加内容，里面设置的css属性也只作用于添加的内容，content属性值为要添加的内容*/

/*content属性值的两种写法:一 直接跟字符串；二 使用attr()*/
/*content:'添加的内容'
  content:attr(属性名)
  content:'字符拼接'attr(href)'字符拼接'*/
/*说明一下字符拼接时不需要任何的连接符，直接写就行*/

:after

和:before用法一样，只是:after是添加在元素内容之后

以下四个常用于input标签

:focus

用于元素获得焦点时设置css样式

:disabled
```
用于元素不可用时设置css样式
```

:enabled

用于元素获得焦点时设置css样式

:checked
只有 Opera 支持 :checked 选择器。
```
用于元素选中时设置css样式；
```

:first-letter

设置元素内容的首字母（首个汉字）的css样式

:first-line
```
设置元素的首行内容的css样式
```

:first-child

:first-child,设置所有元素的第一个子代元素的css样式
p:first-child,设置所有元素的第一个子代元素且第一个子代元素为p标签的css样式

:last-child

:last-child,设置所有元素的最后一个子代元素的css样式
p:last-child,设置所有元素的最后一个子代元素且最后一个子代元素为p标签的css样式

:only-child
:first-of-type
:last-of-type
:only-of-type
——————————————————-
:nth-child()
:nth-last-child()
:nth-of-type()
:nth-last-of-type()
——————————————————-
:root
::selection
:empty
:not(selector)
:target

cq-wangyong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css选择器详解（css1/2/3）

1.基本选择器#id<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <style type="text/css"> #p1 {color: red;}/*将id='p1'的元素的字体颜色设置为红色*/ p#p2{color: blue;}/*将id
复制链接

扫一扫