CSS选择器

最新推荐文章于 2024-11-11 09:45:45 发布

一名写前端的GISer

最新推荐文章于 2024-11-11 09:45:45 发布

阅读量4.9k

点赞数

分类专栏： Html&Css 文章标签： a:hover first-child 和 first-of-type only-child 和 :only-of-type :nth-child(n) 和 :nth-of-type(n [attr ~=val]

本文链接：https://blog.csdn.net/wangchaohpu/article/details/82413850

版权

Html&Css 专栏收录该内容

25 篇文章

订阅专栏

本文中包含了CSS1、CSS2、CSS3选择器，并对其中的一些自认为较难理解的地方做了注记，希望对大家有用

一、CSS1选择器

CSS1选择器注：

注1：为什么要LVHA

1.鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；

2.鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义；

所以说，a:hover定义一定要放在a:link、a:visited的后面。再重复一遍正确的顺序是：a:link、a:visited、a:hover、a:active .

注2：在谷歌浏览器中，a标签的herf中有内容时，a:link{color:blue}才有效，因为a:link会对拥有href=“ ”，即拥有实际链接地址的a对象发生效果。

二、CSS2选择器

注1：

[target = _black],选择有target属性并且属性值是_black,没有其他值

例如：
   [title=demo]{
    background: yellow;
    } 
   <p title="demo">p1</p>  //有效
   <p title="demo demo11">p2</p>  //无效，title多了demo11这个值，若换成注2中的方法就可以了

注2：

[title ~= demo]{
    background: yellow;
}
<p title="demo demo1">p1</p>  //有效
<p title="demo22">p2</p> //无效，[title ~= demo]是说title属性包含demo这个词，属性值之间用空格分隔的单词,demo22就不是demo这个词了，尽管包含demo，所以上面表格中说的包含单词demo需要理解清楚。

三、CSS3选择器

注1：first-child 和 first-of-type

CSS2选择器中有个：first-child

div:first-child{ background-color: red; }//无效，因为<div>1</div>并不是body元素的第一个子元素
<body>
 0
 <div>1</div>
 <div>2</div>
 <div>3</div>
</body>

CSS3选择器中有个：first-of-type

div:first-of-type{/*改*/ background-color: red; }//有效，因为<div>1</div>是body元素的子元素中所有div的第一个

同理：last-child和last-of-type一样

注2：:only-child 和 :only-of-type

<body>
 <div>1</div>
 <div>2</div>
 <div>3</div>
 4
</body>

p:only-child { //无效，p不是body的唯一子p元素
background: red;
}

p:only-of-type{//有效，p是body的唯一一个p子元素
background: red;
}

注3：:nth-child(n) 和 :nth-of-type(n)

<body>
 <div>1</div>
 <div>2</div>
 3
 <div>4</div>
 5
</body>

body p:nth-child(2){ background: red; }//无效，body中第二个元素是<div>2</div>，不是p元素，此选择器无效。

补充：关于body p:nth-child(2)，如果body中的第二个元素是p元素则有效，如果不是p元素，则无效；若是body :nth-child(2)，则选中body中第二个元素。

body p:nth-of-type(2){ background: red; }//有效，效果如下图，因为5是body中第二个p元素

同理 :nth-last-child(n)和:nth-last-of-type(n)一样

注4：根元素选择器
:root这个选择器没什么意思，和你直接使用html一样
:root {...}
html {...}

其他内容，详见https://blog.csdn.net/q1056843325/article/details/53189526