css选择器

最新推荐文章于 2023-09-05 10:06:10 发布

UNDEFINED_AUBE

最新推荐文章于 2023-09-05 10:06:10 发布

阅读量322

点赞数

本文链接：https://blog.csdn.net/UNDEFINED_AUBE/article/details/78756915

版权

css选择器

1、关系选择器

（1）包含选择器（E F）【父子关系】

<1>包含选择符（E F）

选择所有被E元素包含的F元素，中间用空格隔开

只要是包含都会被选中

例如：

<style>

ul li{color:blue;}

</style>

（2）子选择器（E>F）

<1>选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用大于号表示

例如：

<style>

di>a{color:red;} 只对子元素起作用，对子孙元素不起作用

p>a{color:green;} 这个才是对p标签的a元素起作用

</style>

<div>

<a href="#">这是子元素</a>

<p><a href="#">这是子孙元素</a></p>

</div>

（3）相邻选择器（E+F）

<1>选择器贴在E元素之后的F元素，用加号表示，选择相邻的第一个兄弟元素

例如：

<style>

p+span{color:purple;} 第一个span的颜色就会变成紫色

</style>

<p>这是p元素</p>

<span>这是紧挨着p元素的第一个span</span><br/>

<span>这是第二个span</span>

（4）兄弟选择器（E~F）

<1>选择E元素之后的所有兄弟元素F，作用于多个元素，用~号隔开

例如：

<style>

#p2~span{color:blue;} p2后面所有的span都会被选中变为蓝色

</style>

2、属性选择器：通过html的属性来选择元素

写法：元素[属性名=“属性值”]，符号不固定，可换其他符号

（1）E[att]{}：选择具有att属性的E元素

例如：

<style>

option[disabled]{color:red;} 表示选中option元素中带有disabled的属性

</style>

</select>

（2）E[att="val"]{}：选择具有att属性且属性值等于val(确切的属性值)的E元素（就是通过属性值来选择）

例如：在<input type="">各种类型里面使用就非常合适

<style>

input[type="text"]{height:100px;} 就操作了单行文本框这一类

</style>

</form>

（3）E[att~="val"]{}：选择有att属性的元素，且属性值列表中有一个符合val的元素

<1>例如：当你需要修改一个样式的时候不能在<style></style>中间直接修改，否则会导致

所有含有这个样式的地方都会被修改，而你只是想要修改这个样式特定的某一个地方

（后期要加的内容要另外加class，不能修改到之前的代码）

<style>

.pNore{font-size:30px} 这样就只对该样式的某一个地方进行了修改

</style>

<p class="p1 pNore">随便写点文字</p> class名字可以叠加，在需要修改的地方

叠加一个class名

但是需要注意id名一个元素只能有一个

<2>例如：

<style>

p[class~="p1"]{color:blue;} 这样就选中了class属性中所有含有p1的内容

</style>

<p class="p1 pNore pColor" id="myID">随便写点文字</p>

（4）E[att^="val"]{}：选择E元素中有att属性，且属性值是以“val”开头的元素

（就是class名字中以某一个字母开头的都会被选中）

例如：

<style>

p[class^="Q"]{color:red;font-size:20px} 这样就选中了class属性中以Q开头的值

来修改

</style>

<p class="p1 pNore pColor" id="myID">随便写点文字</p>

（5）E[att$="val"]{}：选择具有att属性且属性值为以val结尾的字符串的E元素

例如：

<style>

p[class$="6"]{color:green;font-size:20px} 这样就选中了class属性中以6结尾的值

来修改

</style>

<p class="p1 pNore pColor" id="myID">随便写点文字</p>

（6）E[att*="val"]{}：选择具有att属性且属性值包含val的字符串的E元素

（只要是class名里面包含有引号里面的属性值的内容都会被选中）

例如：

<style>

a[href*="baidu"]{color:red;} href值里面包含baidu的就会被选中

</style>

<a href=" http://www.baidu.com">百度</a> ;

<a href=" http://www.taobao.com">淘宝</a> ;

3、伪类选择器:定义了元素的状态（反映状态、属性）

（1）E:link 设置超链接a在未被访问前的样式（特指a标签）

例如：

<style>

a:link{color:yellow;} 设置超链接在未被访问前的颜色为黄色

区别：a{color:yellow;}是代表了整个a元素的样式，不分访问前后

</style>

<body>

</body>

（2）E:visited 设置超链接a在其链接地址已经被访问过时的样式（特指a标签）

例如：

<style>

a:visited{color:blue;} 设置超链接在被访问后的颜色变为蓝色

</style>

<body>

</body>

（3）E:hover 设置鼠标悬停在元素上时的样式（不限于a标签）

例如：

<style>

ul li:hover{background-color: pink;} 当鼠标悬停在列表项的时候背景色就会出现

</style>

<body>

<ul>

</ul>

</body>

P.S.想要文字在背景颜色中居中就可以用两个属性：

text-align:center;line-height: ；

文本居中文本的高度，可以实现上下居中

（4）E:active 设置元素在鼠标按下时的样式（不限于a标签）

例如：

<style>

ul li:active{color: green;} 在鼠标点击列表项的时候列表项字体的颜色就会变绿色

</style>

<body>

<ul>

</ul>

</body>

（5）E:not(s) 匹配不含有s选择器的元素E（也就是说s选择器不会被选中，剩下其他

的选择器会被选中）

例如：

<style>

div:not(.d1){color:aqua;} 不包含d1，也就是说有d1的都不被选中，没有d1的都被

选中

</style>

<body>

</body>

（6）E:first-child 选中父元素的第一个子元素E（要使该属性生效，E元素必须是某个元素的

子元素。一般元素都是body的子元素，所以都可以使用此伪类，而body

标签不是子元素，所以对body标签无效）

例如：

<style>

.u1l li:first-child{color:orange;} 选中ul1下的第一个li

如果这里的li前面不加.ul1那么所有父元素下的第一个li都会被选中

</style>

<body>

</ul>

</body>

（7）E:last-child 选中父元素的最后一个子元素E

例如：

<style>

.u1l li:last-child{color:orange;} 选中ul1下的最后一个li

</style>

<body>

</ul>

</body>

（8）E:only-child E元素是唯一的子元素时被匹配（如果该子元素在父元素里不是唯一的

就不会有效果）

例如：

<style>

ul li:only-child{color:green;} 选中ul中这个唯一的li（此时如果ul中有多个li，

也就是说li不唯一，那么就没有相应的效果）

</style>

<body>

<ul>

</ul>

</body>

（9）E:empty

（10）E:checked

（11）E:nth-child(n)

4、伪对象(伪元素)选择器（表示DOM外部的某种文档结构，改变文档结构，在结构外

另加一个没有实际存在的元素<伪元素>，是写在css里面的）

就是用css的方式模拟一个htm1的结构

（1）E::before

before选择器在被选元素的内容前面插入内容，一定要和content属性一起使用

例如：

ul::before{content:"在p标签元素内容前加的内容";color:pink;} content后面的

内容会显示在ul前面，但是不属于html文档

<ul>

<li>杨洋超级无敌帅</li>

<li>杨洋最可爱了</li>

</ul>

（2）E::after

after选择器在被选元素的内容后面插入内容，一定要和content属性一起使用

例如：

ul::after{content:"在p标签元素内容后加的内容";color:pink;} content后面的

内容会显示在ul后面，但是不属于html文档

<ul>

<li>杨洋超级无敌帅</li>

<li>杨洋最可爱了</li>

</ul>

伪元素还可以添加图片：content:"用url("")引入图片

UNDEFINED_AUBE

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css选择器

css选择器1、关系选择器（1）包含选择器（E F）【父子关系】包含选择符（E F）选择所有被E元素包含的F元素，中间用空格隔开只要是包含都会被选中例如： ul li{color:blue;} （2）子选择器（E>F）
复制链接

扫一扫