css选择器

最新推荐文章于 2024-10-04 06:11:34 发布

漫漫人生求无悔

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量179

点赞数

分类专栏： css 文章标签： html 文档编辑器

本文链接：https://blog.csdn.net/qq_20799955/article/details/52443793

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、元素选择器：会选择html文档中所有的对应的元素
缺点：不灵活，无法给相同的元素设置不同的属性

/*选择所有的div元素*/
div{
    background-color: blue;
    width: 200px;
    height: 150px;
}

2、群组选择器：会获取到每个逗号之间的所有的对应的元素

/*获取所有的div和span元素*/
div, span{
     background-color: blue;
    width: 200px;
    height: 150px;
}

3、id选择器：获取到对应的id值的元素（注意区分与class选择器的区别）
前提：需要给对应的元素设置id值
注意点：id值不能重复,虽然设置重复的id值在css中不会影响效果,但是在js中获得的id值只能是第一个,所以设置同样的样式,请用class选择器

#d1{
     width: 100px;
     height: 100px;
     background-color: red;
}

4、class（类）选择器：获取到对应的class值的元素
前提：需要给对应的元素设置class值
注意点：class值能重复。

.fontcolor{
    color: white;
}

5、后代选择器：找到E对应的元素下里面所有的F对应的元素（E和F可以是元素名，id名，class名）
语法：两元素之间用空格隔开：
E F {
}
找到E对应的元素下里面所有的F对应的元素（E和F可以是元素名，id名，class名）
！！！注意：区分与子选择器的区别

<style>
/*这样的结果会选择到div2和div3两个,选择到div1下面的所有子孙元素*/
div div{
    background: red;
}
</style>
<body>
    <div>这是div1
        <div>这是div2
            <div>这是div3</div>
        </div>
    </div>
</body>

6、子选择器：找到E对应的元素下里面所有的F对应的父子关系的元素（E和F可以是元素名，id名，class名）
写法：两元素之间用>连接
E>F{ …
}
找到E对应的元素下里面所有的F对应的父子关系的元素（E和F可以是元素名，id名，class名）

<style>
/*这样的结果会选择到div2一个,选择到div1下面的所有儿子元素*/
div div{
    background: red;
}
</style>
<body>
    <div>这是div1
        <div>这是div2
            <div>这是div3</div>
        </div>
    </div>
</body>

7、相邻兄弟选择器：写法：
E+F{…
}
特点：相邻兄弟找到的一定是同级元素（E，F一定是同级元素）
找到与E对应的元素同级的下一个F对应的元素
（E，F可以是元素名，id名，class名

<style>
/*这样的结果会选择到除了li1之外的所有li元素*/
    li + li{
    background: red
    }
</style>
<body>
<ul>
<li>这是li1</li>
<li>这是li2</li>
<li>这是li3</li>
<li>这是li4</li>
</ul>
</body>

8、属性选择器：属性选择器可以分为四类，每类都有各自的作用：
a、给带有“attr”属性的“e”标签设置css样式
e[atter]{…
}
b、给带有“attr”属性并且值为“value”的“e”元素设置css样式
e[attr=“value”{…
}
c、会选择所有的属性名为attr且值为value单词的e标签
e[attr~=”value”]{…
}
d、会选择所由属性名为attr且值里有value连贯字符的e标签
e[attr*=”value”]{…
}
这类选择器平时应用不多在这就不介绍了
9、伪类选择器和类选择器的区别: 类选择器在使用之前需要给元素提前定义一个class属性并赋值,而伪类选择器直接使用即可,系统几乎已经给所有的元素默认添加过对应的伪类属性了
E:link 匹配到定义了超链接但没有点击过的元素
E:visited 匹配到定义了超链接且已经点过的元素
E:hover 鼠标停留在E元素上时
E:active 鼠标在E元素上按下时

<style>
div{
width: 100px;
height: 100px;
background: red;
}
/*鼠标移入div的背景色变成蓝色*/
div:hover {
    background: blue;
}
/*鼠标按下div的背景色变成蓝色*/
div:active {
    background: green;
}
/* :link和:visited一般用到a链接里面*/
/*a链接点击之前为绿色,点击之后变成默认的颜色或设置的颜色*/
a:link {
    background: green;
}
/*a链接点击之前为默认色(蓝色),点击之后变成红色*/
a:visited{
    background: red;
}
</style>
<body>
<div>
<a href="http://www.baidu.com">这是百度链接</a>
</div>
</body>