css选择器

亮哥666
116 阅读2分钟

术语解释

h1{
    color:red;
    background-color:lightblue;
    text-align: center;
}

CSS规则 = 选择器 + 声明块

简单选择器

  1. ID选择器
  2. 元素选择器
  3. 类选择器
  4. 通配符选择器

*，选中所有元素

  1. 属性选择器

根据属性名和属性值选中元素 MDN

a.选中所有具有href属性的元素

[href]{
    color:red;
}

b.选中所有具有href属性的元素,并且这个属性为www.sina.com 的元素

[href="https://www.sina.com"]{
    color:red;
}

c.选中所有具有href属性的元素，并且这个属性值是以baidu.com结尾的。$ 一般表示以什么结尾的。

a[href$="baidu.com"]{
  color:#008c8c;
}

d.选中class 属性中有b的元素

[class*="b"]{
    color:green;
}
  1. 伪类选择器

选中某些元素的某种状态

1）link: 超链接未访问时的状态

2）visited: 超链接访问过后的状态

3）hover: 鼠标悬停状态

4）active：激活状态，鼠标按下状态

爱恨法则：love hate

  1. 伪元素选择器 生成并选中当前元素的第一个或者最后一个子元素。

before

after

<p>
   袁老师和成老师的<span>HTML和CSS</span>课程真的是不错呀！
</p>
    

span::before {
    content: "《";
    color: red;
}

span::after {
    content: "》";
    color: red;
}

选择器的组合

  1. 并且 两个选择器连着写，中间不要加空格的选择器就是并且的选择器。
  2. 后代元素 —— 空格
  3. 子元素 —— >
  4. 相邻兄弟元素 用后面的加号 +
  5. 后面出现的所有兄弟元素，用后面的 ~

并且选择器这里举两个例子

<p>段落一</p>
<p class="red">段落二</p>
<a href="https://baidu.com">百度链接</a>
    

p.red {
    color: red;
}

a[href = "https://baidu.com"]{
    color: aqua;
}

需要特别注意的是不要加空格，加了空格就选不中了。

兄弟元素选择器总结：

豆瓣项目总结
/* hover 也是可以选中兄弟选择器的 */
.frameContainer .top  .topcontainer:hover+.tip{
    display: block;
}

选择器的并列

多个选择器, 用逗号分隔

语法糖

声明块

出现在大括号中

声明块中包含很多声明（属性），每一个声明（属性）表达了某一方面的样式。

CSS代码书写位置

  1. 内部样式表

书写在style元素中

  1. 内联样式表，元素样式表

直接书写在元素的style属性中

  1. 外部样式表[推荐]

将样式书写到独立的css文件中。

1). 外部样式可以解决多页面样式重复的问题

2). 有利于浏览器缓存，从而提高页面响应速度

3). 有利于代码分离（HTML和CSS），更容易阅读和维护

avatar
文章
阅读
粉丝