css选择器

来源：互联网发布：药剂学基础知识软件编辑：程序博客网时间：2024/04/27 23:42

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>

注: 选择器的种类还有很多,这里并不是全部

0 0