小白学习HTML和CSS基础6

最新推荐文章于 2022-07-04 20:18:10 发布

coderWWH

最新推荐文章于 2022-07-04 20:18:10 发布

阅读量146

点赞数 1

本文链接：https://blog.csdn.net/weixin_44215654/article/details/88604645

版权

学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本笔记于在W3C学习所记

微动学习190316/18

心得小结，看过一遍之后，不要复制粘贴，要用自己的话再说一遍。
在学习过程中思考的问题，（不止应用于css学习）比如选择器有一堆，但是学的时候只学了怎么用，却不知道这个选择器具体用在什么地方。

CSS选择器

1.基础选择器

CSS 元素选择器

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

选择器分组，必须有逗号

/* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}

/* grouping */
h1, h2, h3, h4, h5, h6 {color:blue;}

通配符选择器
这有啥用啊？？？？？

*{color:red}

声明分组

h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}
h1 {
  font: 28px Verdana;
  color: blue;
  background: red;
  }

我们可以在一个规则中结合选择器分组和声明分组，就可以使用很少的语句定义相对复杂的样式。

2.CSS 类选择器详解

类选择器独立于文档元素的方式来指定样式。？？？什么是独立于文档？？？？
要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。？？？
这句话也不是很理解？？？？？？？？？？？？？？？？？？？？？？？？？？？？
可单独，可结合。
单独就不说了
1，结合元素选择器
只有段落里的该类显示为红色文本

p.important{color:red;}
/*解释为：“其 class 属性值为 important 的所有段落”*/

2.CSS 多类选择器
各个词之间用空格分开，顺序无所谓

<p class="important warning">
This paragraph is a very important warning.
</p>

<style type="text/css">
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
</style>

在html定义class时候，可多不可少，
那比如class=“a b c”
css中这样写.c.d{color:red}就不能匹配，
但是.a.b{color:red;}就可以识别
在 IE7 之前的版本中，不同平台的 Internet Explorer 都不能正确地处理多类选择器。

3.CSS ID 选择器详解

ID 选择器允许以一种独立于文档元素的方式来指定样式。？？？？不懂
于类选择器的区别：
就是ID就和身份证号一样，只出现一次，特殊时候用的，
一个id只有一个值，

区分大小写

4.CSS 属性选择器详解

属性选择器可以根据元素的属性及属性值来选择元素。
简单属性选择器

*[title] {color:red;}

记住是属性！！！！！！！不是元素！！！！！！！
与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：

a[href] {color:red;}

意思就是h1和h2都有title，在属性选择器之前，何以选定一下子
h2[title]{color:red;}
将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色

a[href][title] {color:red;}

进一步缩小范围：根据具体属性值选择

a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

属性与属性值必须完全匹配

<p class="important warning">This paragraph is a very important warning.</p>

错误如下

p[class="important"]{color:red;}

正确如下

p[class="important warning"]{color:red;}

进阶版如下，这个是正确的

p[class~="important"] {color: red;}

p.important 等价于p[class=“important”]

5.子串匹配属性选择器？？？？？

类型	描述
[abc^=“def”]	选择属性是abc的里的值以def开头的
[abc$=“def”]	以def结尾的
[]abc*=“def”	值包含def就行

 摘自w3school
<head>
<style type="text/css">
a[href*="w3"]
{
color: red;
}
</style>
</head>

<body>
<h1>可以应用样式：</h1>
<a href="http://www.w3school.com.cn/">W3School</a>
<a href="http://www.w3school.com.cn/css/">CSS</a>
<a href="http://www.w3school.com.cn/html/">HTML</a>

<hr />

<h1>无法应用样式：</h1>
<a href="http://www.w3c.org/">W3C</a>
<a href="htw3tp://www.microsoft.com">Microsoft</a>
<a href="http://www.apple.cow3m.cn">Apple</a>
</body>

特定属性选择类型？？？？？？？？？？？这又是啥???为啥这么多类型？还不够？？？？

<head>
<style type="text/css">
*[lang|="en"] {color: blue;}
{
color: red;
}
</style>
</head>

<body>
<h1>可以应用样式：</h1>
<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<hr/>
<h1>无法应用样式：</h1>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>
</body>

6.CSS 后代选择器

后代选择器（descendant selector）又称为包含选择器。
后代选择器可以选择作为某元素后代的元素。

<head>
<style type="html/css">
h1 em{color:red;}
</style>
</head>
<body>
<h1>132<em>456</em>789</h1>
</body>

等价于在 h1 中找到的每个 em 元素上放一个 class 属性，但是，后代选择器的效率更高。

语法解释

在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“… 在 … 找到”、“… 作为 … 的一部分”、“… 作为 … 的后代”，但是要求必须从右向左读选择器。
因此，h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。如果要从左向右读选择器，可以换成以下说法：“包含 em 的所有 h1 会把以下样式应用到该 em”。

另外，可嵌套很深

7.CSS 子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）

<html>
<head>
<style type="text/css">
h1 > strong {color:red;}
</style>
</head>

<body>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>
</html>

子选择器使用了大于号（子结合符）。
子结合符两边可以有空白符，这是可选的。因此，以下写法都没有问题：

h1 > strong
h1> strong
h1 >strong
h1>strong

乱七八糟结合起来？？？？？？？？？？？？？

table.company td > p

上面的选择器会选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性。

8.CSS 相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。http://www.w3school.com.cn/tiy/t.asp?f=csse_selector_adjacent_sibling_2
为啥第一个li不受影响？

乱七八糟结合起来？？？？？？？？？？？？？
html > body table + ul {margin-top:20px;}
来？解释一下？？？？？？？？？？？？？？？？？？

9.伪类（重点来了）

我觉得下课前看不完了，要不先复习一下之前的

coderWWH

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
小白学习HTML和CSS基础6

本笔记于在W3C学习所记微动学习190316CSS选择器基础选择器CSS 元素选择器html {color:black;}h1 {color:blue;}h2 {color:silver;}选择器分组，必须有逗号/* no grouping */h1 {color:blue;}h2 {color:blue;}h3 {color:blue;}h4 {color:blue;...
复制链接

扫一扫

专栏目录