Css Selector by Inline Style Attribute

CSS selector for element within element with inline style?

p[style="text-align: center;"] {
  color: red;
}

However this is ugly.

CSS selector by inline style attribute

The inline style attribute is no different to any other HTML attribute and can be matched with a substring attribute selector:

div[style*="display:block"]

It is for this very reason however that it's extremely fragile. As attribute selectors don't support regular expressions, you can only perform exact substring matches of the attribute value. For instance, if you have a space somewhere in the attribute value, like this:

<div style='display: block'>...</div>

It won't match until you change your selector to accommodate the space. And then it will stop matching values that don't contain the space, unless you include all the permutations, ad nauseam. But if you're working with a document in which the inline style declarations themselves are unlikely to change at all, you should be fine.

Note also that this is not at all selecting elements by their actual specified, computed or used values as reflected in the DOM. That is not possible with CSS selectors.

How to select child attribute in inline style html

The short answer is: You can't do that.

It is not possible to add inline styles that can also be applied to the child. You can refer to the style attribute spec (https://www.w3.org/TR/css-style-attr/) which succinctly, albeit somewhat cryptically, explains it.

The value of the style attribute must match the syntax of the contents
of a CSS declaration block (excluding the delimiting braces)...
The declarations in a style attribute apply to the element to which the
attribute belongs. In the cascade, these declarations are considered
to have author origin and a specificity higher than any selector.
CSS2.1 defines how style sheets and style attributes are cascaded
together. [CSS21] Relative URLs in the style data must be resolved
relative to the style attribute's element (or to the document if
per-element resolution is not defined) when the attribute's value is
parsed.
Aside from the differences in cascading, the declarations in a style
attribute must be interpreted exactly as if they were given in a CSS
style rule that applies to the element.

Why an inline style for an element cancels a `:hover` for the same?

You are right the but if need to make the color change while hovering the text you must do like this(just Added The Important Tag):

a {
  background-color: #333;
  color: white;
  text-decoration: none;
  padding: 5px;
}

a:hover {
  color: yellow !important;
}

<a href="/" style="color: tomato">Home</a>

CSS Pseudo-classes with inline styles

No, this is not possible. In documents that make use of CSS, an inline style attribute can only contain property declarations; the same set of statements that appears in each ruleset in a stylesheet. From the Style Attributes spec:

The value of the style attribute must match the syntax of the contents of a CSS declaration block (excluding the delimiting braces), whose formal grammar is given below in the terms and conventions of the CSS core grammar:
declaration-list
  : S* declaration? [ ';' S* declaration? ]*
  ;

Neither selectors (including pseudo-elements), nor at-rules, nor any other CSS construct are allowed.

Think of inline styles as the styles applied to some anonymous super-specific ID selector: those styles only apply to that one very element with the style attribute. (They take precedence over an ID selector in a stylesheet too, if that element has that ID.) Technically it doesn't work like that; this is just to help you understand why the attribute doesn't support pseudo-class or pseudo-element styles (it has more to do with how pseudo-classes and pseudo-elements provide abstractions of the document tree that can't be expressed in the document language).

Note that inline styles participate in the same cascade as selectors in rule sets, and take highest precedence in the cascade (!important notwithstanding). So they take precedence even over pseudo-class states. Allowing pseudo-classes or any other selectors in inline styles would possibly introduce a new cascade level, and with it a new set of complications.

Note also that very old revisions of the Style Attributes spec did originally propose allowing this, however it was scrapped, presumably for the reason given above, or because implementing it was not a viable option.